Le document

En plus de la structure, de nombreux éléments HTML sont à prendre 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 à aucun 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 que l'utilisateur est sur le point de consulter. Il se trouve dans la section <head> d'un document HTML et équivaut au <h1> ou au sujet principal de la page. Le contenu du titre est affiché dans l'onglet du navigateur et aide les utilisateurs à comprendre la page qu'ils consultent, mais il n'est pas affiché sur le site Web ni dans l'application elle-même.

Dans une application monopage (SPA), <title> est géré d'une 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 applications Web monopages, la valeur de la propriété document.title peut être ajoutée manuellement ou par un package d'assistance, en fonction du framework JavaScript. L'annonce des titres de page mis à jour aux utilisateurs de lecteurs d'écran peut nécessiter un travail supplémentaire.

Les titres de page descriptifs sont adaptés aux utilisateurs et au SEO (Search Engine Optimization), mais n'allez pas trop loin et n'ajoutez pas beaucoup de mots clés. Étant donné que le titre est la première chose annoncée lorsqu'un utilisateur TA visite une page, il doit être précis, unique, descriptif et concis.

Lorsque vous rédigez des titres de page, il est également recommandé de "précharger" la page intérieure ou le contenu important en premier, puis d'ajouter toutes les pages ou informations précédentes. De cette façon, les utilisateurs de TA n'ont pas à passer en revue 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>

langage

Langue de la page

L'attribut langue de la page (lang) définit la langue par défaut de la page. Cet attribut est ajouté à la balise <html>. Un attribut de langue valide doit être ajouté à chaque page pour indiquer à la TA quelle langue il doit utiliser.

Il est recommandé d'utiliser des codes de langue ISO à deux caractères pour une meilleure couverture TA, car beaucoup d'entre eux ne sont pas compatibles avec les codes de langue étendus.

Lorsqu'un attribut de langue est complètement manquant, la TA est définie par défaut sur la langue programmée de l'utilisateur. Par exemple, si une TA est définie en espagnol, mais qu'un utilisateur consulte un site Web ou une application en anglais, elle essaie de lire le texte en anglais avec des accents et une cadence en espagnol. Cette combinaison se traduit par 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 en contient plusieurs. Définissez lang sur la langue principale de la page.

À éviter
<html lang="ar,en,fr,pt">...</html>
Vous ne pouvez pas utiliser plusieurs langues.
À faire
<html lang="ar">...</html>
Définissez uniquement la langue principale de la page. Ici, la langue est l'arabe.

Langue de la section

Vous pouvez également utiliser l'attribut de langue (lang) pour changer 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 entière, sauf que vous devez l'ajouter à l'élément d'encart approprié plutôt qu'au niveau de la balise <html>.

N'oubliez pas que la langue que vous ajoutez à l'élément <html> est appliquée en cascade jusqu'à tous les éléments contenus. Par conséquent, définissez toujours la langue principale de l'attribut lang de premier niveau de la page.

Pour tous les éléments sur la page écrits dans un autre langage, ajoutez cet attribut lang à l'élément wrapper approprié. Le paramètre de langue de premier niveau sera alors ignoré jusqu'à la fermeture de cet élément.

À é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>

iFrames

L'élément iFrame (<iframe>) permet d'héberger une autre page HTML ou du contenu tiers sur la page. Il place essentiellement une autre page Web dans la page parente. Les iFrames sont généralement utilisés pour les publicités, les vidéos intégrées, l'analyse d'audience Internet et le contenu interactif.

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

Deuxièmement, nous vous recommandons de définir le défilement sur "auto" ou "oui" dans les paramètres de la balise <iframe>. Les personnes atteintes de déficience visuelle peuvent ainsi accéder à des contenus de <iframe> qu'elles ne verraient autrement pas. Idéalement, le conteneur <iframe> serait également flexible en termes de hauteur et de largeur.

À é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>

Testez vos connaissances

Testez vos connaissances sur l'accessibilité des documents.

Votre site est un manuel en ligne multilingue, composé d'une seule et même page. Quel est le meilleur moyen d'indiquer à la technologie d'assistance le langage de la rédaction ?

Ne vous inquiétez pas, la TA peut lire automatiquement chaque langue.
Bien que certaines TA puissent avoir des compétences de détection de la langue, vous ne pouvez pas garantir qu’elles devineront correctement.
Incluez toutes les langues dans l'élément <html>. Exemple : <html lang="en,lt,pl,pt">.
L'attribut lang ne peut être associé qu'à une seule langue.
Définissez une lang principale pour <html>, ainsi que des langues supplémentaires pour tout élément dont le contenu est dans une autre langue.
La TA s'appuie principalement sur l'attribut de langue <html> pour lire le document. Si vous utilisez du texte multilingue, veillez à ajouter un attribut lang à l'élément correspondant (comme une section ou un paragraphe) avec le code ISO à deux lettres approprié.