Le document

En plus de la structure, de nombreux éléments HTML secondaires doivent être pris en compte lors de la création et de la conception pour l'accessibilité numérique. Tout au long du cours "Apprendre l'accessibilité", nous abordons de nombreux éléments.

Ce module se concentre sur des éléments très spécifiques qui ne correspondent pas vraiment à l'un des autres modules, mais qui sont utiles à comprendre.

Page title

L'élément HTML <title> définit le contenu de la page ou de l'écran qu'un utilisateur est sur le point de consulter. Il se trouve dans la section <head> d'un document HTML et équivaut à l'<h1> ou au sujet principal de la page. Le contenu du titre s'affiche dans l'onglet du navigateur et aide les utilisateurs à comprendre la page qu'ils consultent, mais il ne s'affiche pas sur le site Web ou l'application en eux-mêmes.

Dans une application monopage (SPA), le <title> est géré de manière légèrement différente, car les utilisateurs ne naviguent pas entre les pages comme ils le font sur les sites Web multipages. Pour les SPA, la valeur de la propriété document.title peut être ajoutée manuellement ou par un package d'assistance, en fonction du framework JavaScript. Annoncer les titres de page mis à jour à un utilisateur de lecteur d'écran peut nécessiter un travail supplémentaire.

Les titres de page descriptifs sont bons pour les utilisateurs et pour le référencement naturel (SEO), mais n'en faites pas trop et n'ajoutez pas trop de mots clés. Étant donné que le titre est le premier élément annoncé lorsqu'un utilisateur d'AT consulte une page, il doit être précis, unique et descriptif, mais aussi concis.

Lorsque vous rédigez des titres de page, nous vous recommandons également de commencer par "charger en avant" la page intérieure ou le contenu important, puis d'ajouter les pages ou informations précédentes par la suite. Ainsi, les utilisateurs d'AT n'ont pas à écouter les informations qu'ils ont déjà entendues.

À éviter
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
À faire
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Langue

Langue de la page

L'attribut de langue de la page (lang) définit la langue par défaut de l'ensemble de la page. Cet attribut est ajouté à la balise <html>. Vous devez ajouter un attribut de langue valide à chaque page, car il indique à l'AT la langue à utiliser.

Nous vous recommandons d'utiliser des codes de langue ISO à deux caractères pour une meilleure couverture de l'AT, car beaucoup d'entre eux ne sont pas compatibles avec les codes de langue étendus.

Lorsqu'un attribut de langue est complètement manquant, l'AT utilise par défaut la langue programmée par l'utilisateur. Par exemple, si une assistance vocale est définie en espagnol, mais qu'un utilisateur accède à un site Web ou à une application en anglais, l'assistance vocale tentera de lire le texte en anglais avec des accents et une cadence espagnols. Cette combinaison entraîne un produit numérique inutilisable et un utilisateur frustré.

À éviter
<html>...</html>
À faire
<html lang="en">...</html>

L'attribut lang ne peut être associé qu'à une seule langue. Cela signifie que l'attribut <html> ne peut avoir qu'une seule langue, même si la page contient plusieurs langues. Définissez lang sur la langue principale de la page.

À éviter
<html lang="ar,en,fr,pt">...</html>
 Les langues multiples ne sont pas acceptées.
À faire
<html lang="ar">...</html>
 Définissez uniquement la langue principale de la page. Dans ce cas, la langue est l'arabe.

Langue de la section

Vous pouvez également utiliser l'attribut de langue (lang) pour les changements de langue dans le contenu lui-même. Les mêmes règles de base s'appliquent que pour l'attribut de langue de la page complète, sauf que vous l'ajoutez à l'élément approprié de la page au lieu de la balise <html>.

N'oubliez pas que la langue que vous ajoutez à l'élément <html> se propage à tous les éléments contenus. Définissez donc toujours d'abord la langue principale de l'attribut lang de niveau supérieur de la page.

Pour tous les éléments de la page rédigés dans une autre langue, ajoutez cet attribut lang à l'élément de wrapper approprié. Ce paramètre remplace le paramètre de langue de niveau supérieur jusqu'à ce que cet élément soit fermé.

À éviter
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
À faire
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

Cadres iFrame

L'élément iFrame (<iframe>) permet d'héberger une autre page HTML ou le contenu d'un tiers sur la page. Il s'agit essentiellement d'insérer une autre page Web dans la page parente. Les iFrames sont couramment utilisés pour les annonces, les vidéos intégrées, les analyses Web et le contenu interactif.

Pour rendre votre <iframe> accessible, vous devez prendre en compte plusieurs aspects. Tout d'abord, chaque <iframe> avec un contenu distinct doit inclure un élément de titre dans la balise parente. Ce titre fournit aux utilisateurs d'AT plus d'informations sur le contenu de <iframe>.

Deuxièmement, nous vous recommandons de définir le défilement sur "auto" ou "yes" dans les paramètres de la balise <iframe>. Cela permet aux personnes ayant une mauvaise vue de faire défiler le contenu de l'<iframe> qu'elles ne pourraient pas voir autrement. Dans l'idéal, la hauteur et la largeur du conteneur <iframe> devraient également être flexibles.

À éviter
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
À faire
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

Vérifier vos connaissances

Testez vos connaissances sur l'accessibilité des documents.

Votre site est un manuel en ligne multilingue, où plusieurs langues sont affichées sur une même page. Quel est le meilleur moyen d'indiquer à la technologie d'assistance la langue du contenu ?

Ne vous inquiétez pas, l'aide technique peut lire automatiquement chaque langue.
Bien que certaines AT puissent être capables de détecter la langue, vous ne pouvez pas garantir qu'elles le feront correctement.
Incluez toutes les langues dans l'élément <html>. Par exemple, <html lang="en,lt,pl,pt">
L'attribut lang ne peut être associé qu'à une seule langue.
Définissez une lang principale pour la <html> et des langues supplémentaires sur tous les éléments dont le contenu est dans une autre langue.
L'AT s'appuie principalement sur l'attribut de langue <html> pour lire le document. Si votre texte est multilingue, veillez à ajouter un attribut lang à l'élément correspondant (par exemple, une section ou un paragraphe) avec le code ISO à deux lettres approprié.