The use of proper semantic markup provides equal access to users who cannot see or distinguish all color variations.
- Ensure that color is not the primary means of conveying information. [WCAG 1.3.1]
- H88: Using HTML according to spec
- H49: Using semantic markup to mark emphasized or special text
- G14: Ensuring that information conveyed by color differences is also available in text
- G115: Using semantic elements to mark up structure
- G117: Using text to convey information that is conveyed by variations in presentation of text
- G138: Using semantic markup whenever color cues are used
- G205: Including a text cue for colored form control labels
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
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
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
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.