Ressources sur la création de sites web accessibles

Le web est rempli de sites web, d’applications et d’interfaces utilisateur dynamiques et complexes créés à l’aide d’une combinaison de HTML, CSS et JavaScript. Toutefois, lorsqu’ils sont conçus et conçus sans tenir compte de l’accessibilité, ces sites web complexes sont difficiles à utiliser par les personnes qui s’appuient sur les technologies d’assistance pour naviguer sur le web.

La création de sites web accessibles aux personnes handicapées nécessite des informations sémantiques sur l’interface utilisateur. Les sites Web accessibles permettent aux technologies d’assistance, comme les lecteurs d’écran, de transmettre l’information nécessaire pour aider les personnes ayant un large éventail de capacités à utiliser le site web.

Consultez HTML5Accessibilité pour plus d’informations sur les nouvelles fonctionnalités HTML5 prises en charge de manière accessible par Microsoft Edge.

Fonctionnement de l’accessibilité

Les technologies d’assistance ajoutent des fonctionnalités que les ordinateurs n’ont généralement pas. Par exemple, un utilisateur malvoyant peut utiliser son clavier en combinaison avec une technologie d’assistance telle qu’un lecteur d’écran, plutôt que d’utiliser directement le navigateur avec la souris et l’écran.

Pour les applications sur les plateformes Microsoft et sur le web, la technologie d’assistance interagit avec n’importe quelle combinaison de :

• Microsoft UI Automation.
• Modèle objet spécifique à l’application, tel que le modèle DOM (Document Object Model) dans Microsoft Edge.

Pour les développeurs web, certains éléments HTML sont mappés à des objets UI Automation. Par conséquent, en sélectionnant ces éléments HTML, le développeur peut utiliser les propriétés d’accessibilité et les événements intégrés à ces éléments. Lors du développement de votre site web, vous devez généralement vous assurer que l’API est correctement écrite dans ou que l’élément approprié est spécifié pour que l’application soit accessible.

Pour plus d’informations, consultez ARIA et automatisation de l’interface utilisateur dans Microsoft Edge . Les applications plateforme Windows universelle accessibles (UWP) sont expliquées dans Accessibilité dans le Centre de développement Windows.

De nombreux problèmes d’accessibilité courants liés au contenu dynamique peuvent être résolus par de bonnes pratiques de codage. La documentation WCAG 2.0 inclut de nombreuses techniques et meilleures pratiques pour vous aider à créer des applications web dynamiques plus accessibles. Toutefois, même s’il est correctement codé, le contenu dynamique n’est pas nécessairement accessible. Les applications Internet enrichies accessibles (ARIA) permettent de résoudre ce problème.

Pour plus d’informations sur l’accessibilité du web, case activée l’Introduction à l’accessibilité web par l’Initiative sur l’accessibilité du web (WAI).

ARIA

La spécification ARIA (Accessible Rich Internet Applications) de l’Initiative d’accessibilité web du W3C définit comme une syntaxe pour rendre le contenu web dynamique et les interfaces utilisateur personnalisées accessibles à tous. ARIA étend le code HTML à l’aide d’attributs supplémentaires (rôles, propriétés et états) conçus pour transmettre une sémantique personnalisée. Ces attributs sont utilisés par les navigateurs pour transmettre l’état et le rôle des contrôles à l’API d’accessibilité.

Rôles, propriétés et états

Les rôles ARIA sont définis sur les éléments à l’aide de l’attribut de rôle pour fournir des informations sur les technologies d’assistance et les API d’accessibilité sur l’élément. Par exemple, l’élément ci-dessous <li> est affecté role="menuitem" pour indiquer qu’il s’agit d’un élément dans un menu.

<li role="menuitem">Home</li>

Les états et propriétés ARIA sont des attributs avec préfixe aria qui fournissent des informations spécifiques sur un objet pour aider à définir la nature des rôles. Les propriétés sont des attributs essentiels à la nature d’un objet, comme aria-readonly et aria-haspopup. La modification d’une propriété affecte la signification de l’objet.

Dans l’exemple ci-dessous, la propriété aria-haspopup="true" est définie sur un <li> élément de menu pour indiquer qu’elle a une fenêtre contextuelle :

<li role="menuitem" aria-haspopup="true">Open</li>

Les états ne modifient pas la nature de l’objet, mais représentent les informations associées à l’objet ou l’interaction de l’utilisateur avec l’objet, comme aria-hidden ou aria-checked. Par exemple, l’état aria-checked="false" dans l’exemple ci-dessous indique que la case à cocher est décochée, plutôt que sélectionnée :

<div role="checkbox" aria-checked="false">Accept</div>

Pour afficher la liste complète des rôles, des propriétés et des états, accédez à Modèle des rôles dans W3C.

Test de compatibilité des technologies d’assistance

Vérifier que le site web que vous créez fonctionne avec des technologies d’assistance réelles est la meilleure façon de vous assurer que vous fournissez une bonne expérience aux utilisateurs présentant un handicap. Étant donné que de nombreuses technologies d’assistance utilisent le clavier, le test de l’accessibilité du clavier de votre site web est un bon point de départ.

Les tests de compatibilité du clavier vérifient que les utilisateurs ont accès à tous les contrôles interactifs sans nécessiter de souris. Microsoft Accessibility Insights pour le web est une extension de navigateur pour Microsoft Edge et Chrome qui vous guide et révèle plusieurs problèmes courants.

Une fois que vous êtes certain que votre site web fonctionne bien avec un clavier, essayez-le avec d’autres technologies d’assistance, telles que les lecteurs d’écran. Ce test peut révéler des problèmes dans les éléments suivants :

• Votre CODE HTML, ARIA et CSS.
• Niveau de prise en charge d’une technologie d’assistance pour une fonctionnalité ou une technique.

Différents navigateurs peuvent mapper des éléments aux API d’accessibilité de la plateforme différemment que Microsoft Edge les mappe. Lors de la création de votre interface, il est important de prendre en compte chaque différence.

WebAIM effectue des enquêtes auprès des lecteurs d’écran et des utilisateurs malvoyants qui vous aident à déterminer les technologies d’assistance et les navigateurs à tester.

Apprendre à tester

Les technologies d’assistance sont des outils sophistiqués. Ne supposez pas que vous êtes en mesure de commencer immédiatement à tester avec une technologie d’assistance sans d’abord en savoir plus sur son fonctionnement. Apprendre à tester avec un lecteur d’écran a une courbe d’apprentissage particulièrement raide. Un utilisateur débutant de lecteurs d’écran peut penser qu’un lecteur d’écran présente un bogue, alors que le problème peut en fait être une erreur lors de l’utilisation du lecteur d’écran.

Les tests avec des lecteurs d’écran sur WebAIM fournissent plus d’informations sur l’apprentissage du test avec les technologies d’assistance.

Test local

La plupart des appareils incluent une technologie d’assistance intégrée au système d’exploitation. Microsoft Windows inclut le lecteur d’écran du Narrateur Windows et la Loupe Windows. Les technologies d’assistance tierces telles que NVDA, FreedomscientificSoftwareJaws et ZoomText sont disponibles en téléchargement. Apple macOS inclut le lecteur d’écran VoiceOver . IOS, Android et Linux prennent en charge une variété de technologies d’assistance.

Test dans les machines virtuelles et les émulateurs

Sous macOS, si vous souhaitez effectuer des tests avec une technologie d’assistance disponible uniquement pour Windows, comme le Narrateur Windows ou NVDA, créez une machine virtuelle Windows.

Android Studio inclut un émulateur qui vous permet de tester les technologies d’assistance dans La suite d’accessibilité Android. Suivez les instructions pour configurer un appareil virtuel et démarrer l’émulateur, puis installez Android Accessibility Suite à partir du GooglePlay Store.

Remarque

Le simulateur iOS n’inclut actuellement pas VoiceOver.

Outils de test basés sur le cloud

Si une technologie d’assistance n’est pas disponible sur votre système d’exploitation ou si vous ne pouvez pas en installer une sur une machine virtuelle ou un émulateur, les outils de test de technologie d’assistance basés sur le cloud sont la meilleure chose à faire.

• Assistiv Labs (un produit commercial) vous permet de tester manuellement des technologies d’assistance via n’importe quel navigateur web moderne. Sélectionnez une technologie d’assistance et un navigateur pour vous connecter à une machine virtuelle, un émulateur ou un appareil réel avec lequel vous pouvez interagir.

Voir aussi Émulateurs et simulateurs basés sur le cloud.

Ressources pour les principes de base de l’accessibilité

Il s’agit de projets et d’initiatives en matière d’accessibilité.

Le projet A11Y

Le projet A11Y est un effort communautaire visant à faciliter l’accessibilité web. Consultez le site Du projet A11Y pour en savoir plus sur les principes d’accessibilité de base, leur modèle accessible et leur bibliothèque de widgets, ainsi que leurs ressources sur les logiciels, blogs, livres et outils d’accessibilité.

Web Accessibility Initiative (WAI)

La W3C Web Accessibility Initiative (WAI) est un effort pour aider à améliorer l’accessibilité du web. Leur site fournit une variété de ressources pour Prise en main avec l’accessibilité web, la conception pour l’inclusion, des tutoriels et des présentations, et bien plus encore.

Blogs sur l’accessibilité

Il s’agit de blogs sur l’accessibilité.

TPGi, LLC

TPGi, LLC fournit des solutions de conseil et de technologie aux organisations du monde entier pour s’assurer que leurs clients atteignent efficacement et efficacement tous les publics, tout en respectant les normes gouvernementales et internationales. Leur blog couvre des sujets tels que les meilleures pratiques en matière d’accessibilité web, les outils d’accessibilité et les tendances en matière d’accessibilité.

Accès au niveau

Level Access est une entreprise d’accessibilité numérique qui aide ses clients à développer et déployer des produits et services accessibles. Leur blog aborde des sujets tels que les meilleures pratiques DRIA, les tendances en matière d’accessibilité, les webinaires et bien plus encore.

Exemples accessibles

Il s’agit de bibliothèques et d’exemples d’accessibilité.

ally.js - Tutoriels

Bibliothèque JavaScript pour aider les applications web modernes avec des problèmes d’accessibilité en facilitant l’accessibilité. Pour plus d’informations, consultez ally.js - Tutoriels.

Exemples OpenAjax

Le site web d’OpenAjax Alliance est une excellente ressource pour vérifier les règles relatives à WAI-ARIA et fournit un certain nombre d’exemples d’implémentations WAI-ARIA.

Modèles

Le projet A11Y offre une bibliothèque de widgets et de modèles accessibles tels que des menus, des boutons, des info-bulles et bien plus encore. Pour plus d’informations, consultez Modèles.

Techniques et outils d’accessibilité

Il s’agit de techniques et d’outils pour améliorer l’accessibilité.

Accessibilité : création d’icônes d’extension accessibles pour Microsoft Edge

Obtenez des conseils sur la création d’icônes d’extensions accessibles pour Microsoft Edge. Pour plus d’informations, consultez Accessibilité : création d’icônes d’extension accessibles pour Microsoft Edge.

Nom et description accessibles : Calcul et mappages 1.1

Ce document de mappage W3C explique comment les navigateurs déterminent le nom et les descriptions des objets accessibles à partir de langages de contenu web et les exposent dans les API d’accessibilité. Pour plus d’informations, consultez Nom accessible et description : Calcul et mappages 1.1.

Ressources d’évaluation de l’accessibilité

Les ressources d’évaluation de l’accessibilité sont une ressource multipage du W3C qui décrit différentes approches pour évaluer les sites web pour l’accessibilité. Pour plus d’informations, consultez Ressources d’évaluation de l’accessibilité.

Tests de compatibilité des technologies d’assistance

Résultats des tests montrant comment les différents types de contenu et normes se comportent dans les technologies d’assistance (AT) comme les lecteurs d’écran. Pour plus d’informations, consultez Tests de compatibilité des technologies d’assistance.

La création de sites web accessibles a été beaucoup plus facile

Ce billet de blog Développement et outils web .NET décrit le vérificateur d’accessibilité web de l’extension Visual Studio. Pour plus d’informations, accédez à Créer des sites web accessibles tout simplement beaucoup plus facilement.

Principaux mappages d’API d’accessibilité 1.1

Ce document de mappage W3C explique comment la sémantique des langages de contenu web est exposée aux API d’accessibilité. Pour plus d’informations, consultez Core Accessibility API Mappings 1.1.

Vérifications faciles : premier examen de l’accessibilité web

Série de vérifications rapides effectuées par l’WAI pour vous aider à évaluer l’accessibilité d’une page web. Pour plus d’informations, accédez à Vérifications simples – Première révision de l’accessibilité web.

Comment rencontrer WCAG 2.0

Une référence rapide aux exigences et techniques WCAG (Web Content Accessibility Guidelines) 2.0 (critères de réussite). Pour plus d’informations, consultez How to Meet WCAG 2.0.

Mappages d’API d’accessibilité HTML 1.0

Ce document sur les mappages W3C explique comment les attributs et les éléments HTML5.1 sont mappés aux API d’accessibilité de plateforme. Pour plus d’informations, consultez Mappages d’API d’accessibilité HTML 1.0.

Conseils rapides

Liste de conseils de développement web rapides pour l’accessibilité par The A11Y Project. Pour plus d’informations, consultez Conseils rapides.

Analyse du site

L’outil Analyse de site sur Microsoft Edge Dev Center recherche les bibliothèques obsolètes, les problèmes de disposition et d’accessibilité. Pour plus d’informations, accédez à Analyse de site.

Techniques pour WCAG 2.0

Techniques du W3C qui fournissent des conseils aux développeurs web pour répondre aux critères de réussite wcAG (Web Content Accessibility Guidelines) 2.0 . Pour plus d’informations, consultez Techniques pour WCAG 2.0.

Conseils sur le développement pour l’accessibilité web

Conseils du W3C sur le développement de contenu web plus accessible aux personnes handicapées. Pour plus d’informations, consultez Conseils sur le développement pour l’accessibilité web.

Pratiques de création WAI-ARIA 1.1

Document du W3C qui fournit aux lecteurs une compréhension de l’utilisation de WAI-ARIA 1.1 et recommande des approches pour rendre les widgets, la navigation et les comportements accessibles à l’aide de rôles, d’états et de propriétés WAI-ARIA. Pour plus d’informations, consultez WAI-ARIA Authoring Practices 1.1.

Directives et techniques de l’WAI

Une série de directives et de normes d’accessibilité web développées par l’WAI. Pour plus d’informations, consultez Directives et techniques WAI.

Liste des outils d’évaluation de l’accessibilité web

Liste des outils d’évaluation de l’accessibilité web permettant de déterminer si les sites web respectent les directives d’accessibilité. Pour plus d’informations, consultez La liste des outils d’évaluation de l’accessibilité web.

Perspectives d’accessibilité web : Explorer l’impact et les avantages pour tout le monde

Une série de courtes vidéos situationnelles du W3C sur l’impact de l’accessibilité et les avantages pour tous. Pour plus d’informations, consultez Perspectives d’accessibilité web : Explorer l’impact et les avantages pour tout le monde.