Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web

2,407 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,407
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web

  1. 1. Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web Laurie-Anne Bourdain
  2. 2. Le code
  3. 3. Validité <ul><li>Le site déclare un doctype, par exemple : </li></ul><ul><ul><li><!DOCTYPE html> </li></ul></ul><ul><li>Le doctype est le premier élément de la page </li></ul><ul><li>Outil de référence : validateur du W3C </li></ul><ul><li>Code HTML uniquement </li></ul><ul><ul><li>La validation CSS a moins d’intérêt </li></ul></ul>
  4. 4. Langue <ul><li>La langue principale de la page est déclarée : </li></ul><ul><ul><li><html lang=&quot;fr&quot;> </li></ul></ul><ul><li>Le serveur envoie l’info Content-Language (sinon, la méta éponyme est utilisée) </li></ul><ul><li>Les changement de langue sont balisés : </li></ul><ul><ul><li><p>Les kiwi c’est trop <span lang=&quot;en&quot;>cool</span> !</p> </li></ul></ul>
  5. 5. Titres de Section <ul><li>Les Hn sont utilisés pour structurer le contenu. </li></ul><ul><li>La hiérarchie est correctement construite. </li></ul><ul><li>Les titres ne sont pas masqués / sortis de l’écran. </li></ul><ul><li>Les titres ne sont pas utilisés pour placer des mots clés (référencement / positionnement). </li></ul>
  6. 6. Images <ul><li>Chaque image à un alt : </li></ul><ul><ul><li>Reprenant fidèlement le contenu de l’image. </li></ul></ul><ul><ul><li>Vide si l’image est décorative. </li></ul></ul><ul><ul><li>Non redondant avec le contexte de l’image. </li></ul></ul><ul><li>Les images porteuses de contenu ne sont pas appelées par CSS. </li></ul>
  7. 7. Title sur les Liens <ul><li>Le title apporte une information supplémentaire à l’intitulé du lien. </li></ul><ul><li>Le title ne sert pas à placer des mots clés (référencement / positionnement). </li></ul><ul><li>Le title est utilisé pour indiquer un comportement inattendu du lien (nouvelle page, ouverture de logiciel...). </li></ul>
  8. 8. Formulaires <ul><li>Utilisation correcte des <label> . </li></ul><ul><li>Les champs obligatoires sont indiqués. </li></ul><ul><li>En cas d’erreur de remplissage, un message indiquant le(s) champs fautif est envoyé. </li></ul><ul><li>Le formulaire indique que le message a été envoyé. </li></ul>
  9. 9. Fichiers externes <ul><li>Le nombre de fichiers externe est réduit au minimum, idéalement : </li></ul><ul><ul><li>1 ficher JS </li></ul></ul><ul><ul><li>1 fichier CSS </li></ul></ul><ul><ul><li>Les correctifs pour IE </li></ul></ul>
  10. 10. CSS <ul><li>Les styles CSS sont externalisés. </li></ul><ul><li>Les fichiers CSS sont appelés dans le <head> . </li></ul><ul><li>Les CSS (surtout 3) se dégradent correctement sur les dinosaures. </li></ul>
  11. 11. JavaScript <ul><li>Le JavaScript n’est pas appelé Java. </li></ul><ul><li>Les scripts JS sont externalisés. </li></ul><ul><li>Les scripts JS sont appelés en fin de documents (sauf chargement asynchrone). </li></ul><ul><li>Le code JS est non intrusif. </li></ul>
  12. 12. Sémantique <ul><li>Les éléments HTML ne sont pas détournés de leur fonction : </li></ul><ul><ul><li>Tableau de présentation </li></ul></ul><ul><ul><li><br> multiples au lieux d’un <p> aragraphe </li></ul></ul><ul><li>Les éléments HTML sont utilisés quand appropriés : </li></ul><ul><ul><li>Liste non ordonnée pour un menu </li></ul></ul><ul><ul><li><abbr> , <acronym> </li></ul></ul>
  13. 13. Aspect Visuel
  14. 14. Agrandissement des fontes <ul><li>Sous IE, le changement de taille du texte seul est possible. </li></ul><ul><ul><li>Préférer les em aux px. </li></ul></ul><ul><li>Le design ne se déforme pas </li></ul><ul><ul><li>Ne pas figer les hauteurs d’éléments </li></ul></ul>
  15. 15. Menu déroulant <ul><li>Utilisable au clavier </li></ul><ul><ul><li>Utiliser OnFocus plutôt que OnMouseOver </li></ul></ul><ul><ul><li>Ne pas supprimer l’outline au focus </li></ul></ul><ul><li>Les éléments déroulables ne sortent pas du viewport </li></ul><ul><li>Utilisable même avec IE6 </li></ul><ul><ul><li>Préférer les JavaScript au full CSS </li></ul></ul>
  16. 16. Comportement du Site <ul><li>Le site n’ouvre pas de nouvelles pages / onglets. </li></ul><ul><li>Le site n’a pas de Splash Screen. </li></ul><ul><li>Le site n’envoie pas balader le visiteur en fonction de son matériel ou de sa configuration. </li></ul>
  17. 17. Textes <ul><li>Les textes sont lisibles : </li></ul><ul><ul><li>Taille de police suffisante </li></ul></ul><ul><ul><li>Contraste fort mais pas maximal </li></ul></ul><ul><li>Les liens sont clairement identifiables </li></ul><ul><li>Le soulignement est réservé au liens. </li></ul>
  18. 18. Multimédia <ul><li>Le site ne lance pas de musique ou de vidéo au chargement de la page. </li></ul><ul><li>S’il y a eu menace de la part de votre boss / client, il est possible de stopper la musique / vidéo. </li></ul>
  19. 19. Fontes <ul><li>Le site n’utilise pas de Comic Sans MS. </li></ul><ul><li>Jamais ! </li></ul><ul><li>Sous aucun prétexte ! </li></ul><ul><li>Même sous la menace ! </li></ul>
  20. 20. <ul><li>Et pendant qu’on y est, </li></ul><ul><li>laissez les gifs animés tranquilles. </li></ul>
  21. 21. ?
  22. 22. Liens et Ressources <ul><li>http://www.alsacreations.com/ </li></ul><ul><li>http://www.opquast.com/ </li></ul><ul><li>http://validator.w3.org/ </li></ul><ul><li>http://gtmetrix.com/ </li></ul>

×