Summary
The use of proper semantic markup provides equal access to users who cannot see or distinguish all color variations.
Techniques
-
Ensure that color is not the primary means of conveying information. [[WCAG-1.4.1]]
Examples
Explanation
The visual appearance of content is often the only consideration that authors take into account when producing content, but this focus excludes that many users are not going to be reading visually (e.g., refreshable braille, text-to-speech playback, etc.). Separating style from markup is consequently not just about keeping CSS in a separate file from your markup, but recognizing that markup must convey meaning to be useful to all users, and that visual rendering is only one possible use case.
Semantically-rich markup enables meaningful styling, and the ARIA role
attribute can be used with CSS selectors to apply styling by purpose. The use of semantic styling
is encouraged as it ensures focus is kept on how the data is represented, not just how it looks when
rendered.
But note that the choices that you make for your content are not necessarily the optimal ones for many visual users. A user may prefer a different color scheme, to increase the contrast levels, to change the justification, fonts or line height to better suit their needs.
For this reason, cleanly separating style information from the markup is a good practice to maintain.
Avoid using the style
attribute, as it can impede the ability of users to reflow and
re-style documents.
CSS style definitions can be linked to the content documents to which they apply via the HTML5
link
element. Multiple style sheets may be attached to a document to target different
rendering mediums and/or to more cleanly group style by function.
Related Links
- HTML — ARIA
role
attribute - EPUB 3 —
epub:type
attribute