3 Quick accessibility wins for your site

3 easy a11y wins

Rian Rietveld

WordPress Engineer @ Human Made

1: headings

Tell a storywith your headings

1 <h1>

2: links

Usemeaningfullink text

<a href="url" class="fa fa-twitter”>

<span class="sr-only">Twitter</span>

</a>

.screen-reader-textWordPress

.screen-reader-textWordPress

Bootstrap

.sr-only

.screen-reader-textWordPress

Bootstrap

.sr-only

Do not use display: none;

3:proper use of elements

"If it's supposed to act like a button, it should be a

button." Joe Dolson

<div> or <span>is not for a menu toggle

use a<button>

1 tell a story with headings

2 use meaningful link text

3 use the right HTML5 elements

@RianRietveld

Thank you!