Your SlideShare is downloading. ×
0
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Anysurfer (Dagopleiding toegankelijkheid)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Anysurfer (Dagopleiding toegankelijkheid)

1,261

Published on

Verslag (enkel korte puntjes die handig om weten kunnen zijn) van Anysurfer dagopleiding.

Verslag (enkel korte puntjes die handig om weten kunnen zijn) van Anysurfer dagopleiding.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,261
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Anysurfer Thursday 17 June 2010 Presentatie over de dagopleiding Anysurfer 11/06/2010 met Roel Van Gils en Bart Simons. Foto: Stevie Wonder.
  • 2. Hi! I’m Yoni. Thursday 17 June 2010 Yoni De Beule, http://www.yonidebeule.be, @yoniweb
  • 3. I work at Netlash. Thursday 17 June 2010 http:// www.netlash.com
  • 4. ANYSURFER? Een kwaliteitslabel voor websites die voor iedereen toegankelijk zijn Thursday 17 June 2010 Korte intro: AnySurfer is een kwaliteitslabel voor websites die voor iedereen toegankelijk zijn — ook voor mensen met een functiebeperking. We maken al een tijdje websites die het label halen (incl. onze eigen site), maar de richtlijnen van 2006 zijn vernieuwd. Ook komt er binnenkort het Anysurfer certified label aan.
  • 5. 2010 RICHTLIJNEN Wat is er veranderd? Thursday 17 June 2010 2010 Richtlijnen
  • 6. 1. Geen relative font sizes meer 2. Geen color contrast regels meer 3. Label moet na 2 jaar vernieuwd worden 4. Video’s moeten ondertitels hebben 5. Streng toezicht op alt tags en captions Thursday 17 June 2010 Geen relative font sizes meer Geen color contrast regels meer Label moet na 2 jaar vernieuwd worden Video’s moeten ondertitels hebben Streng toezicht op alt tags en captions
  • 7. PRAKTISCH Vooral voor designers en front-end developers Thursday 17 June 2010 Praktische items (vooral voor font-end developers)
  • 8. Thursday 17 June 2010 Uit de demo van Bart bleken dat we goed bezig zijn. Onze manier van image replacement, html pagina structuur (semantiek) zijn al volledig volgens de richtlijnen. Toch waren er enkele kleine zaken waar we makkelijk rekening mee kunnen houden om onze sites nog beter te maken.
  • 9. Een blinde of slechtziende gebruiker kan met zijn brailleleesregel slechts 40 karakters lezen. Thursday 17 June 2010 De setup die Bart Simons gebruikte (en vele anderen met een functiebeperking) is JAWS screen reader (PC) met een brailleleesregel van 40 karakters. Die 40 karakters zorgen ervoor dat een blinde of slechtziende gebruiker weinig overzicht doorheen een pagina heeft. Hij heeft bijvoorbeeld geen benul of hij de korte- of lange inhoud van een artikel aan het lezen is. Alternatieven voor screen readers zijn Supernova (PC), Voice over (Mac) en NVDA (PC). Wij gebruiken best de ingebouwde Voice over om te testen.
  • 10. Screenreaders lezen geen title attributes • Altijd op je alt tags letten • Opletten voor lege <a></a> tags (TinyMCE) • Bij een ingewikkelde afbeeldingen een verklarende paragraaf plaatsen Thursday 17 June 2010 Screenreaders lezen geen title attributes bij links. Wanneer er een afbeelding in een link staat zal hij de alt tag van die afbeelding als link lezen. Bij gebrek aan een alt tag zal hij de (vaak lelijke) bestandsnaam lezen. Ingewikkelde beelden (bijvoorbeeld grafiek) horen een paragraaf te hebben die er uitleg over geeft.
  • 11. Language attributes zijn belangrijk • Head meta niet ondersteund door screenreaders • Belang: aparte stemmen voor aparte talen • Voorbeeld: taalkeuze Thursday 17 June 2010 Lang attributes zijn heel belangrijk voor screenreaders. Niet in head meta (niet ondersteund door screenreaders). Screenreaders hebben aparte stemmen voor aparte talen.
  • 12. Fails • Media type = screenreader fail • Cufon = fail (use @font-face) • Unvalid html = fail (screenreaders) • Blockquote als indent = fail Thursday 17 June 2010 Media type screenreader is een goed idee, maar is door geen enkele screen reader geïmplementeerd. Cufon is verschrikkelijk door een screenreader (zelf getest met Voice over). Code moet valid zijn omdat screenreaders zijn niet zo vergevingsgezind als browsers. We moeten ook zorgen dat onze blockquotes duidelijk blockquotes zijn zodat gebruikers deze niet als indentatie gaan gebruiken.
  • 13. Let op met tabindex! • Links default onderaan de tabindex • Slecht overzicht van de pagina • Tabindex - 1 = win Thursday 17 June 2010 Goed opletten met tabindex bij forms. Wanneer je op form elementen een tabindex plaatst, gaat hij deze ook voor andere links op de pagina nemen. Best dus nooit een tabindex gebruiken. Eventueel kun je een onbelangrijke link wel een tabindex -1 geven.
  • 14. Skip to content • Handig voor blinden • Handig voor slechtzienden (mits juist gebruik) • Voorbeeld: http://www.webstandards.org/ Thursday 17 June 2010 Skip to content is heel handig voor zowel blinden als mensen met een extreme vergroting
  • 15. Tables • Captions en th verplicht • Zorgen dat deze option aanstaat in TinyMCE • http://examples.anysurfer.be/roel/tabel2/ Thursday 17 June 2010 Captions en th verplicht bij tables
  • 16. Paginering • Geen “>” en “<“ in paginering gebruiken. Thursday 17 June 2010 Storende elementen in paginering
  • 17. Abbr met title tooltips bij forms * • Goede oplossing volgens Roel Thursday 17 June 2010 Zie voorbeeld http://www.netlash.com/contact
  • 18. Links “Lees meer” zijn te kort en onduidelijk • Lees meer met titel achter (titel tussen <span>) • Titel verbergen met css (niet display: none) • Win voor toegankelijkheid én SEO Thursday 17 June 2010 Dit is enorm verwarrend in de “linklijst” van een screenreader.
  • 19. PRAKTISCH Vooral voor developers Thursday 17 June 2010 Praktische items (vooral voor developers)
  • 20. Slideshow (en andere bewegende elementen) • Moeten stop of pauze knop hebben Thursday 17 June 2010 Zie voorbeeld http://www.bouncebargainrentals.com/
  • 21. Javascript modal boxes en lightboxes • Modal staat meestal op het einde van de HTML • Javascript focus op element voor modal • Niet aangeraden modals/lightebox te gebruiken Thursday 17 June 2010 Best helemaal niet te gebruiken
  • 22. Iframes via javascript inserten • Ik weet niet waarom (I’m a designer) • Further research is needed Thursday 17 June 2010
  • 23. @yoniweb Thursday 17 June 2010 Yoni De Beule, http://www.yonidebeule.be, @yoniweb

×