Re: Canvas Accessibility Next steps

On Jan 22, 2010, at 2:36 PM, Richard Schwerdtfeger wrote:

> Let's discuss on Monday's call Canvas accessibility call. The CSS media query for HTML 5 is bound to there being things like an audio and video media element. The media query is used to select the appropriate content. This is why we need to have a visual ( or screen media type) as an alternative. I would be happy to have the media types as DOM attributes but the current HTML 5 spec. defines media types as elements in the DOM instead. I am trying to stay consistent. HTML 5 defines a <video> and <audio> tag to define media types vs. <div media="audio">/ 

Actually, for purposes of showing or hiding different chunks of content, you can just use CSS media queries through straight CSS.

Let's say you have this markup:

<canvas id="my-app-ui">
<div id="visual">
...
</div>
<div id="high-contrast">
....
</div>
<div id="audio">
...
</div>
</canvas>

You can just use this style:

<style>
#my-app-ui > #visual { display: block; }
#my-app-ui > #high-contrast { display: none; }
#my-app-ui > #audio { display: none; }
@media (aural) { 
  #my-app-ui > #visual { display: none; }
  #my-app-ui > #high-contrast { display: none; }
  #my-app-ui > #audio { display: block; }
}
@media (high-contrast) { /* suggested future CSS media type */
  #my-app-ui > #visual { display: none; }
  #my-app-ui > #high-contrast { display: block; }
  #my-app-ui > #audio { display: none; }
}
</style>

This technique is fully general and can apply to selection from multiple content sets in just about any context. The only reason <video> and <audio> need a special feature for their <source> elements is because in that case, the choice is not a matter of whether an element is rendered, but rather of choosing a media item to be presented by a parent element. But <canvas> can do the same thing without the need for special features.

Regards,
Maciej