Stylesheets and Accessibility

Cascading Stylesheets (CSS) are an important factor in how content is presented on the web. By putting styling instructions in a stylesheets, content is separated from presentation, providing great flexibility. For accessibility, it’s important to note that the “cascading” part of CSS refers to the order in which stylesheets are implemented.

Style defaults stored in the browser are applied first, but can be over-ridden by styles stored in external stylesheets, then styles stored in the HEAD section of a web page, then styles applied directly to HTML elements (inline styling) and, significantly, user-defined styles are applied last. That means the styles stored by a front end developer can and will be over-ridden by styles applied by an end user.

People with disabilities may choose to modify, ignore or disable styles in order to make web content accessible to them. Some will use assistive technology that does it for them.

You’re most likely here because you need to make sure the way you use stylesheets doesn’t make your web content inaccessible to people with disabilities.

You might have a specific problem, like:

how to maintain the reading order when stylesheets are disabled
how to ensure features work when stylesheets are disabled
how to express font size in an accessible way
how to ensure text display is consistent when stylesheets are disabled

Perhaps you need a comprehensive list of likely accessibility issues with stylesheets – and how to address them. Or maybe you just want to ask a direct question and get a clear, expert response.

You’re in the right place.

OzWiki will tell you what you need to know in order to use stylesheets in an accessible way. The Stylesheet section details 16 accessibility problems and how to address them, demonstrating compliance with 12 WCAG Level A success criteria, and 4 WCAG Level AA success criteria.

As a subscriber, you’ll also be able to request further or more detailed information relating to your specific situation.

See an example

Visual order of columns does not match order of content with style sheets disabled

Category	Style Sheets
Topic	Sequence
WCAG SC 1.3.2: Meaningful Sequence	When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html See more errors for this SC
Level	A
Technique(s)	C27: Making the DOM order match the visual order G57: Ordering the content in a meaningful sequence
Impact	High

Error

With style sheets disabled, the right hand related information column occurs prior to the content in the page.

Solution

Ensure that the layout of the page (with style sheets on) matches the source order of the page (with style sheets off).

OzWiki is an accessible resource that provides best known methods to achieve A & AA level design and interaction for web content in areas such as Audio, Video, Link, Captcha, Maps, Navigation and more. These outlined accessibility errors, examples and solutions help you become 508 compliant by demonstrating associated WCAG 2.0 success criteria and techniques.

Gain access to more detailed information on all OzWiki categories for only $39/month by purchasing a subscription today! You can cancel your subscription at any time.