Que se passe-t-il si je vous dis à des concepteurs Web que certaines personnes peuvent visiter votre site Web sans se soucier de son apparence?
Les personnes malvoyantes naviguent sur le Web pour les mêmes raisons que nous, pour trouver des informations, faire des achats et effectuer une multitude de tâches importantes en utilisant des applications Web. Mais les personnes malvoyantes font l'expérience du Web différemment et nous devons être sensibles à leurs besoins lorsque nous concevons et construisons des sites Web.
Selon le US Census Bureau et l'ONU et la Banque mondiale, plus de 47 millions d'Américains et jusqu'à 650 millions de personnes dans le monde souffrent d'une forme de handicap. Tous les visiteurs des sites que vous concevez doivent pouvoir trouver les informations qu'ils recherchent et exécuter les tâches qu'ils ont l'intention d'effectuer, quelle que soit l'apparence de la page Web ou de l'application. Un grand nombre de facteurs différents qui entrent dans la création de la page Web ou de l'application peuvent avoir un impact sur l'accessibilité.
Vous prenez la pilule bleue - l'histoire se termine, vous vous réveillez dans votre lit et croyez ce que vous voulez croire. Vous prenez la pilule rouge - vous restez au pays des merveilles, et je vous montre à quel point le terrier de lapin est profond. - La matrice
Êtes-vous prêt à descendre l'accessibilité du lapin avec moi? Nous devrons nous pencher sur les aspects techniques des pages Web. HTML est le squelette d'une page Web, tandis que CSS, JavaScript et les images améliorent le HTML. Souvent, les personnes malvoyantes manquent toutes ces améliorations. Bien que l'accessibilité soit principalement une tâche de développeur, les exigences techniques requises pour préserver ou améliorer l'accessibilité affecteront parfois l'apparence du site Web. Cela signifie que la conception, la copie, l'expérience utilisateur et le développement doivent tous collaborer pour garantir que les contrôles de navigation, les formulaires, les boutons, les en-têtes, les boutons, les liens, etc. sont accessibles.
la conception, la copie, l'expérience utilisateur et le développement doivent tous collaborer pour s'assurer que les contrôles de navigation, formulaires, boutons, en-têtes, boutons, liens et autres sont accessibles
Les personnes aveugles, malvoyantes, analphabètes ou handicapées, utilisent des technologies d'assistance pour naviguer sur Internet. Les lecteurs d'écran sont la technologie d'assistance la plus courante sur le Web. Ces logiciels tentent d'interpréter ce qui est affiché sur la page Web et de le transmettre à l'utilisateur, généralement en convertissant le texte en paroles, mais parfois via un périphérique de sortie braille. Les loupes d'écran sont souvent utilisées conjointement avec un lecteur d'écran. En règle générale, un lecteur d'écran tente d'analyser le code HTML du haut du fichier HTML vers le bas et de communiquer des éléments pertinents à l'utilisateur. Idéalement, le lecteur d'écran permettra à l'utilisateur de déplacer un curseur virtuel vers le bas de la page afin de remplir les champs de formulaire, de cliquer sur les boutons et d'effectuer des sélections dans les menus déroulants et autres contrôles.
Pour tester pleinement votre accessibilité, vous devez vous assurer que le site Web ou l'application fonctionne correctement sur chacun des nombreux lecteurs d'écran disponibles. Il existe plusieurs lecteurs d'écran gratuits et / ou open source populaires sur chaque plate-forme, y compris MÂCHOIRES , et NVDA . Les utilisateurs de Microsoft peuvent utiliser NVDA, tandis que les ordinateurs Apple et les appareils iOS sont livrés avec Voix off qui peut agrandir les contrôles du clavier et lire le contenu de l'écran, et pour les périphériques Unix Orca . Le navigateur Chrome dispose de deux plugins de technologie d'assistance, ChromeVox pour la lecture de l'écran et ChromeVis pour le grossissement.
La plupart des problèmes d'accessibilité du Web surviennent lorsque le curseur virtuel du lecteur d'écran est piégé dans une forme mal conçue ou ignore un contrôle important ou une information textuelle importante. Vérifier que les sites Web sont effectivement utilisables est similaire aux tests du navigateur car chaque lecteur d'écran a des exigences et des limites différentes. C'est pourquoi il est important de comprendre le comportement de chaque lecteur d'écran. Les besoins de divers lecteurs d'écran peuvent être satisfaits en ajoutant diverses balises HTML spéciales aux éléments importants de la page.
Une interface utilisateur Web dynamique moderne peut être particulièrement problématique pour l'accessibilité, car des éléments importants sont ajoutés dynamiquement à la page à l'aide de JavaScript. Les menus déroulants personnalisés, les modaux, les infobulles, le contenu d'accordéon et les erreurs dynamiques et les notifications peuvent être difficiles à comprendre pour les utilisateurs de lecteurs d'écran en raison d'une répartition des communications entre HTML, JavaScript et le lecteur d'écran. HTML et JavaScript natifs n'ont aucun moyen de communiquer les mises à jour de page (modèle d'objet de document) aux lecteurs d'écran. Les développeurs doivent déplacer "focus" (le curseur virtuel du lecteur d'écran) sur la partie de l'interface utilisateur qui a changé. Lorsqu'un modal ouvre les développeurs, les développeurs doivent mettre l'accent sur ce modal afin que le lecteur d'écran puisse lire ce contenu et que l'utilisateur puisse comprendre et interagir avec ce contenu.
WAI-ARIA peut combler les lacunes entre ce que le HTML brut de la page indique et ce que les utilisateurs voyants voient
Cela se fait par l'utilisation de balises HTML spéciales appelées WAI-ARIA Mots clés. WAI-ARIA (Applications Internet Riches Accessibles) peut combler le fossé entre ce que le HTML brut de la page indique et ce que les utilisateurs voyants voient en fournissant aux développeurs un moyen standard d'ajouter une signification aux états, propriétés, relations, rôles et régions en direct. un lecteur d'écran autrement ne comprendrait pas. Les développeurs peuvent utiliser le niveau aria pour expliquer aux lecteurs les hiérarchies de chaque en-tête de la page. Avec Aria-Label, les développeurs peuvent ajouter un titre pour décrire l’objet d’un élément discret sur la page. Cela aide les développeurs à créer des relations claires entre les différents éléments. Les développeurs peuvent également attirer l'attention sur des contrôles importants en les étiquetant avec des balises aria-role, par exemple un bouton de menu déroulant portant l'étiquette suivante: Aria-has popup: true.
Voir le stylo Onglets accessibles simples par Scott Vinkle ( @svinkle ) sur CodePen .
Dans le HTML dans l'exemple ci-dessus, les onglets sont créés en utilisant une liste non ordonnée avec des classes sur chaque élément de la liste. JQuery capture les événements de clic lorsqu'un onglet est cliqué et ajoute "aria-selected": "true" et "tab-widget__tab-content-active" à l'onglet sélectionné et masque les autres onglets en ajoutant "aria-selected": ' false 'aux onglets restants. Sur la ligne 127, les attributs initiaux des onglets sont définis. Ensemble, ces extraits aident les lecteurs d'écran à reconnaître quel onglet est visible. Le JavaScript sur la ligne 35 ajoute également le support du clavier aux onglets. Le reste du fichier gère les événements de clic et de clavier afin que jQuery puisse ajouter les attributs "role" et "presentation" à l'onglet actuellement sélectionné.
Les balises Aria peuvent aider les lecteurs à interpréter les contrôles personnalisés comme des boutons radio lorsque le contrôle personnalisé est étiqueté avec: Aria-role = bouton radio. Lorsqu'une application possède une zone de sandbox qui communique des commentaires ou des mises à jour à l'utilisateur, elle peut être étiquetée avec une balise de région active: Aria-live. Cela garantit que lorsque le texte sur cet élément change, il sera automatiquement parlé à l'utilisateur via le lecteur d'écran.
L'actualisation des pages est un élément clé du Web pour les lecteurs d'écran, car lorsqu'un rafraîchissement de page se produit, il indique au lecteur d'écran qu'il doit annoncer la nouvelle page à l'utilisateur et relire le contenu de la page à l'utilisateur. Cela signifie que les applications Web à page unique posent des problèmes particuliers en matière d'accessibilité. Dans une application à une seule page, aucune page complète n'est actualisée, si bien que le lecteur d'écran et par conséquent l'utilisateur ne seront pas informés du contenu mis à jour. Le résultat sera que l'utilisateur ne recevra aucun retour sur ses actions. La meilleure solution consiste à émuler le comportement d'actualisation des pages natives. Sur vue chargée, mettez à jour le titre de la page et annoncez-le à l'utilisateur.
Les spécifications complètes de WAI-ARIA sont gérées par le W3 comme les spécifications du HTML lui-même dans le cadre de la WAI (Web Accessibility Initiative), mais les directives peuvent parfois être plus utiles que les spécifications.
Vous pouvez prendre plusieurs décisions simples lorsque vous développez un site Web, ce qui rendra le site Web plus accessible sans trop entrer dans le balisage spécial de l’accessibilité ou le test des lecteurs d’écran. En veillant à ce que votre HTML transmette un sens à travers sa structure, vous aiderez les lecteurs d'écran à traiter les informations de la même manière qu'il apparaît sur la page pour les utilisateurs voyants. Ceci est important pour les utilisateurs qui utilisent une loupe avec un lecteur d'écran.
L'utilisation de balises HTML appropriées pour les en-têtes, les listes, les tableaux et d'autres éléments permet au lecteur d'écran de classer la structure de la page pour l'utilisateur de manière familière. Pour des mises en page plus complexes, HTML5 fournit des éléments supplémentaires, tels que
Nous sommes allés très loin dans ce trou de lapin parce que les bénéficiaires potentiels de tout ce travail sont un groupe plus large que vous ne le pensez. Si vous avez déjà essayé d'utiliser une application mobile avec une main parce que votre autre main porte quelque chose, si vous avez déjà essayé d'utiliser une souris avec votre main non dominante à cause d'une blessure, vous avez été désactivé. Et n'est-ce pas merveilleux quand vos doigts sont collants et que vous pouvez toujours naviguer sur un site Web en utilisant un clavier avec vos doigts? Nous sommes malheureusement tous sensibles aux handicaps liés au vieillissement, tels que la perte de mémoire, les malentendants, la détérioration de la vision et les mouvements limités.
Le pouvoir du Web réside dans son universalité. L'accès par tous, indépendamment du handicap, est un aspect essentiel. - Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web
Image vedette, image d'accessibilité via Shutterstock.