On CSS accessibility and drinking tea

On CSS accessibility
and drinking tea

Mirror conf, Braga 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 information for an HTML checkbox

Accessibility tree

Accessibility tree information for an HTML checkbox

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

It's complicated!

  • aria-flowto adds another navigation method
  • DOM order, flexed order and aria-flowto order

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

Thank you!