A propos de l'auteur

Bruce travaille sur l'accessibilité, les normes Web et les navigateurs depuis 2001. C'est pourquoi il a l'air si mauvais. Vous pouvez le suivre sur @brucel, ou lisez son …
Plus à propos
Bruce
Lawson

Affichage visuel des en-têtes imbriqués dans les navigateurs

donne l'impression qu'ils affectent une hiérarchie logique à ces en-têtes. Cependant, ceci est purement visuel et n'est pas communiqué aux technologies d'assistance. À quoi sert

et comment les auteurs doivent-ils annoter les titres qui sont extrêmement importants pour les utilisateurs d'AT?

Il y a quelques jours, je discutais avec des amis, dont l'un m'a demandé la différence entre et

en HTML. C'est l'un des éternels mystères du développement Web, là-haut avec «pourquoi est-ce un espace blanc: nowrap, pas un espace blanc: no-wrap?» Et «pourquoi le CSS« gris »est-il une couleur plus foncée que« darkgray »? ".

J'ai donné ma réponse habituelle: pensez à

pas seulement comme un article de journal ou un article de blog, mais comme un article vestimentaire – une entité discrète qui peut être réutilisée dans un autre contexte. Votre pantalon est donc un article, et vous pouvez le porter avec une tenue différente; votre chemise est un article et peut être portée avec un pantalon différent; vos bottines en cuir verni mi-longues sont un article (vous n'en porteriez pas une seule, n'est-ce pas?).

La spécification dit:

"L'élément article représente une composition complète ou autonome dans un document, une page, une application ou un site et qui est, en principe, distribuable ou réutilisable indépendamment, par exemple en syndication. Cela peut être un article de forum, un article de magazine ou de journal, une entrée de blog, un commentaire soumis par l'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. »

Donc, une page d'accueil avec une liste de billets de blog serait un

élément enveloppant une série de éléments, un pour chaque article de blog. Vous utiliseriez la même structure pour une liste de vidéos (pensez YouTube) avec chaque vidéo enveloppée dans un

, une liste de produits (pensez Amazon) et ainsi de suite. N'importe lequel de ces

s est conceptuellement syndicable – chacun peut être autonome sur sa propre page dédiée, dans une annonce sur une autre page, en tant qu'entrée dans un flux RSS, etc.

WatchOS d'Apple contient Reader qui utilise le

élément pour connaître le contenu principal de votre page. Apple dit:

"Nous avons amené Reader à watchOS 5 où il s'active automatiquement lorsque vous suivez des liens vers des pages Web contenant du texte. Il est important de vous assurer que Reader extrait les éléments clés de votre page Web en utilisant le balisage sémantique pour renforcer la signification et la finalité des éléments du document. Voyons un exemple. Tout d'abord, nous indiquons quelles parties de la page sont les plus importantes en l'enveloppant dans une balise d'article. »

Combiner

avec les microdonnées HTML5 aide Reader à construire l'affichage optimal pour les petits écrans de montre:

«Plus précisément, le fait de placer ces éléments d'en-tête dans l'article garantit qu'ils apparaissent tous dans Reader. Reader stylise également chaque élément d'en-tête différemment en fonction de la valeur de son attribut itemprop. En utilisant itemprop, nous pouvons nous assurer que l'auteur, la date de publication, le titre et le sous-titre figurent bien en évidence. "

Et alors

?

Mon conseil habituel continue: ne vous embêtez pas avec

ou s'inquiéter de la façon dont il diffère de

. Il a été inventé comme un wrapper générique pour les titres afin que le navigateur puisse déterminer le contour du document HTML5.

Le quoi? L'algorithme de contour de document est un moyen d'utiliser une seule balise de titre –

– et le faire «devenir» comme par magie le bon niveau de cap (par exemple se transformer en

,

, etc.), selon la profondeur d'imbrication des éléments de section HTML5:

,

, etc.

Donc, par exemple, voici ce que vous avez tapé dans votre CMS:

Mon article fabuleux

Lorem Ipsum Trondant Fnord

Cela fonctionne parfaitement lorsqu'il est affiché comme un article autonome. Mais qu'en est-il de votre page d'accueil, qui est une liste de vos derniers articles?

Mes derniers articles

Mon fabuleux article

Lorem Ipsum Trondant Fnord

Un autre magnum opus

Magnum solero paddlepop

Dans cet exemple, selon la spécification, le

s à l'intérieur du les éléments «deviennent» logiques

s, car

, comme

, est un élément de coupe.

Remarque: Ce n'est pas une nouvelle idée. En 1991, Sir Oncle Timbo a écrit:

«Je préférerais en fait, au lieu de

,

, etc. pour les rubriques [those come from the AAP DTD] avoir un emboîtable
élément, et un générique qui, à n'importe quel niveau des sections, produirait le niveau de titre requis. »

Malheureusement, cependant, aucun navigateur n'implémente le contour HTML5, il est donc inutile d'utiliser

. À un moment donné, le lecteur d'écran JAWS a tenté d'implémenter l'algorithme de description de document (dans IE, mais pas sur Firefox), mais l'a implémenté de manière boguée. Il semble que les développeurs de navigateurs ne soient tout simplement pas intéressés (plus de détails sordides dans la section Lectures complémentaires pour les vrais anoraks).

"Mais," intervint un autre ami dans la conversation, "maintenant les navigateurs affichent différentes tailles de police en fonction de la profondeur

est imbriqué dans

s », et a continué à le prouver. L'esprit soufflé!

Voici une démo similaire. La colonne de gauche montre quatre

s, imbriqués dans des sections; la colonne de droite montre un,

,

,

,

sans emboîtement. La capture d'écran de Firefox montre que l'imbriqué

s par défaut à la même police que le traditionnel

Mots clés:

Capture d'écran montrant que les éléments h1 imbriqués et les éléments de titre réels s'affichent dans les mêmes tailles
Une comparaison de

s imbriqué dans

éléments et

,

,

,

(Grand aperçu)

Les résultats sont les mêmes dans Chrome, les dérivés de Chrome tels que Edge beta pour Mac et Safari sur Mac.

Cela signifie-t-il que nous devrions tous commencer à utiliser

comme notre seul élément de titre, l'emboîtant dans

s?

Non, car ce n'est qu'un changement dans le style visuel des h1s. Si nous ouvrons l'inspecteur d'accessibilité de Firefox dans devtools, nous pouvons voir que le texte "niveau 2" est conçu pour ressembler à un H2, mais est toujours défini sur "niveau 1" – l'arborescence d'accessibilité n'a pas été modifiée pour être de niveau 2.

Capture d'écran de l'inspecteur d'accessibilité firefox sélectionnant un élément h1 imbriqué
L’Inspecteur d’accessibilité de Firefox montre qu’un

apparaît visuellement la même chose qu'un

mais son niveau aria est mal réglé sur "1", pas sur "2" (Grand aperçu)

Comparez cela avec le Real H2 dans la colonne de droite:

Capture d'écran de l'inspecteur d'accessibilité de Firefox sélectionnant un véritable élément H2
L'inspecteur d'accessibilité de Firefox montre qu'un véritable

a un niveau aria calculé de «2», ce qui est correct (Grand aperçu)

Cela montre que l'arborescence d'accessibilité a été correctement informée qu'il s'agit d'un titre de niveau 2. En réalité, Mozilla a essayé communiquer le niveau calculé à l'arbre d'accessibilité:

«Nous avons expérimenté un peu avec ça … mais nous avons dû revenir en arrière parce que les membres de notre équipe a11y se sont plaints de trop de régressions (baisse accidentelle

niveaux et autres).

Pour les utilisateurs de technologies d'assistance, une bonne hiérarchie des titres est vitale. Comme le montre le huitième sondage auprès des utilisateurs de lecteurs d'écran WebAIM,

«L'utilité de structures de titres adéquates est très élevée, 86,1% des répondants jugeant les niveaux de titres très ou assez utiles.»

Par conséquent, vous devez continuer à utiliser

jusqu'à

et ignorer section.

Ne jamais dire jamais

"Mais .." vous pourriez maintenant bafouiller avec indignation, "il y a un

directement sur cette page! ”. Et vous auriez raison, cher lecteur. Le «résumé rapide» est enveloppé dans un

, pour des raisons d'accessibilité. Lorsque l'utilisateur de lecteur d'écran Léonie Watson a donné son webinaire «Comment un utilisateur de lecteur d'écran accède au Web», elle a souligné un domaine où le balisage de pourrait être modifié pour améliorer son expérience.

Comme vous pouvez le voir sur la capture d'écran, les articles Smashing sont précédés d'un résumé rapide, suivi d'une ligne horizontale séparant le résumé de l'article proprement dit.

Capture d'écran du haut d'un article de
Le «Résumé rapide» de Smashing est séparé de son article complet par une ligne horizontale. (Grand aperçu)

Mais le séparateur est purement décoratif, donc Léonie ne pouvait pas dire où le résumé se termine et où l'article commence. Elle a suggéré une solution: nous avons enveloppé le résumé dans un

élément:

Texte récapitulatif

Dans la plupart des lecteurs d'écran, un

L'élément n'est pas annoncé à moins qu'il n'ait un nom accessible. Dans ce cas, le texte de l'étiquette aria. Maintenant, son lecteur d'écran a annoncé «Quick summary region», et après le résumé «Quick summary region end». Ce simple balisage permet également à un utilisateur de lecteur d'écran de sauter le résumé s'il le souhaite.

Nous aurions pu utiliser un simple

mais ensuite, comme l'écrit Marco Zehe,

"En règle générale, si vous étiquetez quelque chose via aria-label ou aria-labelledby, assurez-vous qu'il a un widget ou un rôle de repère approprié."

Donc plutôt que d'utiliser

, nous avons choisi

car cela a un rôle intégré de région et la loi infaillible de ARIA ™ de Bruce s'applique: battements intégrés boulonnés. Vraiment.

Conclusion

J'espère que vous êtes reparti avec ces plats à emporter:

  • N'utilisez pas beaucoup de

    s. Faire

    l'en-tête principal de votre page, puis utilisez

    ,

    ,

    , etc. dans une hiérarchie appropriée sans sauter de niveau.


  • peut être utilisé avec aria-label pour signaler à un utilisateur de lecteur d'écran où une sous-partie particulière d'un article commence et se termine. Sinon, oubliez-le ou utilisez un autre élément, tel que

  • ,
    ,

    et


  • ce n'est pas seulement pour les articles de blog – c'est pour tout ce qui est autonome. Il aide également WatchOS à afficher correctement votre contenu.

Je reconnais avec gratitude Léonie WatsonAide à écrire cet article. Toute erreur est entièrement de sa faute.

Lectures complémentaires

  • «Titres et sections» HTML 5.2
    Recommandation du W3C
    (14 déc. '17)
    Notez son avertissement: «Il n'y a actuellement aucune implémentation native connue de l'algorithme hiérarchique… Par conséquent, l'algorithme hiérarchique ne peut pas être utilisé pour transmettre la structure du document aux utilisateurs. Les auteurs doivent utiliser le rang des en-têtes (h1-h6) pour transmettre la structure du document. »
  • "Il n'y a pas d'algorithme de présentation de document", Adrian Roselli
    Tous les détails sanglants de la façon dont la spécification de l'algorithme de sectionnement a changé.
  • "ARIA en HTML", Brouillon de l'éditeur du W3C (19 décembre 19)
    Règles à suivre si vous vous retrouvez à ajouter des rôles et des attributs ARIA au HTML.
  • La valeur pratique du HTML sémantique », Bruce Lawson
    Mon propre article, un lien vers des détails sur la façon dont WatchOS utilise HTML5 et les microdonnées.
Smashing Editorial
(rail)

Leave a Comment