Salut, bienvenue de retour.
Dans cette conférence, nous allons parler de navigation accessible.
Je sais que ce cours est principalement sur CSS, mais j'aime toujours apparaître et
vous rappeler les différentes choses que vous devez
penser pendant que vous coiffez vos pages.
La navigation est vraiment l'aspect le plus critique de l'accessibilité.
Si les gens ne peuvent pas naviguer dans votre page et accéder au contenu dont ils ont vraiment
besoin, alors vous avez vraiment perdu leur temps et une partie du vôtre.
Ainsi, les utilisateurs cités ont ce genre de choses éprouvées et vraies qu'ils recherchent
sur une page.
Ils savent ce qu'est une boîte de recherche.
Ils savent où va habituellement la bannière.
Où se trouve la navigation principale.
Et ce n'est pas surprenant pour eux que souvent le contenu principal,
dans ce que nous appelons bien le contenu, est caché plus bas dans une page.
Et nous le savons parce que nous pouvons le voir juste dès que nous ouvrons le navigateur.
Mais pour les utilisateurs aveugles ou à faible vision, ils ont vraiment besoin
de compter sur le codage approprié de la page afin d'obtenir ce qu'ils veulent obtenir.
Et pas seulement le codage approprié, mais il
y a beaucoup de problèmes stylistiques que vous devez penser lorsque vous faites cela.
Alors, et si tu ne vois pas ?
Le premier endroit où vous obtenez des informations provient du titre de la page.
Vous voulez vous assurer que votre titre est court, mais
aussi faire savoir à l'utilisateur en quoi cette page est différente des autres pages de votre site.
Ensuite, le bon placement de titre, et le type de cette hiérarchie,
permettent aux utilisateurs de l'écran d'ignorer les différents liens de navigation et d'
accéder directement à ce qu'ils recherchent.
Je pense que vous avez tous été sur des sites où vous avez besoin d'aller à un endroit
, puis vous suivez un autre et vous suivez un autre.
Et cela peut être vraiment ennuyeux et irritant.
Surtout si c'est vraiment important que votre souris soit au bon endroit.
Nous voulons donc nous assurer que nous laissons les lecteurs d'écran et
les autres utilisateurs passer directement à l'endroit où ils veulent aller.
Nous voulons également penser à vos liens.
Parce que lorsque vous avez les liens vers les différents sites de votre page,
ces descriptions sont tout ce que les gens ont pour eux.
Donc tu ne veux pas utiliser Click Me, Suis-moi ici.
Vous voulez donner de bonnes informations dans ces descriptions de liens.
Ensuite, nous devons parler de la bonne hiérarchie des rubriques, d'accord ?
Les en-têtes doivent être imbriqués afin de vraiment fournir de la structure, donc
vous ne devriez pas avoir des en-têtes h3 avant d'avoir des en-têtes h2.
Vous ne devriez avoir qu'un seul titre h1.
Vous ne devriez pas sauter de h2 à h4.
Au lieu de cela, vous voulez vraiment suivre un certain type d'ordre pour
que les gens puissent se rendre compte qu'il y a un sens derrière votre page.
Voici donc un exemple ici.
J' ai mon seul titre h1, puis dans cette page,
je peux imaginer que j'ai trois sections.
Chacune de ces sections a un titre h2 à l'intérieur.
Et dans ma première section, il se peut que j'ai ces quelques petits points
ou d'autres points que je fais, où ils sont assez importants pour que j'ai décidé hey,
je vais utiliser h3 pour signifier que c'est une autre sous-section dans ma section.
Là où les gens ont des ennuis et ce que vous voyez tout le temps, c'est que les gens décident,
j'aime vraiment l'apparence de cette police h2.
J' aime la taille du texte.
J' aime le genre de police qu'ils utilisent, donc je vais juste mettre
autant de choses que je peux dans la police h2 car j'aime la façon dont elle a l'air.
Et ils ne pensent pas à la sémantique.
La même chose se produit avec la police h3.
Vous allez sur la page de quelqu'un et découvrez qu'il n'y a pas de polices h2 du tout.
Au lieu de cela, ce sont tous les éléments h3, et
ils ne l'ont fait que parce qu'ils aiment le look de cette balise particulière.
Alors maintenant, c'est là que le style entre en jeu,
c'est pourquoi je parle de cela dans la classe de style.
Est-ce que maintenant vous savez qu'à la place, si vous aimez vraiment l'apparence de ce titre h3,
au lieu d'utiliser la balise, vous devriez coiffer d'autres balises pour répliquer ce look.
Découvrez quelle famille de polices ils utilisent.
Découvrez quelle taille de police.
Répéte-le.
N' utilisez pas de balises simplement parce que vous aimez leur apparence.
L' autre chose à laquelle vous pouvez penser pour aider la navigation,
est cette idée d'en-têtes hors page.
Il est utile de le faire lorsque vous voulez donner à l'utilisateur du lecteur d'écran une sorte
d'aide à la navigation, mais vous ne voulez pas le mettre correctement dans la page et
que vos utilisateurs voyants doivent également le faire tout le temps.
Alors, laissez-moi vous donner un exemple de celui-ci.
Nous allons utiliser des feuilles de style pour définir quelque chose hors page,
nous lui avons donné le nom de offpage, et nous avons dit
, hé, je veux placer ça dans une position absolue à gauche par -1000px.
Donc tu sauras que c'est assez loin.
J' ai ici la page des ressources humaines de l'Université du Michigan.
Et si vous regardez en haut, il n'y a vraiment rien
là-bas, ici dans le coin supérieur.
Mais ce que je vais faire, c'est que je vais aller de l'avant et frapper Tab.
Et, ce que fait Tab, c'est qu'il met l'élément suivant en focus.
Alors, allez-y et Tab, là.
Et vous pouvez voir,
que maintenant, il y a cette nouvelle chose ici qui dit Passer au contenu principal.
Si je clique dessus, je vais jusqu'au bout, et j'ai pu
sauter beaucoup de ces informations supplémentaires qu'ils n'avaient pas vraiment besoin de voir.
C' était plus juste du marketing et des choses différentes comme ça.
Ainsi, ces différents liens de navigation hors écran sont extrêmement utiles pour permettre
aux gens de sauter immédiatement à ce qu'ils veulent obtenir.
Mais, en utilisant le style,
nous avons retiré de la page que vous ne l'utilisez que si vous le voulez vraiment.
Une des choses que je voulais mentionner est, si vous voulez faire des en-têtes hors page,
n'utilisez pas {display : none} ou {visibility : hidden}.
Ces vraiment juste genre de désordre avec le code et rendent très difficile pour les
lecteurs d'écran ou d'autres personnes regardant votre code de voir ce qui se passe.
Au début de la conférence, j'ai mentionné que le texte de lien significatif est
très important pour
l'accessibilité parce que les lecteurs d'écran peuvent trouver et lister tous les liens.
Maintenant, ce que vous ne réalisez peut-être pas, c'est la façon dont ces liens sont affichés
peut ne pas être comme vous l'attendez.
Donc, ils peuvent être hors contexte.
Il se peut que vous puissiez y accéder uniquement via des onglets ou
qu'ils soient présentés dans une liste.
Donc, vous voulez vraiment éviter d'utiliser des choses telles que cliquer ici, lire ceci et plus encore.
La raison en
est que peut-être le seul contexte que certaines personnes obtiennent pour aller aux liens.
En outre, veuillez ne pas utiliser l'URL comme description de lien.
Il est assez commun d'aller sur un site et vous pouvez voir cliquez ici, et
ils ont l'URL entière, www.umich.edu/etc.
Cela peut sembler très descriptif, mais si vous devez écouter la description,
cela peut être très déroutant.
Au lieu de cela, sauf si vous avez une URL très courte, allez-y et
utilisez une sorte de description textuelle.
Donc, juste pour passer en revue, réfléchissons à ce que nous avons appris aujourd'hui.
Lorsque vous avez fini de faire votre page, ce n'est pas suffisant pour qu'elle ait l'air bien.
Vous devez penser à combien il est facile de naviguer sur votre page.
Pensez à ce qui se passerait si les couleurs n'étaient pas là, ou
si quelqu'un ne pouvait accéder à votre page qu'avec une souris.
Donc, je vous demande très vite ce dont je parle ici.
Voici une vieille page, et en bas, j'ai l'Université du Michigan.
Je veux juste te montrer ce qui se passe quand j'enlève le style.
La page maintenant, vous ne pouvez même plus voir le texte.
Ce sont les petites choses que vous ne remarqueriez jamais à
moins que vous ne vérifiiez votre page avec et sans style.
Donc, lorsque vous planifiez votre page, assurez-vous que vous planifiez pour tout le monde.
Faites un grand usage des en-têtes.
Faites un grand usage du texte du lien.
Et assurez-vous que vous donnez aux utilisateurs les outils dont ils ont besoin pour naviguer
avec succès sur votre page.
Merci.