Table des matières cachée pour les lecteurs d'écran

Question

J'ai constaté sur plusieurs sites qu'ils incluraient une section de navigation en haut de leur page, avec des liens internes vers d'autres parties de la page, afin que les utilisateurs disposant d'un lecteur d'écran puissent accéder rapidement au contenu, au menu. , pied de page, etc. Ce " nav " L'élément est déplacé hors écran avec CSS afin que les utilisateurs réguliers ne le voient pas.

Quel est le meilleur moyen de mettre cela en œuvre? C’est-à-dire quel est le moyen le plus accessible et le moins intrusif pour les lecteurs d’écran? Voici ce avec quoi je joue:

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Le premier a l’avantage d’être beaucoup plus propre dans son balisage, mais n’est pas exactement sémantique. En outre, il apparaît comme & "Aller à la section un. Aller à la section deux. Aller à la section trois &"; Je sais que l'apparence visuelle n'est pas importante puisqu'elle est cachée, mais est-ce que cela a une incidence sur la lecture? Y a-t-il des pauses appropriées entre chacun?

La seconde est un peu plus verbeuse dans sa syntaxe, mais heureusement plus descriptive.

Lequel de ces choix est le meilleur et existe-t-il un moyen encore meilleur?

Answer 1

Vous pouvez télécharger un plug-in pour Firefox appelé Fangs (en référence au lecteur d'écran réel). Mâchoires). Il produira un texte que Jaws lirait. C'est très pratique. J'irais avec une bonne mise en page sémantique sur les liens les uns après les autres. Je voudrais aussi le cacher avec ... quelque chose comme

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

L'utilisation de display: none peut ne pas être lu par certains lecteurs d'écran.

Sur mes propres sites, j'ai généralement fait ceci:

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Answer 2

N'oubliez pas que les lecteurs d'écran annoncent généralement des hyperliens en tant que tels. Cela signifie que votre premier exemple ne sera pas lu comme & "; Aller à la première section. Aller à la deuxième section. Aller à la troisième section &"; mais plutôt comme " Lien: Aller à la première section, lien: Aller à la deuxième section, lien: Aller à la troisième section " ou quelque chose comme ça.

(Personnellement, je choisirais toujours la deuxième option, sémantique, mais ce n'est que ma préférence personnelle.)

Answer 3

Vous devez placer les liens dans un identifiant (ou une classe) de #nav. Cela donne à ceux qui utilisent des lecteurs d'écran un message indiquant que le contenu est une liste de liens: & Quot; Ceci est une liste de trois éléments: un lien, 'saute à la première section, un lien' passe à la deuxième section '... & ";

Placer le " ul " dans un " div " avec un identifiant de " #nav " est fonctionnel, mais la div ne fait rien d’emballer le & "; ul &"; pour l'identification. Il est plus propre de simplement identifier le & Quot; ul & Quot; et laissez le " div " en dehors. Le code suivant est le meilleur (je pense). Propre et au point.

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Pour supprimer le texte de la page avec css, vous utilisez:

ul#nav {
    position: absolute;
    left: -9999px
}

Answer 4

Avec une bonne mise en page sémantique, vous n'en avez pas besoin. Vous pouvez rendre les éléments de navigation que vous utilisez déjà compatibles avec le lecteur d'écran. La deuxième option est normalement comment y arriver. Vous pouvez attribuer un style aux éléments de la liste pour qu'ils correspondent à ce que vous faites actuellement.

Answer 5

La meilleure façon de faire ce que vous avez demandé est d'utiliser le <ul> avec les ancres à l'intérieur.

Cependant, WebKit contient des bogues qui empêchent la focalisation de se focaliser sur l'élément ciblé. Vous devrez donc également attacher un gestionnaire d'événements aux liens afin que la focalisation soit déplacée. Pour cela, la cible doit également être une cible de focus (tabindex="-1" fonctionnera pour cela).

Toutefois, si vous avez une bonne structure d’en-tête sur la page, l’utilisateur du lecteur d’écran peut naviguer sur la page sans avoir besoin du menu de navigation que vous créez. En fait, ce menu pourrait être plus utile pour les utilisateurs ne disposant que d’un clavier et ne disposant pas de lecteur d’écran. Dans ce cas, vous voudrez le faire apparaître sur le focus pour que l’utilisateur du clavier puisse le voir.