.screen-reader-text

now you see me, now you don't

Rian Rietveld - rrwd.nl

Stel je voor...

je bent blind

hoe begrijp je een web pagina?

Je gebuikt een screen reader

ATArizona.com

Om te navigeren:

• koppen-lijst (headings)

• link-lijst

Maar alleen “lees verder ”?

Lees verder over wat?

Help je blinde bezoeker:

• gebruik duidelijke headings

• vertel in de link naar toegaat

Gebruik de CSS class

.screen-reader-text

• onzichtbaar voor ziende bezoekers

• voorgelezen door screen readers

<a href="url-here">

Lees verder

</a>

<a href="url-here">Lees verder

<span class="screen-reader-text">

over schattige konijntjes

</span>

</a>

CSS in style.css

.screen-reader-text {

clip: rect(1px, 1px, 1px, 1px);

position: absolute!important;

height: 1px;

width: 1px;

overflow: hidden;

}

Gebruik geen

display: none;

visibility: hidden;

<a href="url-here">

<i class="fa fa-twitter"></i>

</a>

Font Awesome

<a href="url-here">

<span class="fa fa-twitter">

<span class="screen-reader-text">

Twitter

</span>

</span>

</a>

Back and forward compatible

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

clip-path: polygon(0px 0px, 0px 0px,0px 0px,

In WordPress 4.2

screen-reader-text in:

• get_search_form

• comments_popup_link

• archives/categories

dropdown widgets

• get_the_post_navigation

There's a plugin for that!

.screen-reader-text theme support

van Jaime Martinez

https://wordpress.org/plugins/screen-reader-text-theme-support/

Lees meer op:

blog.rrwd.nl

The screen-reader-text class,

why and how?

blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how

Slides op:

rianrietveld.com/slides

.screen-reader-text

now you see me, now you don't

Rian Rietveld - rrwd.nl