Summary

The use of proper semantic markup provides equal access to users who cannot see or distinguish all color variations.

Techniques

Examples

Example 1 — Adding a border to examples

CSS is used to highlight examples with a thick grey left border. The CSS selector finds pre elements whose role attribute contains the value doc-example.

pre[role~='doc-example'] {
   border-left: solid 3px; rgb(180,180,180);
}
Example 2 — Including style overrides for mobile rendering

The second linked style sheet is only applied when the maximum screen width is no more than 480 pixels, allowing styles optimized for mobile devices to override the defaults.

<html …>
   <head>
     …
     <link
         rel="stylesheet"
         type="text/css"
         href="#css/epub3.css"
         media="screen"/>
     
     <link
         rel="stylesheet"
         type="text/css"
         href="#css/epub3-mobile.css"
         media="screen and (max-width:480px)"/>
     …
   </head>
   …
</html>

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