Comprendre les techniques HTML pour améliorer l’accessibilité du Web

Créer une page web n’est pas seulement créer une page web. Un aspect important du développement frontal consiste à s’assurer que les interfaces utilisateur sont accessibles à tous les internautes, y compris aux personnes souffrant d’un handicap visuel ou auditif. Vous devez écrire votre code en pensant à ces personnes. Comment donner aux malvoyants le même accès à votre site web qu’aux non-voyants ? Lisez cet article pour le savoir.

Pourquoi les développeurs doivent-ils se préoccuper de l’accessibilité du web ?

L’accessibilité du web s’articule autour de l’idée que tout le monde devrait avoir le même accès au web, quel que soit son ou ses handicaps. 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. Cette question est prise au sérieux : comme le rapporte Variété, quelqu’un a poursuivi The Pokémon Company en 2019 à cause d’un site web non accessible.

Accessibilité du web avec HTML

En HTML, il existe des règles pour garantir 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 une signification. En HTML5, il y a environ 100 éléments. Certains éléments, tels que <div> et <span> sont non sémantiques, alors que d’autres balises HTML sont sémantiques. Bien qu’il soit impossible de cesser 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 des éléments sémantiques les plus courants :

    Prenons l’exemple suivant de Taaskly:

    Un coup d’œil à l’image ci-dessus révèle les éléments suivants :

    • Un titre
    • Une image
    • Un paragraphe
    • Trois boutons

    Il est facile de supposer que les développeurs ont utilisé <div> pour disposer les éléments à l’écran. En regardant de plus près les codes, vous constaterez qu’ils ont plutôt utilisé six balises sémantiques. Le code simplifié se présente comme suit

    Le code simplifié ressemble à ceci :

    Dans l’extrait HTML, vous pouvez observer ce qui suit :

    1. Les images, le texte et les boutons se trouvent à l’intérieur d’une balise <section> de section.
    2. L’élément <section> divise également l’élément <img> et <article> éléments.
    3. Les <article> contient l’élément <h1>, <p> et <a> et un élément> .
    4. Les boutons sont codés comme suit <a> il s’agit donc de liens et non de boutons. En règle générale, utilisez toujours des liens pour diriger l’utilisateur vers une autre page ou une autre vue, et utilisez des boutons lorsque vous souhaitez que l’utilisateur effectue une action dans la même vue. Voir Page des boutons d’Angular pour plus d’informations à ce sujet.
    Voir aussi :  JSON vs. XML. Quelle est la différence ?

    Utiliser 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 dans une page web à l’aide de lecteurs d’écran. Grâce aux points de repère, il est facile de définir les différentes parties d’une page web. Site web d’Apple utilise des points de repère.

    L’image ci-dessus montre quatre points de repère différents. Vous pouvez utiliser le symbole Aperçu de l’accessibilité pour visualiser ces points de repère.

    Dans l’image, nous pouvons déduire un <nav> en haut, un <footer> contenant un <section> et une section <nav> et un élément <nav> . L’image montre notamment « navigation », « région » et « contentinfo ». Il s’agit des rôles, que nous verrons plus tard.

    Lorsque vous devez utiliser plusieurs points de repère pour une page, différenciez-les toujours par une étiquette. Par exemple, si vous utilisez plusieurs <nav> comme le fait Apple, vous devez les étiqueter. Vous devez les étiqueter à l’aide de l’élément aria-label . Vous pouvez donc écrire quelque chose comme ceci :

    L’utilisation d’étiquettes peut aider les lecteurs d’écran à passer à n’importe quelle navigation.

    Utiliser les attributs Role, Name et Value

    Il est parfois impossible d’utiliser des éléments HTML dotés de fonctions d’accessibilité intégrées. Il peut s’agir de l’un ou l’autre de ces deux cas :

    1. Il n’existe pas d’élément HTML natif pour ce que vous souhaitez réaliser. Par exemple, si vous devez utiliser un élément <div> parce qu’aucun autre élément ne semble convenir.
    2. Vous ne pouvez pas utiliser d’éléments sémantiques pour des raisons techniques. Si vous utilisez un cadre qui utilise des éléments <l’en-tête> alors qu’il aurait été préférable d’utiliser <nav> il vous appartiendra de définir un contrôle personnalisé.
    Voir aussi :  Tout ce que vous devez savoir sur le module Python Itertools

    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ément <nav> a le rôle de navigation, tandis qu’un élément <header> joue le rôle de bannière. Vous ne devez utiliser ces éléments qu’aux fins prévues, c’est-à-dire 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 suit :

    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 :

    Dans l’extrait ci-dessus, « Cliquez sur moi !« est le nom de l’élément <div> est le nom de l’élément <div> Il est également appelé nom accessible.

    Pour les éléments tels que la navigation, les menus déroulants, etc., l’attribution d’un nom est plus complexe que dans l’exemple précédent. Il en va différemment parce que ces éléments contiennent des éléments enfants. Pour attribuer un nom à l’élément de navigation ci-dessus, utilisez la fonction aria-label attribut. Regardez cet exemple :

    Vous remarquerez qu’un attribut nom est différent d’un nom accessible. Cet extrait de code permet de mieux comprendre :

    Voir l’article du TGPi sur les noms accessibles pour mieux comprendre cette question.

    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 des valeurs à vos éléments de différentes manières. L’extrait suivant illustre quelques-unes de ces possibilités :

    Priorité à l’accessibilité du web pour une expérience en ligne inclusive

    L’accessibilité du web ne se limite pas au respect des règles ; il s’agit également de veiller à ce que tout le monde ait 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 role, name et value dans votre code HTML peut rendre votre site web plus accessible aux personnes handicapées. Ne considérez pas l’accessibilité du web comme une option, mais comme une nécessité.

    Voir aussi :  Comment créer des niveaux dans les jeux Godot

    S’abonner à notre lettre d’information

    Comment améliorer l’accessibilité en HTML ?

    Accessibilité du HTML

    • Accessibilité HTML. Rédigez toujours le code HTML en tenant compte de l’accessibilité !
    • HTML sémantique. Le HTML sémantique consiste à utiliser autant que possible les éléments HTML corrects pour leur usage correct.
    • Les titres sont importants.
    • Texte alternatif.
    • Déclarer la langue.
    • Utiliser un langage clair.

    Comment le langage HTML contribue-t-il à l’accessibilité des sites web ?

    Un langage HTML sémantique bien structuré permet aux utilisateurs de lecteurs d’écran de mieux comprendre la mise en page de votre site. Il leur permet également de prévisualiser les sections et de passer d’un contenu à l’autre, comme le font les lecteurs voyants pour parcourir les pages web.

    Que peut-on faire pour améliorer l’accessibilité des navigateurs web ?

    10 conseils pour l’accessibilité du web. Structurer et organiser avec des en-têtes.Attribuer des balises alt pour les images.Utiliser un titre descriptif pour les liens.Utiliser les couleurs avec précaution.Concevoir des formulaires pour l’accessibilité du web.Utiliser des tableaux pour les données tabulaires.Assurer la navigation du site via un clavier.Transformer le contenu dynamique en contenu accessible.

    • Structurer et organiser avec des en-têtes.
    • Attribuer des balises alt aux images.
    • Utilisez un titre descriptif pour les liens.
    • Utilisez les couleurs avec précaution.
    • Concevoir des formulaires pour l’accessibilité du web.
    • Utilisez des tableaux pour les données tabulaires.
    • Assurer la navigation sur le site à l’aide d’un clavier.
    • Transformer le contenu dynamique en contenu accessible.

    Quels sont les quatre principes d’accessibilité en HTML ?

    Les lignes directrices standard de l’industrie pour l’accessibilité du contenu web s’articulent autour de quatre principes : Percevable, exploitable, compréhensible et robuste (ou POUR). Pour vous aider à comprendre les principes de base de l’accessibilité, nous avons préparé une introduction à ces principes.

    Cliquez pour évaluer cet article !
    [Total: Moyenne : ]

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *