Share
En gros, c’est le principe selon lequel votre site Web doit pouvoir être sans encombre navigué pour tous les utilisateurs. Cela inclut le principe selon lequel tout votre site Web devrait être accessible en utilisant uniquement le clavier. En outre, la manière dont votre site Web répond aux entrées de l'utilisateur (au clavier ou autrement) doit être prévisible, claire et sûre..
Ce dernier point concerne principalement le fait de s'assurer que toute fonctionnalité de votre site susceptible de provoquer des saisies est désactivée par défaut, et que les utilisateurs sont avertis avant de l'activer. Ce principe fournit également des indications sur la nécessité de donner aux utilisateurs suffisamment de temps pour effectuer leurs tâches, mais nous ne le traitons pas ici.
Être capable de naviguer et d'utiliser votre site avec seulement un clavier est l'un des aspects les plus importants de l'accessibilité. Les utilisateurs aveugles utiliseront presque exclusivement les claviers. Les personnes ayant une déficience motrice peuvent avoir des difficultés à contrôler une souris et dépendent donc également de l'accès au clavier. Certaines personnes peuvent avoir peu ou pas d'utilisation de leurs mains et s'appuyer sur des claviers, des baguettes à bouche, des baguettes, des interrupteurs simples ou des Sip 'n' Puff plus grands..
Vous pouvez trouver des descriptions de ces périphériques sur le site Web de WebAIM, mais elles permettent toutes essentiellement de canaliser les entrées de l'utilisateur sur les touches du clavier. Si votre clavier n'est pas accessible par votre site Web, tous les utilisateurs utilisant ces appareils ne pourront pas utiliser votre site..
Heureusement, rendre votre thème ou votre clavier accessible est relativement simple. Voici quelques points clés:
De nombreux thèmes dépendent du survol d'un élément de menu pour révéler les sous-menus. C'est bien, mais généralement le sous-menu ne pas apparaît si l'élément de menu parent a le focus (plutôt que le survol). Si vous dupliquez des règles pertinentes pour :flotter et les appliquer à :concentrer cela vous mènera également à mi-chemin: les éléments du sous-menu apparaîtront sous forme d'onglets utilisateur dans le menu. Cependant, lorsque l'utilisateur accède au sous-menu, le menu parent perd le focus et le sous-menu disparaît. Ceci peut être corrigé en utilisant JavaScript. Des détails à ce sujet et sur la façon de fournir un repli non JavaScript seront traités dans le prochain article de cette série..
Vous n'avez rien à faire pour rendre les entrées de formulaire «natives» (sélection, entrée, radio, etc.) accessibles au clavier. Cependant, si un aspect de votre page (y compris les champs de formulaire) devient actif, il doit être possible de s'en éloigner en utilisant uniquement un clavier, sinon l'utilisateur est pris au piège. Ceci est normalement le comportement par défaut, vous devez donc simplement éviter de le remplacer..
Ce guide contient deux types de recommandations: rechercher où l’utilisateur actuellement est évident, et se rendre plus facilement là où ils veulent aller.
Pour faire cela, vous devez notamment suivre un certain nombre de thèmes: créer un menu de navigation cohérent sur toutes les pages, mettre en surbrillance la page en cours et permettre aux utilisateurs de déterminer rapidement où ils se trouvent sur le site (par exemple, à l'aide de chapelure).
Le fait de pouvoir utiliser un clavier pour naviguer dans une page Web permet de voir avec précision ce qui est actuellement concentré. L'élément actuellement ciblé doit être visiblement différent et se distinguer du reste de la page. Pour cette raison, vous devriez éviter contour: aucun; sauf si vous allez proposer un style alternatif:
a: focus contour: none; arrière-plan: # ee7b00; couleur: #fff;
Un autre élément important de l’accessibilité au clavier est que la tabulation se comporte de manière prévisible et naturelle. Par exemple, si le focus est actuellement un champ de formulaire, je m'attendrais à ce que l'onglet suivant m'emmène au champ suivant de ce formulaire. Si la tabulation provoque le survol de la page de manière irrégulière, cela frustrera et désorientera l'utilisateur..
Évitez d'utiliser tabindex: L'attribut tabindex vous permet de modifier l'ordre dans lequel les éléments sont atteints par la tabulation. Toutefois, si vous avez suivi les conseils de l’article 2 de cette série concernant la structure du DOM, l’ordre de tabulation doit refléter l’ordre "naturel" de la page. Bien que tabindex ait ses utilisations, celles-ci sont rares et son utilisation pour «corriger» une structure de site médiocre peut créer d'autres problèmes. La meilleure méthode consiste à éviter l'utilisation de tabindex et à laisser votre thème générer une structure DOM logique, avec CSS utilisé pour modifier la présentation visuelle..
Les utilisateurs de lecteurs d’écran sautent souvent d’un lien à l’autre, sautant le texte entre eux, et à chaque lien, le lecteur d’écran lit «lien [lien texte]». En tant que tel, il est incroyablement inutile pour de tels utilisateurs s'ils entendent à plusieurs reprises «lien en savoir plus», «lien cliquez ici» ou «lien en continu». L'ajout de contexte au lien dans ce cas implique simplement de fournir le titre de l'article. Donc, au lieu de "Continuer la lecture", nous avons "Continuer la lecture [titre de poste]".
Pour ce faire dans un thème WordPress, il suffit d’accroche à la extrait_plus filtrer et ajouter notre lien "continuer la lecture":
// Ajoute la fonction de lien "continuer à lire X" mytheme_continue_reading_link () return ''. sprintf (__ ('Continuez à lire% s', 'mytheme'), esc_url (get_permalink ()), esc_html (get_the_title ())). '
'; // Remplace "[…]" (ajouté aux extraits générés automatiquement) par des points de suspension et mytheme_continue_reading_link (). fonction mytheme_auto_excerpt_more ($ plus) return ' …'. mytheme_continue_reading_link (); add_filter ('excerpt_more', 'mytheme_auto_excerpt_more');
Cela donne le lien "lire plus" contexte approprié. Cependant, quelques améliorations peuvent être apportées.
Tout d’abord, l’ajout du titre de l’article va typiquement gâcher l’esthétique du thème et sera redondant pour les utilisateurs malvoyants, car la position du lien "lire plus" par rapport au titre et à l’extrait rendra le contexte évident. Pour résoudre ces problèmes, nous pouvons "masquer" le titre de l'article, mais de manière à ce que les lecteurs d'écran le lisent quand même..
Cela signifie que nous ne peut pas utiliseraffichage: aucun ou visibilité: cachée; les lecteurs d’écran comprennent ces propriétés et ignorent le contenu. Au lieu de cela, nous pouvons positionner le texte hors écran ou utiliser le agrafe propriété:
.lecteur d'écran position: absolu! important; largeur: 1px; hauteur: 1px; rembourrage: 0; marge: -1px; débordement caché; clip: rect (0,0,0,0); bordure: 0;
Il existe de nombreux exemples de "classes de lecteurs d'écran"; celui-ci provient de Bootstrap 3. Ensuite, ajoutez la classe appropriée au titre de l'article, en remplaçant spécifiquement la ligne 5 ci-dessus par:
Accentsconagua
__( 'Continuer la lecture % s', 'mon thème' ), Deuxièmement, même si cela donnerait aux utilisateurs une indication de l'endroit où le lien pointait, ils devraient toujours écouter via "continuer à lire le lien ..." avant d'atteindre le titre de l'article. Dans l'idéal, vous devriez mettre des informations redondantes à la fin du texte du lien ou les supprimer complètement de la balise d'ancrage afin de réduire le temps nécessaire à l'identification d'un lien..
Un autre avantage, pour les utilisateurs de lecteurs d'écran, de ne pas faire précéder le texte lié de leurs informations redondantes est que les lecteurs d'écran génèrent souvent une liste de liens sur une page. Si beaucoup de vos liens commencent par le même texte, cela peut rendre plus difficile la recherche du lien souhaité, en particulier si le lien de votre page de contact se trouve sous "H", car il indique "Comment nous contacter".
</code> Tag correctement</h3><p>le <code><title></code> La balise doit être utilisée pour identifier l'emplacement actuel de l'utilisateur. Cette lecture est lue par les lecteurs d'écran et apparaît dans les résultats de la recherche ainsi que sur la fenêtre d'écran et l'onglet du navigateur. Pour que les utilisateurs puissent facilement savoir où ils se trouvent (ou ce que la recherche a trouvé), cette balise de titre doit contenir le titre de la page et le nom du site Web. Idéalement, le nom du site Web doit figurer en dernier, de sorte que les utilisateurs de lecteurs d'écran ne soient pas obligés d'écouter le nom de votre site à chaque chargement de page avant d'entendre le titre de la page..</p><p>La balise de titre peut être ajoutée à un thème avec:</p><pre><title><?php wp_title(); ?> Pour ajouter le titre du site:
/ ** * Ajoute le titre du site au titre de la page * / function mytheme_wp_title ($ title, $ sep, $ seplocation) return $ title. '| '. get_bloginfo ('nom'); add_filter ('wp_title', 'mytheme_wp_title', 10, 3);Aller au contenu
Les sites Web ont généralement un en-tête et un menu de navigation communs qui, à l'exception de la mise en surbrillance de la position actuelle de l'utilisateur, resteront exactement les mêmes. Il est fastidieux et frustrant de devoir parcourir tous ces liens ou d'écouter un lecteur d'écran les répéter à chaque chargement de page. Ceux d’entre nous qui ont une bonne vision (et assez) de motricité peuvent immédiatement passer au contenu - et nous pouvons le rendre aussi facile pour ceux qui n’en ont pas..
Si vous êtes dans votre administrateur WordPress, et appuyez sur Languette après le chargement de la page, vous remarquerez un lien qui dit Passer au contenu principal apparaît en haut à gauche (si vous appuyez à nouveau sur la touche Tab, une Passer à la barre d'outils le lien apparaîtra). Ce lien se trouve tout en haut de la page, de sorte qu'il s'agit du premier lien qui reçoit le focus lors de la tabulation et du premier lien du site lu par un lecteur d'écran. En suivant ce lien, l'utilisateur accède directement au contenu principal, en supprimant tous les liens et logos inutiles entre les sites..
Créer un contenu de contenu est un excellent moyen de faciliter la navigation sur votre site Web. Il est incroyablement facile, car il ne nécessite qu'un petit peu de HTML et du code CSS..
D'abord le HTML. Le lien doit aller tout en haut de votre page, immédiatement sous le header.php fichier:
// reste du contenu de la page
Les seules choses à noter ici sont:
- La valeur href, dans ce cas 'principale'. Cela doit correspondre à l'ID de l'élément contenant le contenu de la page..
- La classe du lien, que nous utiliserons pour le style.
En ce qui concerne (1), votre boucle ressemblera alors à:
//La boucle // Aucun article trouvé… Afficher la recherche
et vos modèles de page pourraient ressembler à quelque chose comme:
>
Il ne reste plus qu’à ajouter du style au lien.
Tout d’abord, nous voulons que le lien soit masqué mais pas caché pour les lecteurs d’écran. Nous allons donc positionner le lien hors écran plutôt que d’utiliser affichage: aucun (auquel cas les lecteurs d'écran l'ignorent).
Deuxièmement, quand il gagne le focus, nous voulons rendre le lien évident, il est donc clair qu'un lien précédemment masqué est maintenant visible et a le focus.
.skip-link position: absolute; à gauche: 6px; en haut: -100px; / * position hors écran pour qu'il ne soit pas visible, mais puisse recevoir le focus * / z-index: 100000; / * Position au-dessus de la barre d’outils de WordPress * / font-size: 1em; poids de police: gras; bloc de visualisation; arrière-plan: # ee7b00; Couleur blanche; / * Style le lien pour que ce soit clair * / height: auto; largeur: auto; hauteur de trait: normale; rembourrage: 15px 25px; texte-décoration: aucun; -webkit-transition: relâchement des 1 meilleurs; transition: relâchement du top 1; .skip-link: focus top: 5px; / * Se déplacer sur l'écran * / -webkit-transition: right 0s; transition: droite 0s; / * Animate, pour rendre son apparence évidente * /
Assurez la navigation de votre site en toute sécurité (2.3)
Enfin, sachez que certaines personnes sont susceptibles aux crises d'épilepsie photosensibles. Cela peut être dû à des effets de scintillement ou de clignotement. En décembre dernier, Jeff Chandler a supprimé l'effet de "neige" de la taverne WP après qu'un visiteur l'ait averti que cela pourrait déclencher une crise..
Cela ne se limite pas aux convulsions - cela peut déclencher des migraines ou des attaques de panique chez certaines personnes. Il ne se limite pas non plus aux effets de neige: une lecture automatique de vidéos, de carrousels ou de fichiers audio peut également les déclencher..
Bien qu’il s’agisse en grande partie d’une décision de l’éditeur et en tant que développeur, notre travail n’est pas de prévenir la lecture automatique, nous pouvons au moins le décourager, en le désactivant par défaut. Jeff mentionne dans son article qu'il n'a pas pu trouver de plug-in fournissant l'effet "neige" auquel les visiteurs pourraient jouer eux-mêmes..
