Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
.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: 1...
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...
In WordPress 4.2
screen-reader-text in:
• get_search_form
• comments_popup_link
• archives/categories
dropdown widgets
• g...
There's a plugin for that!
.screen-reader-text theme support
van Jaime Martinez
https://wordpress.org/plugins/screen-reade...
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...
Slides op:
rianrietveld.com/slides
.screen-reader-text
now you see me, now you don't
Rian Rietveld - rrwd.nl
de .screen-reader-text WPMeetup Tilburg 14 april 2015
de .screen-reader-text WPMeetup Tilburg 14 april 2015
Upcoming SlideShare
Loading in …5
×

de .screen-reader-text WPMeetup Tilburg 14 april 2015

727 views

Published on

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.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

de .screen-reader-text WPMeetup Tilburg 14 april 2015

  1. 1. .screen-reader-text now you see me, now you don't Rian Rietveld - rrwd.nl
  2. 2. Stel je voor... je bent blind hoe begrijp je een web pagina?
  3. 3. Je gebuikt een screen reader ATArizona.com
  4. 4. Om te navigeren: • koppen-lijst (headings) • link-lijst
  5. 5. Maar alleen “lees verder ”? Lees verder over wat?
  6. 6. Help je blinde bezoeker: • gebruik duidelijke headings • vertel in de link naar toegaat
  7. 7. Gebruik de CSS class .screen-reader-text • onzichtbaar voor ziende bezoekers • voorgelezen door screen readers
  8. 8. <a href="url-here"> Lees verder </a>
  9. 9. <a href="url-here">Lees verder <span class="screen-reader-text"> over schattige konijntjes </span> </a>
  10. 10. CSS in style.css .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute!important; height: 1px; width: 1px; overflow: hidden; }
  11. 11. Gebruik geen display: none; visibility: hidden;
  12. 12. <a href="url-here"> <i class="fa fa-twitter"></i> </a> Font Awesome
  13. 13. <a href="url-here"> <span class="fa fa-twitter"> <span class="screen-reader-text"> Twitter </span> </span> </a>
  14. 14. 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,
  15. 15. In WordPress 4.2 screen-reader-text in: • get_search_form • comments_popup_link • archives/categories dropdown widgets • get_the_post_navigation
  16. 16. There's a plugin for that! .screen-reader-text theme support van Jaime Martinez https://wordpress.org/plugins/screen-reader-text-theme-support/
  17. 17. 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
  18. 18. Slides op: rianrietveld.com/slides
  19. 19. .screen-reader-text now you see me, now you don't Rian Rietveld - rrwd.nl

×