En plus de la structure, de nombreux éléments HTML d'assistance doivent être pris en compte lors de la création et de la conception pour l'accessibilité numérique. Tout au long du cours "Découvrir 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 qu'il est utile de 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. Elle se trouve dans la section <head> d'un document HTML et équivaut au <h1> ou au thème 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 ni dans l'application elle-même.
Dans une application monopage (SPA), le <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 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 utiles à la fois pour les utilisateurs et pour l'optimisation du référencement naturel (SEO). Toutefois, n'en faites pas trop en ajoutant de nombreux mots clés. Étant donné que le titre est la première chose annoncée lorsqu'un utilisateur de technologies d'assistance 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 placer en premier la page intérieure ou le contenu important, puis d'ajouter les pages ou informations précédentes. Ainsi, les utilisateurs de technologies d'assistance n'ont pas à écouter des informations qu'ils ont déjà entendues.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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 pour l'ensemble de la page. Cet attribut est ajouté à la balise <html>. Un attribut de langue valide doit être ajouté à chaque page, car il indique à la technologie d'assistance 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 prennent pas en charge les codes de langue étendus.
Lorsqu'un attribut de langue est complètement manquant, la technologie d'assistance utilise par défaut la langue programmée par l'utilisateur. Par exemple, si une technologie d'assistance était définie sur l'espagnol, mais qu'un utilisateur consultait un site Web ou une application en anglais, la technologie d'assistance tentait de lire le texte en anglais avec des accents et une cadence espagnols. Cette combinaison aboutit à un produit numérique inutilisable et à un utilisateur frustré.
<html>...</html>
<html lang="en">...</html>
L'attribut "lang" ne peut être associé qu'à une seule langue. Cela signifie que l'attribut <html> ne peut comporter qu'une seule langue, même si la page en contient plusieurs. Définissez lang sur la langue principale de la page.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
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 entière, sauf que vous l'ajoutez à l'élément de page approprié au lieu de la balise <html>.
N'oubliez pas que la langue que vous ajoutez à l'élément <html> est appliquée à tous les éléments qu'il contient. Par conséquent, définissez toujours la langue principale de l'attribut lang de premier niveau de la page en premier.
Pour tout élément sur la page rédigé dans une autre langue, ajoutez l'attribut lang à l'élément wrapper approprié. Cela remplacera le paramètre de langue de premier niveau jusqu'à ce que cet élément soit fermé.
<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><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>) est utilisé pour héberger une autre page HTML ou le contenu d'un tiers sur la page. Il s'agit essentiellement d'une autre page Web intégrée à la page parent. Les iFrames sont couramment utilisés pour les annonces, les vidéos intégrées, l'analyse d'audience Web et les contenus interactifs.
Pour rendre votre <iframe> accessible, vous devez tenir compte de 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 de technologies d'assistance plus d'informations sur le contenu de <iframe>.
Deuxièmement, il est recommandé de définir le défilement sur "auto" ou "yes" dans les paramètres de la balise <iframe>. Les personnes malvoyantes peuvent ainsi faire défiler le contenu dans le <iframe> qu'elles ne pourraient pas voir autrement. Dans l'idéal, le conteneur <iframe> serait également flexible en hauteur et en largeur.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>