Le document

En plus de la structure, il existe de nombreux éléments HTML compatibles à prendre en compte pour construire et concevoir pour l'accessibilité numérique. Tout au long du cours sur l'accessibilité, nous abordons de nombreux éléments.

Ce module se concentre sur des éléments très spécifiques qui ne correspondent à aucun dans les autres modules, mais qu'il est utile de comprendre.

Page title

L'élément HTML <title> définit le contenu de la page ou de l'écran sur le point de départ d'un utilisateur. expérience. Il se trouve dans Section <head> de un document HTML. Elle est équivalente au <h1>, ou sujet principal de la page. La s'affiche dans l'onglet du navigateur pour aider les utilisateurs à identifier la page consultée, mais elle n'est pas affichée sur le site Web ni dans l'application elle-même.

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

Les titres de page descriptifs sont bons pour les utilisateurs et optimisation pour les moteurs de recherche (SEO), mais sans exagérer et ajouter beaucoup de mots clés. Puisque le titre est le premier est annoncé lorsqu'un utilisateur TA visite une page, il doit être précis, unique et descriptives, mais aussi concises.

Lors de la rédaction des titres de page, il est également recommandé d'effectuer un "chargement frontal" l'intérieur ou du contenu important, puis ajoutez les pages ou informations précédentes par la suite. De cette façon, les utilisateurs de TA n'ont pas à parcourir 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 langue de la page (lang) définit la langue par défaut de la page entière. Cet attribut est ajouté à la balise <html>. Un attribut de langue valide doit être ajouté à chaque page, car il indique à la TA la langue dans laquelle elle doit utiliser.

Nous vous recommandons d'utiliser deux caractères Codes de langue ISO pour une meilleure couverture des TA, car beaucoup d'entre elles ne prennent pas en charge codes de langue étendus.

Lorsqu'un attribut de langue est complètement manquant, la TA utilise par défaut la la langue programmée de l'utilisateur. Par exemple, si une TA a été définie en espagnol, mais qu'un visite un site Web ou une application en anglais, les TA essaieront de lire la version anglaise avec des accents espagnols et une cadence. Avec cette combinaison, produit numérique 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 L'attribut <html> ne peut avoir qu'une seule langue, même s'il existe plusieurs langues sur la page. Définissez lang sur la langue principale de la page.

À éviter
<html lang="ar,en,fr,pt">...</html>
<ph type="x-smartling-placeholder"></ph> L'utilisation de plusieurs langues n'est pas acceptée.
À faire
<html lang="ar">...</html>
<ph type="x-smartling-placeholder"></ph> 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 changer de langue dans le contenu lui-même. Les mêmes règles de base s'appliquent que pour l'attribut de langue sur la page entière, si ce n'est que vous devez l'ajouter à l'élément d'encart approprié, et non à la balise <html>.

N'oubliez pas que la langue que vous ajoutez à l'élément <html> s'applique les éléments contenus. Vous devez donc toujours définir la langue principale de la page l'attribut lang de premier niveau en premier.

Pour tous les éléments de la page écrits dans une autre langue, ajoutez ce lang à l'élément wrapper approprié. Cette action remplace 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ément iFrame (<iframe>) correspond à utilisé pour héberger une autre page HTML ou le contenu d'un tiers sur la page. Il place essentiellement une autre page Web dans la page parent. Les iFrames sont généralement utilisé pour les publicités, les vidéos intégrées, l'analyse d'audience Internet contenus.

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 parent. Ce titre fournit aux utilisateurs de TA un plus d'informations sur le contenu de <iframe>.

Deuxièmement, il est recommandé de définir le défilement sur "auto". ou "oui" dans les paramètres de balise <iframe>. Cela permet aux personnes malvoyantes de faire défiler des contenus dans <iframe> qu'ils ne pourraient pas voir autrement. Idéalement, la hauteur et la largeur du conteneur <iframe> doivent é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>

Testez vos connaissances

Testez vos connaissances sur l'accessibilité des documents.

Votre site est un manuel en ligne multilingue, où plusieurs langues sont présentées sur une 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, les TA peuvent lire automatiquement chaque langue.
Définissez un lang principal pour <html>, ainsi que des langues supplémentaires pour tout élément dont le contenu est dans une autre langue.
Incluez toutes les langues dans l'élément <html>. Exemple : <html lang="en,lt,pl,pt">