Les sites Web doivent être accessibles à tous. Voici ce que vous devez savoir.

Créer une page Web n'est pas seulement créer une page Web. Un aspect important du développement frontal est de s'assurer que les interfaces utilisateur sont accessibles à tous sur Internet, y compris les personnes ayant des handicaps visuels et auditifs. Vous devez écrire votre code en pensant à ces personnes. Comment accordez-vous aux personnes malvoyantes un accès à votre site Web égal à celui des personnes non malvoyantes? Lisez cet article pour savoir.

Pourquoi les développeurs devraient-ils se préoccuper de l'accessibilité Web?

L'accessibilité du Web s'articule autour de l'idée que tout le monde devrait avoir un accès égal au Web, quel que soit le handicap ou les handicaps. Avoir un site Web accessible permet d'atteindre plus facilement un public plus large (environ 16 % de la population mondiale souffre d'un handicap ou d'un autre).

L'accessibilité numérique ne devrait pas être une option pour les développeurs. C'est une nécessité pour toute marque professionnelle. Ceci est pris au sérieux: comme le rapporte

instagram viewer
Variété, quelqu'un a poursuivi The Pokémon Company en 2019 en raison d'un site Web non accessible.

Accessibilité Web avec HTML

En HTML, il existe des règles pour assurer le développement de sites Web accessibles. Cette section explique certaines de ces règles.

Utiliser des éléments sémantiques

Les éléments sémantiques en HTML sont des éléments qui ont des significations. En HTML5, il y a environ 100 éléments. Certains éléments, comme et, sont non sémantiques, tandis que les autres balises HTML sont sémantiques. Bien qu'il soit impossible d'arrêter d'utiliser ces éléments non sémantiques, il est important d'incorporer autant d'éléments sémantiques que possible dans votre travail. Voici une liste d'éléments sémantiques populaires :

Considérez cet exemple de Taaskly:

Un coup d'œil à l'image ci-dessus révélera les éléments suivants :

  • Un en-tête
  • Une image
  • Un paragraphe
  • Trois boutons

Il est facile de supposer que les développeurs ont utilisé balises pour organiser les éléments à l'écran. En regardant de plus près les codes, vous remarquerez qu'ils ont plutôt utilisé six balises sémantiques. Le code simplifié ressemble à ceci :

<section>
<imagesrc="/hero.png"autre="héros">
<article>
<h1>Trouvez les bons produits et services au bon moment.h1>
<p>
 Chaussures faites à la main, coiffure, gestionnaire de médias sociaux, envoi de courses, source de revenusb>— vous l'appelez, Taaskly l'a compris. Trouvez tous les produits ou services dont vous avez besoin aujourd'hui lorsque vous vous inscrivez et utilisez Taaskly. 
p>
<unhref="/principal/domicile">Externaliser une tâcheun>
<unhref="/principal/services"> Trouver un serviceun>
<unhref="/principal/place de marché" >Trouver une boutiqueun>
article>
section>

À partir de l'extrait de code HTML, vous pouvez observer ce qui suit :

  1. Les images, le texte et les boutons se trouvent à l'intérieur d'un élément.
  2. Le l'élément divise également le et éléments.
  3. Le élément détient le, , et éléments.
  4. Les boutons sont codés comme éléments; par conséquent, ce sont des liens, pas des boutons. En règle générale, utilisez toujours des liens pour diriger l'utilisateur vers une autre page ou vue, et utilisez des boutons lorsque vous souhaitez que l'utilisateur effectue une action uniquement dans la même vue. Voir Page du bouton d'Angular pour plus d'informations à ce sujet.

Utilisez des points de repère pour fournir une structure de page claire

Les points de repère sont des balises sémantiques qui aident les utilisateurs aveugles à naviguer sur une page Web avec des lecteurs d'écran. Avec les points de repère, il est facile de définir différentes parties d'une page Web. Site Web d'Apple utilise des repères.

L'image ci-dessus montre quatre points de repère différents. Vous pouvez utiliser le Informations sur l'accessibilité extension pour visualiser ces repères.

Sur l'image, on peut déduire une au sommet, un contenant un, et un élément. Visiblement, l'image montre "la navigation", "région", et "infos sur le contenu". Ceux-ci sont connus comme les rôles, que nous verrons plus tard.

Chaque fois que vous devez utiliser plusieurs points de repère pour une page, différenciez-les toujours par une étiquette. Par exemple, si vous utilisez plusieurs éléments comme Apple a, vous devez les étiqueter. Vous devriez les étiqueter avec le label-aria attribut. Vous pouvez donc écrire quelque chose comme l'un de ceux-ci :

<navigationlabel-aria = "mondial">
<navigationlabel-aria = "navigation locale">
<navigationlabel-aria = "répertoire apple">

L'utilisation de libellés peut aider les lecteurs d'écran à passer à n'importe quelle navigation.

Utiliser les attributs de rôle, de nom et de valeur

Parfois, il peut être impossible d'utiliser des éléments HTML avec des fonctionnalités d'accessibilité intégrées. De tels cas peuvent être l'un ou l'autre de ces deux :

  1. Il n'y a pas d'élément HTML natif pour ce que vous voulez réaliser. Par exemple, si vous devez utiliser un car aucun autre élément ne semble correspondre au rôle.
  2. Vous ne pouvez pas utiliser les éléments sémantiques en raison de problèmes techniques. Si vous utilisez un framework qui utilise quand il aurait été préférable d'utiliser, il vous appartiendra de définir un champ personnalisé.

Pour définir un contrôle personnalisé, vous avez besoin d'un rôle, d'un nom et d'une valeur (parfois) pour votre élément.

Rôle

Par défaut, un l'élément a le rôle de navigation, tandis qu'un L'élément a le rôle de bannière. Vous ne devez utiliser ces éléments qu'aux fins prévues pour aider les technologies d'assistance à comprendre la structure d'une page Web. Si vous devez utiliser l'un à la place de l'autre, vous devez spécifier le rôle comme ceci :

<entêterôle = "la navigation">
<navigationrôle = "bannière">
<divrôle = "la navigation">

Nom

Un nom est un texte descriptif ou une étiquette associée à un élément HTML. La forme la plus simple d'un nom est le texte d'un élément. Voici un exemple:

<divrôle = "bouton">Cliquez-moi !div>

Dans l'extrait ci-dessus, "Cliquez-moi !" est le nom du élément. Il est également connu sous le nom de nom accessible.

Pour des éléments tels que la navigation, les listes déroulantes, etc., l'attribution d'un nom est plus complexe que dans l'exemple précédent. C'est différent parce que ces éléments contiennent des éléments enfants. Pour attribuer un nom à la navigation ci-dessus, utilisez les label-aria attribut. Regardez cet exemple :

<navigationrôle = "la navigation"label-aria = "navigation globale">...navigation>

Vous devez noter qu'un nom L'attribut est différent d'un nom accessible. Cet extrait de code permet de mieux comprendre :

 attribut de nom 
<navigationrôle = "la navigation"nom = "navigation globale">...navigation>
 nom accessible 
<navigationrôle = "la navigation"label-aria = "navigation globale">...navigation>

Voir Article de TGPi sur les noms accessibles pour mieux comprendre cela.

Valeur

En HTML, l'attribut value peut fournir des informations supplémentaires sur un élément. Les valeurs fournissent des informations sur l'état du composant pour les composants personnalisés tels que les accordéons. Par exemple, un accordéon peut être ouvert ou fermé.

Vous pouvez ajouter de la valeur à vos éléments de plusieurs manières. Cet extrait montre quelques-unes des façons dont vous pouvez le faire :

 aria-valuenow 
valeur
<saisirtaper="case à cocher"nom="produit[]"valeur="1">

Donner la priorité à l'accessibilité Web pour une expérience en ligne inclusive

L'accessibilité du Web va au-delà des règles suivantes; il s'agit également de s'assurer que tout le monde a un accès égal à votre site Web. L'intégration d'éléments sémantiques, de points de repère et d'attributs tels que le rôle, le nom et la valeur dans votre code HTML peut rendre votre site Web plus accessible aux personnes handicapées. Ne considérez pas l'accessibilité Web comme une option; considérez cela comme une nécessité.