Accessibilité et Bonnes Pratiques :   Comment évaluer en 20 minutes un site web   Laurie-Anne  Bourdain
Le code
Validité <ul><li>Le site déclare un doctype, par exemple : </li></ul><ul><ul><li><!DOCTYPE html> </li></ul></ul><ul><li>Le...
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>...
Titres de Section <ul><li>Les Hn sont utilisés pour structurer le contenu. </li></ul><ul><li>La hiérarchie est correctemen...
Images <ul><li>Chaque image à un alt : </li></ul><ul><ul><li>Reprenant fidèlement le contenu de l’image. </li></ul></ul><u...
Title sur les Liens <ul><li>Le title apporte une information  supplémentaire  à l’intitulé du lien. </li></ul><ul><li>Le t...
Formulaires <ul><li>Utilisation correcte des  <label> . </li></ul><ul><li>Les champs obligatoires sont indiqués. </li></ul...
Fichiers externes <ul><li>Le nombre de fichiers externe est réduit au minimum, idéalement :  </li></ul><ul><ul><li>1 fiche...
CSS <ul><li>Les styles CSS sont externalisés. </li></ul><ul><li>Les fichiers CSS sont appelés dans le  <head> . </li></ul>...
JavaScript <ul><li>Le JavaScript n’est pas appelé Java. </li></ul><ul><li>Les scripts JS sont externalisés. </li></ul><ul>...
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ésentati...
Aspect Visuel
Agrandissement des fontes <ul><li>Sous IE, le changement de taille du texte seul est possible. </li></ul><ul><ul><li>Préfé...
Menu déroulant <ul><li>Utilisable au clavier </li></ul><ul><ul><li>Utiliser OnFocus plutôt que OnMouseOver </li></ul></ul>...
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...
Textes <ul><li>Les textes sont lisibles :  </li></ul><ul><ul><li>Taille de police suffisante  </li></ul></ul><ul><ul><li>C...
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 men...
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 ! ...
<ul><li>Et pendant qu’on y est,  </li></ul><ul><li>laissez les gifs animés tranquilles. </li></ul>
?
Liens et Ressources <ul><li>http://www.alsacreations.com/ </li></ul><ul><li>http://www.opquast.com/ </li></ul><ul><li>http...
Prochain SlideShare
Chargement dans…5
×

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

2 329 vues

Publié le

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 329
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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>

×