Accentsconagua
Share
Dans un article précédent, nous avons expliqué pourquoi l’accessibilité est importante, en termes d’affaires, de référencement, de convivialité et même de droit. Dans cet article, nous expliquerons comment créer des thèmes WordPress accessibles, bien que les mêmes idées s'appliquent à toutes les plateformes..
Il n’ya aucun moyen de couvrir toutes les meilleures pratiques possibles dans cet article, mais les bases restent valables pour tous les sites Web. Je vais utiliser quelques ressources comme base de cet article:
Nous allons couvrir les conseils suivants:
Je ne saurais trop insister sur l’importance du HTML sémantique: c’est le fondement de votre site Web accessible. Léonie Watson explique parfaitement ce que signifie la sémantique dans son article comprenant la sémantique:
«La sémantique HTML est donc importante à deux égards: nous obtenons une compréhension cohérente de la structure du contenu et du comportement natif, ainsi qu'une compréhension commune de la signification et du but du contenu. La meilleure chose à faire est que nous obtenons ces éléments gratuitement chaque fois que nous utilisons HTML comme prévu. ”
Lorsque nous écrivons des éléments HTML, nous ne devons pas seulement penser à leur conception ou à leur apparence. Nous devrions également réfléchir à leur fonctionnement…
Un exemple très courant est l’utilisation de Utilisation Remarque: dans les coulisses, l'API d'accessibilité fournit des informations aux technologies d'assistance sur le nom, le rôle et l'état de chaque élément. Voici un exemple de lien, Construire un site Web inclusif: Pourquoi l’accessibilité est important, avec la façon dont un visualiseur d’accessibilité le voit: En pratique, cela signifie que les lecteurs d’écran et autres AT reconnaissent l’ancre et peuvent annoncer le rôle et le nom de l’élément. Par exemple: «Créer un site Web inclusif: Pourquoi l’accessibilité est-elle importante». Ils peuvent également naviguer sur la page en utilisant uniquement les liens: Utilisation Pour résumer, le Pointe: Dans Chrome 64, il existe un Accessibilité volet qui affiche la position d'un élément sélectionné dans l'arborescence d'accessibilité, ainsi que ses attributs ARIA et ses propriétés calculées. Utilisation En savoir plus sur les liens, les boutons, les soumissions et les divs par Adrian Roselli. Dans la section suivante, examinons les éléments de sectionnement HTML5 et ce à quoi ressemble le balisage sémantique. De nombreux éléments HTML5 définissent les rôles de points de repère ARIA par défaut. Celles-ci identifient les sections d'une page et aident les utilisateurs d'AT à accéder à chacune d'elles. Pour cette raison, tout le contenu doit être contenu dans des éléments sémantiquement significatifs afin que l'utilisateur ne l'oublie pas.. Ce sont les éléments de repère les plus courants: Remarque: les anciennes combinaisons de navigateur et d’AT ne reconnaissent pas nécessairement les éléments HTML5 et ne les mappent pas avec les rôles de repère corrects. Dans ces cas, vous pouvez ajouter des rôles manuellement comme ceci: Pour plus d'informations, consultez l'exemple de balisage sur la page du manuel WordPress concernant les points de repère ARIA et la page des exemples de points de repère ARIA.. Avez-vous lu un article très long sans en-têtes? Avez-vous trouvé difficile à lire? J'ai certainement. Les titres aident les utilisateurs à numériser et à comprendre rapidement le contenu de la page. Dans le même temps, les en-têtes offrent aux utilisateurs d’AT un moyen de naviguer dans le contenu et de définir la structure de la page.. Les approches varient, mais ma recommandation est la même que celle décrite dans la structure des titres dans le développement du thème: Remarque: les utilisateurs peuvent rompre la hiérarchie des en-têtes lors de la saisie de leur propre contenu en utilisant H1 ou en ignorant les niveaux d'en-tête. Informez-les en les dirigeant vers notre documentation sur l'utilisation des en-têtes dans le contenu.. J'utilise ces outils pour vérifier la structure des en-têtes: Jusqu'à présent, nous avons mentionné plusieurs façons de naviguer dans la page: en utilisant des liens, des en-têtes ou des points de repère. Il en va de même pour d'autres éléments HTML sémantiques tels que des listes, des tableaux ou des images.. Les utilisateurs de technologies d'assistance peuvent également naviguer à l'aide de ces éléments. Voici une courte vidéo illustrant l’utilisation du lecteur d’écran Voiceover, avec laquelle vous devriez absolument tester votre thème: En savoir plus sur l'utilisation de Voiceover ou consultez cet article similaire à l'aide de NVDA. Règle numéro un: ne supprimez pas les styles de contour en utilisant De nombreux utilisateurs dépendent du clavier et ne peuvent pas utiliser de souris. Pour les utilisateurs de clavier, il est essentiel de disposer de styles de focus visuel sur tous les éléments interactifs: liens, champs de formulaire, boutons, etc. En d’autres termes, les utilisateurs doivent pouvoir voir quel élément interactif a le focus clavier actuel lors de la navigation dans la page. Les commandes de clavier les plus courantes pour la navigation sont Languette, Maj + Tab, Entrer, Espace, et Touches directionnelles. Remarque: les styles de focus par défaut du navigateur ne sont pas toujours les plus accessibles; les styles de contour personnalisés sont parfois meilleurs. Notez aussi: Parfois, les styles de contour ne constituent pas la meilleure approche de conception car ils ne respectent pas le rayon de la bordure d'un élément. Une solution consiste à utiliser Voici une astuce qui utilise un contour transparent pour le mode Windows Contraste élevé. Vous pouvez lire plus d'informations à ce sujet sur le ticket PR 41386 et le ticket 41286 de Gutenberg. D'autre part, la navigation au clavier ne concerne pas uniquement les styles de focus. Tout actes doit être possible avec le clavier aussi. Un exemple courant est lorsqu'un utilisateur ne peut pas accéder aux éléments de sous-menu à l'aide de la touche de tabulation ou des touches de direction. Les thèmes de départ Underscores ont une solution JavaScript pour cela: chaque fois qu'un lien de menu est focalisé ou flou, ils définissent ou suppriment la Un autre exemple est celui où la navigation agit de la même manière qu'une boîte de dialogue modale, comme une navigation plein écran. Dans ces cas, il est important de régler le focus correctement. Je vois encore beaucoup de dessins avec un contraste de couleur faible. Cela peut empêcher les utilisateurs daltoniens, malvoyants ou utilisant un moniteur de mauvaise qualité de lire le contenu.. Le contraste entre les couleurs d’arrière-plan et de premier plan doit avoir un rapport de contraste de Il existe de nombreux outils pour vérifier le contraste des couleurs, comme le vérificateur de rapport de contraste. Vous trouverez plus d'informations dans des articles tels que celui-ci sur l'utilisation des couleurs et le contraste des couleurs en tant qu'exigence pour les thèmes prêts pour l'accessibilité.. Un lien «Passer au contenu» permet de passer de tous les éléments supplémentaires avant le contenu principal vers le contenu. Vous vous demandez peut-être pourquoi Dans tous les cas, les utilisateurs d’AT utilisent toujours des liens de saut selon cette enquête auprès des lecteurs d’écran: En savoir plus sur l'utilisation des liens de saut dans le manuel. Essayez d’éviter les liens répétitifs tels que «Lire plus» ou «En savoir plus». Pour les utilisateurs de lecteurs d'écran qui naviguent à l'aide de liens, le résultat peut ressembler à ceci: Le thème Twenty Seventeen propose de bons exemples pour ajouter le titre de l'article dans l'extrait: % 2 $ s Pour les lecteurs d’écran, le texte du lien serait alors lu comme suit: «Continuer à lire le titre du post». Voici un exemple similaire pour le contenu: Classe Nous n'avons abordé que la surface de l'accessibilité dans les thèmes WordPress, mais j'espère que cela vous aidera à démarrer. Le HTML sémantique et l'utilisation judicieuse de CSS vont un long chemin. N'oubliez pas de consulter toutes les instructions d'accessibilité pour les thèmes et de lire d'autres astuces dans le manuel d'accessibilité.., , et . Nous allons les utiliser pour illustrer mon propos.Quand utiliser
(une balise d'ancrage) lorsque vous créez un lien vers une autre page, un fichier, un courrier électronique ou une ancre sur la même page.
Mozilla Retour au sommet.Menu. Cela devrait être .
Accessibility Viewer affiche le nom du lien, le rôle, l'état et d'autres informations.
Liste des liens de page dans le VoiceoverQuand utiliser
lorsque vous devez déclencher une action, comme ouvrir un menu. Cette vidéo de Rob Dodson explique pourquoi cette situation appelle à au lieu de . element présente déjà tous les avantages suivants:
bouton, qui aident les utilisateurs d'AT à comprendre que c'est un élément interactif.désactivée attribut, pour quand le bouton ne devrait plus être interactif.
Volet Accessibilité dans Chrome contenant les informations sur l'élément de boutonQuand utiliser
lorsque vous avez besoin d'un élément à des fins de style. Naturellement, commencez par vérifier s’il existe des éléments HTML natifs qui seraient meilleurs. Par exemple , , , , , ou
2. Structure avec des éléments de sectionnement HTML5
Élément HTML5 Rôle de repère par défaut bannière la navigation principale complémentaire contentinfo 3. Définissez clairement la hiérarchie des en-têtes
4. Naviguez sur la page à l'aide de la technologie d'assistance
Accessibilité: que vous dit votre balisage??
Aujourd'hui, nous allons examiner l'accessibilité et la sémantique. Commençons par une question: avez-vous déjà utilisé un lecteur d'écran? Si la réponse est non, vous devriez essayer… 5. Envisagez la navigation au clavier et les styles de focus
: focus contour: aucun; !boîte ombre à la place, mais… les styles de focus doivent fonctionner dans tous les scénarios, comme dans le mode Windows Contraste élevé qui supprime les styles d'ombre de la boîte.: focus box-shadow: encart 0 0 0 1px # 6c7781; / * Visible uniquement en mode Windows Contraste élevé * / contour: 2px solid transparent;
.concentrer classe sur le lien de menu. Voir la fonction toggleFocus.
Création de thèmes WordPress avec des tirets bas
Le thème de départ Underscores, créé par les créateurs de WordPress eux-mêmes, est conçu pour vous donner une «avance de 1000 heures» sur la création de thèmes WordPress. Ce cours… 6. Vérifier le contraste des couleurs
Notions de base sur l'accessibilité: Concevoir pour une déficience visuelle
Avec 4,5% de la population mondiale souffrant de daltonisme, 4% souffrant de basse vision et 0,6% d’aveugles, difficultés visuelles à utiliser… 7. Remember Skip Links
n'est pas suffisant puisque les utilisateurs d'AT peuvent accéder au contenu principal à l'aide de points de repère? En fait, le groupe cible principal du lien de saut est constitué des utilisateurs de clavier, qui n'utilisent probablement aucun périphérique AT. Donc, ils n'ont pas de raccourcis vers ou d'autres régions historiques."Il est important de noter que, même si l'utilisation a diminué chez les utilisateurs de lecteurs d'écran, les liens" sauter "offrent toujours des avantages notables aux autres utilisateurs de clavier."
8. Évitez les liens répétitifs
La liste des liens en plus n'aide pas la navigation/ ** * Remplace "[...]" (ajouté aux extraits générés automatiquement) par ... et * un lien "Continuer la lecture". * * @since Twenty Seventeen 1.0 * * * @param string $ link Lien vers un seul article / une seule page. * @return string 'Continue reading' lien précédé d'un ellipses. * / function twentyseventeen_excerpt_more ($ link) if (is_admin ()) return $ link; $ link = sprintf ('/ * traducteurs:% s: nom du message en cours * / the_content (sprintf (__ ('Continue reading "% s"',' vingt-sept ', get_the_title ())); écran-lecteur-texte masque visuellement le titre de l'article, mais les utilisateurs de lecteurs d'écran peuvent toujours accéder au texte. Consultez le dernier exemple de code du texte du lecteur d'écran dans le manuel.Conclusion
