Accessible CSS

Introduction

Cascading Style Sheets, or CSS, allow you to modify characteristics of existing HTML elements. All web browsers have a built-in style sheet that defines the default styling for all elements. For instance, when the browser sees the <p> tag, it knows to skip a line and start a new section because that's what the built-in style sheet instructs it to do. 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:

illustration of the cascading effect of style sheets

Styles defined in an external style sheet (usually a .css file) override the browser defaults. Internal styles (typically found in the <head> section of a page) override external styles. And element styles (applied directly to an element) override internal styles. There's a bit more complexity to it than this, but these are general rules. But the top-most layer of control always lies with the end user. They can define user styles that will always override or disable any other styles that are defined.

Important

The end user always has ultimate control over the styling of a page they view. For accessibility, we need to define accessible styles, but also allow flexibility in our designs for end user customization. The idea that web developers and designers have control over the display of their content is an illusion.

So why would an end user define their own styles? A user with low vision may define a much larger text size to allow them to read text content. A user with color deficiency or low vision might override page colors so they can perceive the page content in certain colors or with high contrast. A user with cognitive or learning disabilities might override positioning, font faces, images, etc. to ensure a more basic presentation. In short, there are many reasons a user might override default or author-defined styles. Additionally, screen readers ignore almost all CSS.

Separating Content from Presentation

One of the primary benefits of CSS is that it allows authors to separate content from its presentation. Content means the text, images and other elements that make up the core of the document. Presentation means the way in which content is displayed. Content should be defined in markup, in the HTML of the page. Presentation should be defined in CSS. By doing this, if someone disables or overrides CSS, the content should still be fully accessible.

Consider the following screenshot of this page with CSS disabled.

Screenshot of this page with styles disabled. Plain text with only one image is visible

While the style-less page does not look much like the page you are currently viewing, all of the content is present. Additionally, because this page utilizes proper semantics with headings and lists in markup rather than styles, these remain present when styles are disabled. Any styles that the user changes or overrides will apply to the underlying content which should remain accessible regardless of the user modifications.

Controlling the Visual Layout

CSS provides great control over the positioning of elements within a page. This means that the underlying source code order (which determines the screen reader reading order and the keyboard navigation order) may not match the visual layout and presentation order. As noted above, if you separate content from presentation, the underlying content/markup order becomes very important. It should be logical and intuitive, and generally should match or be similar to the visual presentation order - roughly 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, it would be very rare to have content presented to screen reader users that is not presented visually in a page. 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.

If you view the previous screenshot of the unstyled version of this page, you will see a few text items for screen reader users that are not presented visually - a text label for the search field, a "Main Navigation" heading previous to the site navigation, and "You are here:" text previous to the breadcrumbs. These area all hidden visually with CSS, but provide useful information to screen reader users.

Note

The techniques for hiding accessible 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. But in situations where CSS does present information, content, or meaning, an accessible alternative must be provided.

For example, CSS background images cannot be given alternative text directly. So if an image conveys content, it should be placed into content by using the img element with an appropriate alt attribute value. If this is not possible, you could use hidden, off-screen text that conveys the content of those images to users that cannot see them.

With CSS, text can be styled to look like headings. Words can appear emphasized (as if the <strong> or <em> element had been used) even if they are only presented in a different color or made to appear bold or italicized (without the accompanying semantic markup). Always use native HTML markup to provide the necessary semantic content and meaning, then use CSS to enhance and change the default styles.

Heading Example

The sentence below appears to be a heading, but it is just regular text styled to look like 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 would be:

<h1>This IS a Heading and It Looks Like One Too.</h1>

Emphasis Example

The word "emphasized" in the sentenced below is not emphasized in the markup. It is only styled to appear bold.

"Please remember to emphasize text that is important."

The incorrect markup which produced this example is as follows:

<p>Please remember to <span style="font-weight:bold;">emphasize</span> text that is important.</p>

The correct markup would be:

<p>Please remember to <strong>emphasize</strong> text that is important.</p>