L'accessibilité est facile, ou les 5 péchés capitaux de l'accessibilité

, ! , Frontend- Delivery Club. . , . 5 , . , , , . , , , — .





, , %username%, 80/20: 80% 20% , 20% 80% . .





, NVDA, VoiceOver , — , , , , . - , .





, , , . , , , , , .





1.  

HTML , H1 H6 , . 





Exemple de hiérarchie d'en-tête

(, , ) H1—H6 . , , , .





. , H1, . H2. , H3, , H2.





, H1, H2 , , H4.





, , , , , . , . 





  • H1—H6.





  • H1 H6. 





2.  

Un exemple de boutons non disponibles pour le lecteur d'écran

: , ? , ? , , ? , , - button, .





, div CSS. , , div, JavaScript , - , . , .





button, , , aria-label , button.





, , , , button, button, button, button…. 





  •   . 





3.  

. - . alt ( ), , , .





alt — , , , . . , «» «», .





alt , , . Facebook , , alt. 





  • alt.





4.

. - , , - , , . , , , .





, , , , , , . , . 





label, input. , .





. , , .  





exemple captcha

, , reCaptcha . , . , , .





 

  • label .





  • , .





5:  

10 , , , , , .





, , . .





site avec un grand nombre de pop-ups publicitaires

 

  • , .





  • , .





  • , .





, , . , , , . , accessibility , , !





!








All Articles