Modern CSS and Accessibility

Introduction

Not so long ago, when web used to be simple, CSS used to be a bunch of simple rules to add some basic styling to pages.

But that's a thing of the past. CSS is now much more powerful and you can use it to make complex layouts, move things around the screen, and even manipulate the content and the order of elements.

Has it been all that great for accessibility? Let's find out!

The Bad

Problem with complex layouts

With things like flexbox, we have a lot more control on the layout now.

One of the flexbox features is order property, which lets you re-order the child elements without changing the markup.

Here’s how that would look:

Markup

<div class="parent">
    <div class="child">Element 1</div>
    <div class="child">Element 2</div>
    <div class="child">Element 3</div>
</div>

CSS

.parent { display: flex; }
.child:nth-of-type(1) { order: 3; }
.child:nth-of-type(2) { order: 1; }
.child:nth-of-type(3) { order: 2; }

Output

As visible in the demo, the visual order of the elements can be completely different from the order in the DOM tree. This can really mess up with accessibility functions, like screen readers.

This doesn't just end here, with the new grid layout coming in, ensuring accessibility is going to become more difficult than ever. One example of this can be masonry layouts.

Problem with pseudo elements

Pseudo elements are another way CSS can manipulate the page content without the element actually being in the DOM tree.

For example, with :before and :after you can add content like text, characters, and icon-fonts to the page.

Example

.element:before {
    content: "\f130"; //icon font code
}

Though screen readers are equipped to read the pseudo elements, in many cases these rules are used to display visual content, like random characters or icon-font glyphs which is confusing to screen readers.

The Good

CSS3 speech spec

One important prospect in enhancing accessibility through CSS is the CSS3 speech spec.

Visually impaired users use screen readers to read the content of the page, however the speech output from screen readers sounds very flat and unnatural.

CSS3 speech helps solve this problem by letting you adjust the screen readers to make them sound more natural.

Here are a few of the speech properties with their descriptions from the spec:

speak-as: Determines in what manner text gets read, based upon a predefined list of possibilities (normal, spell-out, digits, etc.).

voice-family: Let's you set the gender, age, and other speaker related properties.

voice-rate: Let's you define the speaking rate (flow, normal, fast).

voice-pitch: Adjust the pitch of the speech.

pause: Set punctuation in the speech with a pause before/after the block.

Here's a sample of how you would write CSS speech code.

.old-male {
    voice-family: old male;
    voice-stress: strong;
    voice-volume: medium;
}
.young-female {
    voice-family: female;
    voice-stress: reduced;
    voice-volume: loud;
}

CSS Speech spec is in Candidate Recommendation at the moment and is far from implementation in most browsers, but they most likely will support this in future.

Though CSS speech is not supported as of now, you can take a look at Speech syntheses API to achieve similar results here's a demo.

Conclusion

Accessibility is an often ignored aspect of web development, but shouldn't the all-inclusive web be accessible for all?

With modern CSS it has become easy to create complex and amazing layouts. However an amazing page shouldn't come at the expense of bad accessibility.

There definitely are some more good and bad parts to be covered, do comment below with your suggestions!

---

Extra: Read this interesting AMA we recently had with Marcy Sutton which influenced this article, and also this interesting talk by Léonie Watson on the same topic.