The content of this presentation, plus more information is published in English on: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ These slides are in the Dutch language.

1. .screen-reader-text
now you see me, now you don't
Rian Rietveld - rrwd.nl

2. Stel je voor...
je bent blind
hoe begrijp je een web pagina?

3. Je gebuikt een screen reader
ATArizona.com

4. Om te navigeren:
• koppen-lijst (headings)
• link-lijst

5. Maar alleen “lees verder ”?
Lees verder over wat?

8. Help je blinde bezoeker:
• gebruik duidelijke headings
• vertel in de link naar toegaat

9. Gebruik de CSS class
.screen-reader-text
• onzichtbaar voor ziende bezoekers
• voorgelezen door screen readers

10. <a href="url-here">
Lees verder
</a>

11. <a href="url-here">Lees verder
<span class="screen-reader-text">
over schattige konijntjes
</span>
</a>

12. CSS in style.css
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
}

13. Gebruik geen
display: none;
visibility: hidden;

14. <a href="url-here">
<i class="fa fa-twitter"></i>
</a>
Font Awesome

15. <a href="url-here">
<span class="fa fa-twitter">
<span class="screen-reader-text">
Twitter
</span>
</span>
</a>

16. 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,

17. In WordPress 4.2
screen-reader-text in:
• get_search_form
• comments_popup_link
• archives/categories
dropdown widgets
• get_the_post_navigation

18. There's a plugin for that!
.screen-reader-text theme support
van Jaime Martinez
https://wordpress.org/plugins/screen-reader-text-theme-support/

19. 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

20. Slides op:
rianrietveld.com/slides

21. .screen-reader-text
now you see me, now you don't
Rian Rietveld - rrwd.nl