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 l'essayer - cela pourrait bien changer votre approche du balisage HTML pour toujours!
Au cours de cet article, nous allons examiner la structure d'une page Web, la manière dont les lecteurs d'écran l'interprètent et les améliorations que nous pouvons apporter à notre propre balisage pour améliorer l'accessibilité..
Un mot rapide sur la démo
J'ai rassemblé un exemple de page Web afin de montrer comment des balises spécifiques traitent des balises spécifiques. Je souhaitais également présenter le balisage HTML5 le plus élémentaire, ce que j'espère utile. Enfin, je sais que vous aimez les téléchargements de fichiers source avec un didacticiel, alors profitez-en pour les démonter.!
La démo
La démo est une page simple et flexible d'une colonne. Il n'est pas réactif, mais il est bien configuré pour être créé, vous devriez le faire: il utilise des unités horizontales relatives (%) et des unités relatives (em) pour les polices. Les images sont flexibles et changent de taille en fonction des dimensions de leur conteneur parent. Il utilise également quelques polices Google groovy. Léger et propre.
Le modèle de standards Web
Si vous êtes un visiteur régulier du site, vous aurez sans cesse entendu dire que, lors de la création d'un site Web, il est important de séparer les préoccupations. Tout cela fait partie de ce que nous reconnaissons comme modèle de normes Web; composé de structure, présentation et comportement.
Structure nous construisons sous la forme de notre balise HTML, présentation est notre style (comment le contenu apparaît dans un agent utilisateur donné) que nous abordons avec CSS, et le comportement d'une page Web, l'interactivité front-end, que nous réalisons habituellement avec javascript.
Garder ces trois aspects de la conception de sites Web séparés nous est bénéfique sur le plan pratique: il est beaucoup plus facile de maintenir un contenu qui est divisé comme ceci et non pas mélangé.
La séparation des préoccupations est également bénéfique en termes de compréhension. Nous, êtres humains, traitons généralement une page Web grâce à la manière dont elle est diffusée via un navigateur. Mais il existe d'autres moyens d'accéder à une page Web, notamment par les robots des moteurs de recherche, qui explorent la structure brute des pages afin de classer et de classer avec précision le contenu..
Nous avons ensuite des technologies d'assistance telles que les lecteurs d'écran. Les lecteurs d'écran interprètent les interfaces des ordinateurs et disent ce qu'ils voient, aidant ainsi les malvoyants à les utiliser. Les pages Web sont un exemple d'interface, et les lecteurs d'écran lisent le contenu tel qu'il leur est présenté dans le balisage. Un balisage confus et désordonné entraîne logiquement des problèmes d'accessibilité, même si le site Web affiché peut sembler parfait dans le navigateur.
Remarque: Il est important de garder à l’esprit que, même si ce tut se concentre sur les malvoyants, il optimise accessibilité avantages pour les utilisateurs restreints également (moteur, auditif, cognitif, etc.)
Sémantique
Même si vous n'avez pas compris ce que l'on entend par Sémantique vous aurez probablement entendu le terme beaucoup jeté. La sémantique dans la conception Web se réfère à la sens donné au balisage HTML. L’abandon des mises en page basées sur des tableaux a entraîné d’importantes améliorations dans la valeur sémantique du balisage (X) HTML; les cellules de tableau ont été remplacées par
tags (divisions), listes non ordonnées (
) est devenu banal, et nous avons commencé à utiliser des choses comme (emphase) au lieu de (italique) pour éloigner davantage notre balise du code de présentation.
Actuellement, la communauté des concepteurs de sites Web se familiarise avec le balisage HTML5 et, grâce à un large éventail de nouveaux éléments, nous pouvons décrire notre balisage de manière plus détaillée que jamais. La navigation principale prend toujours la forme d’une liste non ordonnée, mais elle peut maintenant vivre imbriquée dans balises, qui décrivent parfaitement ce qu'il fait là.
Pour obtenir de l'aide sur le HTML5 sémantique approprié, consultez les informations disponibles sur HTML5Doctor.com..
Avez-vous déjà utilisé un lecteur d'écran??
Il est surprenant de constater que peu de concepteurs de sites Web ont utilisé des lecteurs d’écran. Tester votre travail du point de vue d'une personne ayant une déficience visuelle peut être aussi gratifiant que frustrant, mais je vous recommande de l'essayer au moins une fois. Les outils de lecture d'écran peuvent être difficiles à comprendre, alors assurez-vous de reconnaître la différence entre une accessibilité médiocre et une simple incapacité à utiliser le logiciel.?
Les lecteurs d'écran utilisent une navigation alternative (via le clavier) pour mettre en évidence, traiter et interagir avec divers éléments à l'écran. Il peut être difficile de commencer par sauter entre les commandes de votre navigateur et celles d’une page Web! Cependant, une fois que vous aurez compris comment utiliser les outils, l’accessibilité (in) de votre balisage deviendra claire.
Il existe plusieurs exemples couramment utilisés. En voici quelques exemples:
MÂCHOIRES
NVDA
Yeux de fenêtre
SAToGo
Voix off
Remarque: Fait intéressant, selon une étude démographique réalisée par webaim.org, la plus grande partie des utilisateurs de lecteurs d'écran citent Internet Explorer comme le navigateur qu'ils utilisent couramment pour lire des pages Web. L'interprétation de Microsoft de la spécification CSS ne pas gêner, je suppose?
Exemple de balisage
Je reçois souvent des didacticiels pour la création de pages Web qui, bien qu’ils soient parfaitement compatibles avec le navigateur et utilisent le doctype correct, laissent souvent les choses en place pour HTML5. C'est dommage, car il ne faut pas beaucoup d'efforts pour intégrer un balisage sémantique HTML5.
Commençons par un exemple de document. Pour commencer, débarrassez-vous de tout doctype qui ressemble à ceci:
Pour un HTML5 valide, nous n’avons besoin de rien de plus complexe:
Développons maintenant le reste de notre page Web de base:
Qu'est-ce que votre balisage vous dit?
Qu'est-ce que votre balisage vous dit?
Accueil
Plus de fromage
Plus de babouins
Droits d'auteur ? Ian Yates 2011
Ceci est assez typique de la façon dont nous aurions structuré une page avant que les éléments HTML5 ne nous dirigent. C'est parfaitement bien, et peut être coiffé sans aucun problème réel.
Nous avons un maison principale div, qui est elle-même imbriquée dans un emballage div. Dans maison principale nous trouvons quelques divs d’articles, et nous allons compliquer les choses dans une seconde en y plantant encore plus de divs? regarde ça?
Qu'est-ce que votre balisage vous dit?
Qu'est-ce que votre balisage vous dit?
Accueil
Plus de fromage
Plus de babouins
Histoire du fromage du Wisconsin
"Fromages" avec la permission de Graeme Maclean sur Flickr
L'histoire de l'industrie laitière du Wisconsin a ses racines dans la préhistoire. La nature a ouvert la voie à la région laitière américaine au cours de la dernière période glaciaire, lorsque les glaciers ont traversé ce qui est maintenant le Wisconsin. Comme ils se sont retirés, le massif montagnes de glace laissées derrière une campagne de collines et de pâturages luxuriants.
Des millions d'années plus tard, lorsque les immigrants européens ont émigré vers l'ouest, ils ont découvert le cœur de la nation, ce qui a rappelé à beaucoup de leurs pays d'origine. Les conditions climatiques convenaient bien à l'agriculture et, au départ, les agriculteurs cultivaient du blé, du houblon et d'autres céréales. La production laitière a suivi naturellement et les producteurs laitiers ont rapidement produit une abondance de lait de qualité supérieure. Pour conserver l'excès de lait, les agriculteurs ont fabriqué du fromage. Le passage de la production de fromage à usage familial à la fabrication du fromage pour la vente a été une étape courte. Cependant, la production commerciale de fromage dans le Wisconsin a commencé à petite échelle.
Tiré de www.eatwisconsincheese.com
Systèmes sociaux au sein d'une troupe de babouins
"Fesses de babouin" avec la permission de Prakhar Amba sur Flickr
La plupart des babouins vivent dans des troupes hiérarchisées. La taille des groupes varie entre 5 et 250 animaux (souvent environ 50), selon les circonstances, en particulier l'espèce et la période de l'année. La structure au sein de la troupe varie considérablement entre les babouins hamadryas et les espèces restantes, parfois appelées collectivement babouins de la savane..
Les babouins hamadryas apparaissent souvent dans de très grands groupes composés de nombreux harems plus petits (un mâle avec environ quatre femelles), auxquels sont recrutées des femelles originaires de la troupe alors qu'elles sont encore trop jeunes pour se reproduire. Les autres espèces de babouins ont une structure plus promiscueuse avec une hiérarchie de dominance stricte basée sur la matriline. Le groupe de babouins hamadryas comprendra généralement un homme plus jeune, mais il ne tentera pas de s'accoupler avec les femelles à moins que le plus vieux soit enlevé..
Tiré de wikipedia.com
Droits d'auteur ? Ian Yates 2011
Tu vois? À chaque article div, nous avons ajouté une image, imbriquée dans un div afin de la lier à sa légende, plus un autre div qui agit comme un pied de page au bas.
Ajoutons maintenant quelques présentation; certains styles CSS. Tout d’abord, quelques styles de réinitialisation, repris intégralement d’Eric Meyer:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licence: none (domaine public) * / html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, bloc, citation, pre, a, abbr, acronyme, adresse, grand, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, fieldset, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, pied, thead, tr, th, td, article, à part, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie, ruby, section, résumé, heure, marque, audio, vidéo margin: 0; rembourrage: 0; bordure: 0; taille de police: 100%; font: hériter; alignement vertical: ligne de base; / * Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs * / article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;
Ensuite, nous ajouterons nos propres styles. Vous remarquerez quelques polices extraterrestres extraites de l’API des polices de Google et appliquées à l’aide de @ font-face. Le reste s'explique de lui-même, et le résultat montre peu de complications.
En moins de 200 lignes de CSS (non condensées), nous avons bien stylisé notre page. Rien de trop spécial dans les en-têtes et les éléments de menu, une belle taille de police (100% de la valeur par défaut du navigateur, généralement 16 px) et des images dont les conteneurs flottent à droite. Le plus complexe des styles est sans doute les ombres à double case sur les éléments de menu et les conteneurs d’images. Quoi qu'il en soit, le style ne fait pas partie de ce tut, mais n'hésitez pas à le choisir à votre guise.
Accessibilité améliorée
Nous aurions pu améliorer l'accessibilité de notre balisage dans plusieurs domaines. Pour commencer, le les balises manquent alt attribut. Naviguer sur le site dans des circonstances normales soulèverait ce problème, mais quiconque dont les images sont désactivées ne se rendrait pas compte qu'il y ait jamais eu une image. Les lecteurs d’écran indiqueront au mieux qu’une image est présente, mais ils ne peuvent rien dire de plus à l’utilisateur..
Utilisez le texte alternatif comme une chance de décrire l'image. Cela profitera aux utilisateurs, aux moteurs de recherche, et donc aussi à vous..
Le document manque également gravement de signification sémantique, les utilisateurs parcourant votre page à l'aide d'un lecteur d'écran ne peuvent déterminer aucune valeur hiérarchique dans le texte. Une div avec une classe de bas de page ne dit absolument rien du contenu à personne (sauf vous), il permet simplement à votre fichier CSS de le cibler.
En termes de maintenance, il est également difficile de distinguer tous les
éléments présents; leur nombre impose par ailleurs la nécessité de commenter vos derniers éléments. Essayer de maintenir l'ordre dans les sections de balisage comme ceci est délicat!
Remplaçons ensuite certaines des balises div superflues par des éléments plus sémantiques:
Au revoir?
Qu'est-ce que votre balisage vous dit?
Accueil
Plus de fromage
Plus de babouins
? Bonjour
Qu'est-ce que votre balisage vous dit?
Au revoir?
Histoire du fromage du Wisconsin
"Fromages" avec la permission de Graeme Maclean sur Flickr
L'histoire du Wisconsin? pâturages luxuriants.
Des millions d'années plus tard? une petite échelle.
Tiré de www.eatwisconsincheese.com
? Bonjour
Histoire du fromage du Wisconsin
"Fromages" avec la permission de Graeme Maclean sur Flickr
L'histoire du Wisconsin? pâturages luxuriants.
Des millions d'années plus tard? une petite échelle.
Voici le balisage HTML complet, complété par une sémantique glorieuse:
Qu'est-ce que votre balisage vous dit?
Qu'est-ce que votre balisage vous dit?
Histoire du fromage du Wisconsin
"Fromages" avec la permission de Graeme Maclean sur Flickr
L'histoire de l'industrie laitière du Wisconsin a ses racines dans la préhistoire. La nature a ouvert la voie à la région laitière américaine au cours de la dernière période glaciaire, lorsque les glaciers ont traversé ce qui est maintenant le Wisconsin. Comme ils se sont retirés, le massif montagnes de glace laissées derrière une campagne de collines et de pâturages luxuriants.
Des millions d'années plus tard, lorsque les immigrants européens ont émigré vers l'ouest, ils ont découvert le cœur de la nation, ce qui a rappelé à beaucoup de leurs pays d'origine. Les conditions climatiques convenaient bien à l'agriculture et, au départ, les agriculteurs cultivaient du blé, du houblon et d'autres céréales. La production laitière a suivi naturellement et les producteurs laitiers ont rapidement produit une abondance de lait de qualité supérieure. Pour conserver l'excès de lait, les agriculteurs ont fabriqué du fromage. Le passage de la production de fromage à usage familial à la fabrication du fromage pour la vente a été une étape courte. Cependant, la production commerciale de fromage dans le Wisconsin a commencé à petite échelle.
Systèmes sociaux au sein d'une troupe de babouins
"Fesses de babouin" avec la permission de Prakhar Amba sur Flickr
La plupart des babouins vivent dans des troupes hiérarchisées. La taille des groupes varie entre 5 et 250 animaux (souvent environ 50), selon les circonstances, en particulier l'espèce et la période de l'année. La structure au sein de la troupe varie considérablement entre les babouins hamadryas et les espèces restantes, parfois appelées collectivement babouins de la savane..
Les babouins hamadryas apparaissent souvent dans de très grands groupes composés de nombreux harems plus petits (un mâle avec environ quatre femelles), auxquels sont recrutées des femelles originaires de la troupe alors qu'elles sont encore trop jeunes pour se reproduire. Les autres espèces de babouins ont une structure plus promiscueuse avec une hiérarchie de dominance stricte basée sur la matriline. Le groupe de babouins hamadryas comprendra généralement un homme plus jeune, mais il ne tentera pas de s'accoupler avec les femelles à moins que le plus vieux soit enlevé..
Alors, quelles sont les améliorations que nous avons apportées? En plus d'ajouter des attributs alt à nos images, nous avons utilisé les sept éléments suivants:
: Nous avons utilisé cela en haut de notre document où se trouvent notre rubrique principale et notre navigation. Nous pourrions également utiliser cette balise comme en-tête pour les sous-sections du balisage (telles que les articles).
: Cette balise héberge tout ce qui fait office de navigation dans une page Web. Notre navigation principale est l'exemple parfait, mais les balises de navigation peuvent également envelopper la pagination (par exemple)..
: Nous n'avons qu'une section, mais c'est une excellente balise pour regrouper le contenu associé.
: Un article peut être décrit comme un bloc d’informations qui peut être indépendant du contenu qui l’entoure, sans perdre de sens. Dans notre cas, nous avons deux articles, chacun comprenant un titre, du texte, une accréditation et une image pertinente.
: La balise figure nous permet de contenir nos images, puis d’associer des méta-informations telles que?
: Notre légende a maintenant été placée de telle sorte qu'elle soit associée à l'image de son frère.
: Nous avons un pied de page au bas de notre page (hmmmm) mais, comme les balises d’en-tête, elles peuvent également être utilisées dans des sous-sections, comme nous l’avons démontré dans nos articles..
Essayez d'utiliser des éléments tels que ceux-ci chaque fois que vous le pouvez. Utilisez des balises div, bien sûr, mais seulement si vous ne pouvez pas penser à un élément sémantique plus approprié. En termes de style, vous ne pouvez pas vraiment vous tromper, et pour le moment, utiliser des éléments au mauvais endroit n’est pas un crime. Vous devez commencer quelque part, alors n'ayez pas peur d'utiliser des articles et des sections de manière imparfaite.
Avec quelques CSS légèrement édités, le résultat dans le navigateur est? pas différent.
Comment un lecteur d'écran le voit-il??
Voici notre conception, vue à travers les yeux de l'extension de lecteur d'écran de Google Chrome, et VoiceOver d'OSX.
Lorsque VoiceOver doit traiter une page Web entière (Ctrl-Option-A), il parcourt le DOM de manière séquentielle, en dictant le contenu qu'il rencontre. Les dernières versions vous permettent de spécifier des points sur vos pages Web favorites auxquelles vous pouvez accéder, mais que le curseur se trouve à la recherche d'un lien, d'une liste, d'un paragraphe ou d'une image, il le lit comme il le peut.
Nos efforts sont passés inaperçus!
Vous remarquerez peut-être, hormis la voix étrangement séduisante, que VoiceOver ne mentionne pas que notre navigation est placée dans une balise, et a complètement ignoré toute présence d'articles. Telle est la réalité de la situation actuelle; HTML5 n'est pas encore bien supporté sur les lecteurs d'écran, nos efforts sont passés inaperçus! De la même manière que les normes de balisage et de style sont lentement (mais sûrement) mises en œuvre par les éditeurs de navigateurs, les développeurs de lecteurs d'écran se retrouvent donc dans la même situation..
Pour vous tenir au courant de l'état de l'accessibilité HTML5 et du développement du lecteur d'écran, vous pouvez faire bien pire que garder un œil sur Bruce Lawson. Il insiste souvent sur la question, en blogue et en parle. Vous pouvez également consulter le site www.accessibleculture.org pour des tests réguliers des produits de lecteur d'écran..
Aide sous la forme de WIA-ARIA
WIA-ARI-QUOI?! La WIA (Web Accessibility Initiative) est une spécification qui aide les technologies d'assistance à interpréter le balisage HTML. Il utilise des attributs pour décrire les éléments de plusieurs manières:
Rôle: Le but d'un élément (oui, ok, son rôle)
Etat: Etat actuel d'un élément (case cochée)
Propriété: L'un des tonne de propriétés (telles que la position horizontale d'un curseur)
En particulier en ce qui concerne les États et les propriétés, vous pouvez imaginer qu’ils seraient autrement difficiles à interpréter par les technologies d’assistance. Nous pouvons ajouter des attributs ARIA (dans la limite des limites) à notre balisage et les valider de manière cruciale dans le cadre des spécifications HTML5..
WAI-ARIA est destiné à être une technologie de transition. Il clarifie la sémantique des technologies d'assistance lorsque les auteurs créent de nouveaux types d'objets, via un style et un script, qui ne sont pas encore pris en charge directement par le langage de la page. www.w3.org
Voici un exemple de la façon dont nous pourrions améliorer encore notre balisage - nous prenons ceci:
? et nous ajoutons ceci:
Encore une fois, c'est valide HTML5.
Nous avons ajouté un attribut de rôle de la navigation à notre nav élément, qui peut sembler contre-intuitif, mais pour le moment, cela aide. Certains lecteurs d'écran reconnaîtront désormais correctement notre navigation. Plus tard, lorsque la spécification HTML5 a été correctement adoptée par des périphériques de toutes sortes, l’élément nav impliquera un attribut ARIA de la navigation (et idem pour les autres éléments), ce qui rend inutile.
Nous pouvons également ajouter un rôle à notre en-tête:
Et enfin gagner notre article une reconnaissance méritée:
Pour plus de détails sur les rôles disponibles et leur utilisation, consultez l'introduction complète de Virginia DeBolt aux rôles ARIA..
Nous avons donc finalement mis à jour notre balisage pour améliorer l'accessibilité. Jetez un coup d'oeil à l'article fini, bien que pour remarquer toute différence réelle, vous devrez bien sûr le visualiser avec un lecteur d'écran approprié. Pour le moment, votre meilleur choix serait de tester avec JAWS, ou NVDA, car ils sont très appréciés pour leur gestion de la sémantique HTML5 et des attributs ARIA..
Conclusion
J'espère que cet article vous a aidé à mieux comprendre le rôle que vous pouvez jouer pour améliorer l'accessibilité sur le Web. Pratiquez la conception Web basée sur des normes, accordez une attention particulière au développement de technologies et, même si vos efforts ne peuvent pas encore être utilisés pleinement, vous êtes au moins sûr de l'avenir de votre travail. Merci d'avoir lu (ou écouté)!
Accentsconagua
Share
La démo 
