A presentation at Codelicious in in Birmingham, UK by Dan Matthew
Guided By Voices: Screenreader Accessibility Daniel Matthew 7th July 2016
Demo
Making things better
Techniques • Setting the document language • Using semantic markup • Implementing ARIA landmarks • Curating the focus order • Including bypass blocks • Writing descriptive link and header text
Set the document language <html lang=”en”>
Semantic markup <header></header> <nav></nav> <main> <section> <article> <h1></h1> <button></button> </article> </section> </main> <footer></footer>
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>
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; }
Focus order <h2 class=”mdl-card__title-text” lang=”is” tabindex=”0”>Hello!</h2>
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>
Let’s put it all together…
Tooling
Screenreader
A11y
Chrome Accessibility Dev Tools
aXe
WAVE
Summary
👋
An introduction to screenreaders et al
for free. You
can too.