ACCESSIBILITÉ                     WEBNormes et bonnes pratiquesPour des sites plus accessibles
QU’EST-CE QUEL’ACCESSIBILITÉ DUWEB ?
DÉFINITION OFFICIELLE DEL’ACCESSIBILITÉ Mettre le web est ses services à la disposition detous les individus, quels que so...
AccéderL’ACCESSIBILITÉ, POUR QUI ?                                                             Percevoir   Handicaps Visu...
COMMENT SURFE LES HANDICAPÉS                                         Mes logiciels et                                     ...
WEB CONTENT ACCESSIBILITYGUIDELINES (   WCAG) 2.0
WEB CONTENT ACCESSIBILITY                               WCAG  GUIDELINES (WCAG) 2.0                                       ...
WEB CONTENT ACCESSIBILITY                Les techniques                                               sont  GUIDELINES (WC...
MICROFORMATS 
QUE SONT LES MICROFORMATS ?Les microformats sont un moyen dajouter unesyntaxe simple à des items de données lisibles parde...
LES PLUSCONNUS Hcard Hcalendar XFN RelNoFollow RelLicence RelTag
COMMENT ÇAMARCHE ?Principalement avec deux attributs :  Class : utilisé principalement à des fins didentification délémen...
ESSAYONS HCARD
BONNES PRATIQUES POURSITE ACCESSIBLE
LES RÔLES ETPROPRIÉTÉS DE WAI-       ARIA
HTML5 COMPATIBLE AVEC ARIA ?ARIA : Accessible Rich Internet Application rôle, état, propriété pour les aides techniques :...
POINTS DE REPÈRE (LANDMARKROLES)   Les « points de repère » (ou landmark Roles)    délimitent les grands zones du documen...
IDENTIFIER LES PRINCIPALESZONES DE LA PAGE AVECLATTRIBUT ROLELes principales zones de la page doivent être identifiées à l...
  role="banner" pour délimiter une zone de  contenu qui identifie le site, comme une  bannière avec un logo, un slogan et...
ATTENTION   Une page ne doit contenir qu’un seul    role="main".   Il est tout à fait possible d’imbriquer plusieurs    ...
PERSONNALISATION DES FONCTIONSNATIVES
METTRE EN PLACE UNE HIÉRARCHIEDE TITRES LOGIQUE ET EXHAUSTIVEAVEC LES BALISES <H1> À <H6>   Pour mettre en place une hiér...
   Il n’est jamais gênant d’utiliser plusieurs <h1>    dans une page si plusieurs titres de premier    niveau sont présen...
   Une bonne pratique d’accessibilité consiste à ne    pas ajouter de titres cachés.
   L’attribut role peut être ajouté sur n’importe    quelle balise HTML comme <div>, <form>,    <nav>, etc.
ORDRE DU FLUX HTML   Écrire le code HTML en suivant la logique de    lordre de lecture
ENCODAGE   Veiller au bon codage de tous les caractères   Penser également à vérifier le bon codage des    caractères qu...
LANGUE DE LA PAGE   Renseigner la langue principale de la page avec    lattribut lang sur la balise <html>   Utiliser l’...
   Ne pas utiliser dattributs ou de balises HTML    destinés exclusivement à la mise en forme.      des attributs : alig...
IMAGES DÉCORATIVES ETILLUSTRATIVES   Utiliser une alternative vide (alt="") sur les    images décoratives et illustratives
IMAGES INFORMATIVES   Ne pas utiliser CSS pour afficher les images    informatives.   Renseigner un court texte de rempl...
INTITULÉS DES LIENS ET DESBOUTONS   Les liens et les boutons ne doivent jamais être    vides et doivent donc toujours pos...
NOUVELLES FENÊTRES   Signaler louverture des nouvelles fenêtres
FORMULAIRES   Utiliser la balise <label> ainsi que les attributs    for et id pour associer les champs à leurs    intitul...
   Les balises <fieldset> et <legend> ne sont à    utiliser que lorsque plusieurs groupes de champs    disposent d’intitu...
   Une bonne pratique d’accessibilité consiste à    utiliser également les balises <fieldset> et    <legend> lors de l’in...
TITRE DE LA PAGE   Mettre à jour le <title> de la page quand un    formulaire renvoie une erreur ou un message de    conf...
CAPTCHA (SYSTÈMES ANTI-SPAM)   Indiquer dans lalternative des CAPTCHA    graphiques où trouver la version non graphique  ...
TABLEAUX DE MISE EN FORMENe pas utiliser de balises ou dattributs propres aux tableaux de données dans les tableaux de mis...
TABLEAUX DE DONNÉES Donner un titre à chaque tableau de données  avec la balise <caption> Utiliser lattribut scope pour ...
CONTENUS MASQUÉS Cas 1 : ces éléments sont masqués mais peuvent  être affichés sur action de lutilisateur Cas 2 : ces él...
L’ACCESSIBILITÉ, ÇADEMANDE DE L’HABITUDE !
Accessibilité et HTML5
Prochain SlideShare
Chargement dans…5
×

Accessibilité et HTML5

621 vues

Publié le

Accessibilité et HTML5

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

Aucun téléchargement
Vues
Nombre de vues
621
Sur SlideShare
0
Issues des intégrations
0
Intégrations
145
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Accessibilité et HTML5

  1. 1. ACCESSIBILITÉ WEBNormes et bonnes pratiquesPour des sites plus accessibles
  2. 2. QU’EST-CE QUEL’ACCESSIBILITÉ DUWEB ?
  3. 3. DÉFINITION OFFICIELLE DEL’ACCESSIBILITÉ Mettre le web est ses services à la disposition detous les individus, quels que soient leur matériel oulogiciel, leur infrastructure réseau, leur languelogiciel réseaumaternelle, leur culture, leur localisationgéographique, ou leurs aptitudes physiques oumentales.
  4. 4. AccéderL’ACCESSIBILITÉ, POUR QUI ? Percevoir Handicaps Visuels : Image, vidéo, signalétique Handicaps Auditifs : son( paroles, Utiliser musique ) Handicaps Moteurs : difficultés d’utilisation des souris et clavier traditionnels. Comprendre Handicaps Cognitifs : sens et compréhension La Barrière de la langue Autres Facteurs Handicapants Accessibilité
  5. 5. COMMENT SURFE LES HANDICAPÉS Mes logiciels et les outils Sont prêts Tablette Braille Les sites et les Lecteur d’écran application Non Clavier adapté Logiciels
  6. 6. WEB CONTENT ACCESSIBILITYGUIDELINES ( WCAG) 2.0
  7. 7. WEB CONTENT ACCESSIBILITY WCAG GUIDELINES (WCAG) 2.0 L’Objectif Personne Navigateur principal est essentiellement de s’assurer que + + lorsque l’on met à disposition des Système Technologie contenus dans cet d’exploitation d’assistance exemple complexe + « tout marche » API(s) d’Accessibilité
  8. 8. WEB CONTENT ACCESSIBILITY Les techniques sont GUIDELINES (WCAG) 2.0 généralement liées à des technologiesEnsemble de recommandations Généraldestinées à rendre les contenus Web HTML Cssaccessibles aux personnes en situation Serveurde handicap, notamment. Text4 principes PDF Flash12 règles Silverligth61 critères de succès Javascripte570 techniques …
  9. 9. MICROFORMATS 
  10. 10. QUE SONT LES MICROFORMATS ?Les microformats sont un moyen dajouter unesyntaxe simple à des items de données lisibles pardes humains, comme des événements, des détailssur un contact ou des endroits, sur des pages web,de manière à ce que linformation puisse êtreextraite par le logiciel et indexée, cherchée,sauvegardée, cross-référencée ou combinée.
  11. 11. LES PLUSCONNUS Hcard Hcalendar XFN RelNoFollow RelLicence RelTag
  12. 12. COMMENT ÇAMARCHE ?Principalement avec deux attributs : Class : utilisé principalement à des fins didentification délément pour la modification du style de la page via les CSS, mais permettant également dancrer des microformats.   Lattribut Rel : il permet de préciser le type de relation entre la page source (celle dans laquelle on trouve le lien) et la page cible (celle vers laquelle pointe le lien). 
  13. 13. ESSAYONS HCARD
  14. 14. BONNES PRATIQUES POURSITE ACCESSIBLE
  15. 15. LES RÔLES ETPROPRIÉTÉS DE WAI- ARIA
  16. 16. HTML5 COMPATIBLE AVEC ARIA ?ARIA : Accessible Rich Internet Application rôle, état, propriété pour les aides techniques :<ul role="tablist"> <li role="presentation"> <a id="tab1" href="#demo" aria-controls="demo" role="tab" aria-selected="true"tabindex="0">Dogs</a> </li> … <div id="demo" role="tabpanel" aria-hidden="false" aria-expanded="true" aria-labelledby="tab1"> <h2>Dogs</h2>…
  17. 17. POINTS DE REPÈRE (LANDMARKROLES) Les « points de repère » (ou landmark Roles) délimitent les grands zones du documents ou de l’application web
  18. 18. IDENTIFIER LES PRINCIPALESZONES DE LA PAGE AVECLATTRIBUT ROLELes principales zones de la page doivent être identifiées à l’aide de l’attribut ARIA role.
  19. 19.  role="banner" pour délimiter une zone de contenu qui identifie le site, comme une bannière avec un logo, un slogan et/ou un champ de recherche. • role="search" pour délimiter une zone destinée à la recherche, comme un formulaire de recherche. • role="navigation" pour délimiter les menus ou les éléments de navigation principaux. • role="main" pour délimiter la zone de contenu principal de la page.
  20. 20. ATTENTION Une page ne doit contenir qu’un seul role="main". Il est tout à fait possible d’imbriquer plusieurs rôles ARIA : role="search" dans role="banner", par exemple. Il est recommandé de ne pas charger la page en attributs role="navigation" : inutile d’identifier chaque système de pagination ou chaque lien, seuls les menus principaux doivent être identifiés.
  21. 21. PERSONNALISATION DES FONCTIONSNATIVES
  22. 22. METTRE EN PLACE UNE HIÉRARCHIEDE TITRES LOGIQUE ET EXHAUSTIVEAVEC LES BALISES <H1> À <H6> Pour mettre en place une hiérarchie de titres logique et exhaustive, il faut imaginer que les titres forment la « Table des matières » de la page. Est-elle logique ? Exhaustive ?
  23. 23.  Il n’est jamais gênant d’utiliser plusieurs <h1> dans une page si plusieurs titres de premier niveau sont présents.
  24. 24.  Une bonne pratique d’accessibilité consiste à ne pas ajouter de titres cachés.
  25. 25.  L’attribut role peut être ajouté sur n’importe quelle balise HTML comme <div>, <form>, <nav>, etc.
  26. 26. ORDRE DU FLUX HTML Écrire le code HTML en suivant la logique de lordre de lecture
  27. 27. ENCODAGE Veiller au bon codage de tous les caractères Penser également à vérifier le bon codage des caractères qui ne sont pas spontanément affichés à l’écran
  28. 28. LANGUE DE LA PAGE Renseigner la langue principale de la page avec lattribut lang sur la balise <html> Utiliser l’attribut lang pour signaler les changements de langue
  29. 29.  Ne pas utiliser dattributs ou de balises HTML destinés exclusivement à la mise en forme.  des attributs : align, alink, background, basefont, bgcolor, border, color, link, text, vlink, height et width.  les balises : <basefont>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> et <u>.
  30. 30. IMAGES DÉCORATIVES ETILLUSTRATIVES Utiliser une alternative vide (alt="") sur les images décoratives et illustratives
  31. 31. IMAGES INFORMATIVES Ne pas utiliser CSS pour afficher les images informatives. Renseigner un court texte de remplacement dans l’attribut alt qui décrit globalement la fonction de l’image.
  32. 32. INTITULÉS DES LIENS ET DESBOUTONS Les liens et les boutons ne doivent jamais être vides et doivent donc toujours posséder un intitulé.
  33. 33. NOUVELLES FENÊTRES Signaler louverture des nouvelles fenêtres
  34. 34. FORMULAIRES Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés Parfois, certains champs n’ont pas d’intitulé visible. Dans cette situation, utiliser l’attribut title pour associer tout de même un intitulé au champ.
  35. 35.  Les balises <fieldset> et <legend> ne sont à utiliser que lorsque plusieurs groupes de champs disposent d’intitulés identiques. Par exemple :  Une série de questions sur une même page avec comme réponses possibles “oui” ou “non”.  Une liste de participants à un évènement avec, à chaque fois, “nom” et “prénom”.
  36. 36.  Une bonne pratique d’accessibilité consiste à utiliser également les balises <fieldset> et <legend> lors de l’intégration de listes de boutons radio ou de cases à cocher dans la page.
  37. 37. TITRE DE LA PAGE Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation
  38. 38. CAPTCHA (SYSTÈMES ANTI-SPAM) Indiquer dans lalternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA
  39. 39. TABLEAUX DE MISE EN FORMENe pas utiliser de balises ou dattributs propres aux tableaux de données dans les tableaux de mise en forme  Que les balises <caption>, <th>, <thead> et <tfoot> ne doivent pas être utilisées dans les tableaux de mise en forme.  Que les attributs scope, headers, axis, colgroup et summary ne doivent pas être utilisés dans les tableaux de mise en forme.
  40. 40. TABLEAUX DE DONNÉES Donner un titre à chaque tableau de données avec la balise <caption> Utiliser lattribut scope pour associer les cellules aux entêtes des tableaux de données simples Utiliser lattribut headers et id pour associer les cellules aux entêtes des tableaux de données complexes
  41. 41. CONTENUS MASQUÉS Cas 1 : ces éléments sont masqués mais peuvent être affichés sur action de lutilisateur Cas 2 : ces éléments sont masqués mais ne seront jamais affichés  Cas 2.1 : les éléments inutiles pour tous les utilisateurs  Cas 2.2 : les éléments qui sont utiles pour les utilisateurs de lecteurs décran, mais inutiles pour les autres utilisateurs
  42. 42. L’ACCESSIBILITÉ, ÇADEMANDE DE L’HABITUDE !

×