Screenreader accessibility

A presentation at Codelicious in July 2016 in Birmingham, UK by Dan Matthew

Slide 1

Guided By Voices: Screenreader Accessibility Daniel Matthew 7th July 2016

Slide 2

Demo

Slide 3

Making things better

Slide 4

Techniques • Setting the document language • Using semantic markup • Implementing ARIA landmarks • Curating the focus order • Including bypass blocks • Writing descriptive link and header text

Slide 5

Set the document language <html lang=”en”>

Slide 6

Semantic markup <header></header> <nav></nav> <main> <section> <article> <h1></h1> <button></button> </article> </section> </main> <footer></footer>

Slide 7

ARIA Landmarks <header role=”banner”></header> <nav role=”navigation”> <form role=”search”></form> </nav> <main role=”main”> <section> <article> <h1></h1> <a role=”button”></a> </article> </section> </main> <footer role=”contentinfo”></footer>

Slide 8

Add a “bypass block” <a class=”sr-only sr-only-focusable” href=”#maincontent” tabindex=”1”>Skip to main content</ a> .sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .sr-only-focusable:active, .sr-only-focusable:focus { position: absolute; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

Slide 9

Focus order <h2 class=”mdl-card__title-text” lang=”is” tabindex=”0”>Hello!</h2>

Slide 10

Write descriptive link text <!— Hide text with CSS —> <a class=”mdl-button mdl-button—colored mdl-js-button mdl-jsripple-effect mdl-button—accent” href=”/italy”>More <span class=”sr-only”>from my Italian adventure</span></a> <!— With aria-label —> <h1 id=”italian” lang=”it”>Ciao da Italia</h1> <a class=”mdl-button mdl-button—colored mdl-js-button mdl-jsripple-effect mdl-button—accent” href=”/italy” arialabel=”italian”>More</a>

Slide 11

Let’s put it all together…

Slide 12

Tooling

Slide 13

Screenreader

Slide 14

A11y

Slide 15

Chrome Accessibility Dev Tools

Slide 16

aXe

Slide 17

WAVE

Slide 18

Summary

Slide 19

👋