On CSS accessibility and drinking tea

On CSS accessibility
and drinking tea

CSSDay, Amsterdam 2016

Space Jam

Space Jam poster (1996)

Space Jam website

Space Jam website (1996)

Old school style...

<body vlink="#ff4c4c"




<table width="500" border="0">
      <td align="left">...</td>


<font size="-1">
  <a target="_blank" href="http://www.warnerbros.com/term-use">
    Legal/Privacy Information About This Site.</a>

And accessibility


Time for a nice cup of tea

Cup of tea

Platform Accessibility APIs

Platform controls

Bold checkbox in Windows 10

Web control

<input type="checkbox" id="bold">
<label for="bold">Bold</label>

DOM tree

DOM tree

Accessibility tree

Accessibility tree

Manipulating the DOM

HTML example

<a href="/">Tequila!</a>

HTMl screen reader demo

HTML headings screen reader demo


:after example

#a:after {
  content: ' Makes me happy!';
<a href="/" id="a">Tequila!</a>

Rendered code

<a href="/" id="a">Tequila!</a>

CSS2.1 on generated content

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

:after screen reader demo

Browser support

CSS generated content is accessibility supported in:

Browser solutions

Time for a nice cup of tea?

Cup of tea

CSS3 FlexBox

Basic HTML


Keyboard demo

display and order properties

<div style="display: flex;">
    <button style="order: 3;">1</button>
    <button style="order: 2;">2</button>
    <button style="order: 1;">3</button>

Flexed keyboard demo

Spec advice?

Authors must use ‘order' only for visual, not logical, reordering of content.

tabindex attribute

<div style="display: flex;">
    <button style="order: 3;" tabindex="3">1</button>
    <button style="order: 2;" tabindex="2">2</button>
    <button style="order: 1;" tabindex="1">3</button>

tabindex demo

tabindex problem

aria-flowto attribute

aria-flowto example

<div style="display: flex;">
    <button id="b1" aria-flowto="b3" style="order: 3;">1</button>
    <button id="b2" aria-flowto="b1" style="order: 2;">2</button>
    <button id="b3" aria-flowto="b2" style="order: 1;">3</button>

aria-flowto screen reader demo

The Firefox "bug"

Time for a nice cup of tea?

Cup of tea

CSS3 Speech

speak:; property

Determines whether content is presented aurally

speak: auto;

Values: auto, normal, none

voice-volume property

Determines volume of voice output:

voice-volume: medium;

Values: silent, x-soft, soft, medium, loud, x-loud

voice-rate property

Determines speaking rate:

voice-rate: normal;

Values: normal, x-slow, slow, medium, fast, x-fast

voice-pitch propertey

Determines the baseline voice pitch:

voice-pitch: medium;

Values: x-low, low, medium, high, x-high

Use cases?

  • News headlines spoken in a different voice
  • Notifications spoken louder
  • Small print spoken more quietly and quickly

Speech demo

Visual ARIA


Thank you!