Accessible CSS
Introduction
Cascading Style Sheets, or CSS, allow you to modify display and style characteristics of HTML elements. All web browsers have a built-in style sheet that defines the default styling for web page content. For instance, the <p> element has default styles for margin, font face, font size, etc. The <strong>, <table>, and every other HTML tag is defined in this style sheet; their size, color, position, and other characteristics are all defined within it. When a page author defines their own styles, they can override this built-in style sheet and tell the browser to display elements in a different way.
CSS is called "cascading" because there is a hierarchy or precedence for how styles are applied—the browser default styles are overridden by styles in an external style sheet (usually a .css file) which are overridden by internal styles (typically found in the <head> section of a page) which are overridden by element styles (applied directly to a page element).
To improve accessibility, end users may change browser default styles and may define custom styles that override any other styles in the "cascade". Pages must be adaptable and flexible to end user style customizations.
Why would an end user define their own styles? A user with low vision may define a much larger text size. A user with color deficiency or low vision might override page colors to enforce certain colors or high contrast. A user with cognitive or learning disabilities might override positioning or disable images to ensure a more basic presentation. A user with dyslexia might change fonts and text spacing for better readability.
Because CSS is primarily about visual presentation, most CSS does not impact what a screen reader will read. However, some styles, such as display:none and visibility:hidden will cause content to be ignored by screen readers. Pseudo-content defined with ::before and ::after will be read by screen readers.
Separating Content from Presentation
A primary benefit of CSS is that authors can separate content from its presentation. Content means the text, headings, list, regions, images, and other elements defined in HTML markup, along with their inherent semantics or meanings. Presentation means the way in which content is displayed as defined by CSS. By ensuring content is in HTML and presentation in CSS, if someone disables or overrides CSS, the content and semantics should still be fully accessible.
The Web Content Accessibility Guidelines (WCAG) requires that visual information, meaning, and relationships are also defined programmatically in markup or in text.
Controlling the Visual Layout
CSS float, display (especially with display: grid), etc. provide great control over the positioning of elements within a page, regardless of the order of those elements in the HTML code. The underlying source code order determines the screen reader reading order and the keyboard navigation order. These should typically match the visual layout and presentation order. Both should be logical and intuitive, and generally should align.
WCAG requires that the reading sequence and the navigation order of elements align with the visual meaning and sequence. Someone exploring the page content via a screen reader or keyboard should typically encounter content in the same order as someone reading the content visually (typically left to right, top to bottom).
Hiding Content With CSS
In almost all cases, if content is presented visually in a page, it should be accessible to screen reader users. Similarly, content that is hidden visually with CSS should typically not be accessible to screen reader users. There are, however, exceptions to this, primarily for things that might make sense visually, but for which a succinct explanation or instruction might be useful to screen reader users.
The techniques for hiding content using CSS can be found in CSS in Action: Invisible Content Just for Screen Reader Users
Presenting Content and Meaning with CSS
As opposed to hiding content with CSS, sometimes content or meaning is presented exclusively with CSS. This might include using CSS to do the following:
- Define background images that present content
- Control layout or presentation in a way that affects meaning
- Use color alone to convey meaning
- Generate content with CSS
These techniques should generally be avoided. However, in situations where CSS is used to present information, content, or meaning that is not otherwise accessible, an accessible alternative must be provided.
For example, CSS background images cannot be given alternative text directly (though a CSS alt property is currently in development). If an image conveys content, it should optimally be placed into content by using the img element with an appropriate alt attribute value. If this is not possible, hidden or off-screen text (or perhaps ARIA) could be used to convey the content of the image to users that cannot see it.
Always use native HTML markup to provide the necessary semantic content and meaning, then use CSS to enhance and change the default styles.
The sentence below is styled to look like a heading, but does not provide the semantics or functionality of a heading.
This is Not a Heading. It Just Looks Like One.
The incorrect markup which produced this example is as follows:
<p style="font-weight: bold; font-size: 200%; font-family: Arial;">This is NOT a Heading. It Just Looks Like One.</p>
The correct markup, assuming this was a second-level heading, would be:
<h2>This IS a Heading and It Looks Like One Too.</h2>
If the defaults styles of the h2 were not desired, CSS could be used to change the visual appearance while maintaining the underlying heading semantics and functionality.
The word "extremely" in the sentenced below is not emphasized in the markup. It is only styled to appear bold, so would not be emphasized by a screen reader.
It is extremely important to use CSS correctly!
The incorrect code which produced this example is as follows:
<p>It is <span style="font-weight:bold;">extremely</span> important to use CSS correctly!</p>
The correct markup would be:
<p>It is <strong>extremely</strong> important to use CSS correctly!</p>