Expérience pratique avec ARIA éléments de la page d'accueil et navigation standard

Vous souhaitez rendre votre site plus accessible? Voulez-vous être le premier en ligne à la mise sur le marché de nouvelles interfaces en ligne? Ne cherchez pas plus loin que ARIA.

Cet ensemble de normes gérées par le W3C (Consortium World Wide Web) vous offre le meilleur des deux mondes en ajoutant un certain nombre d'attributs permettant au HTML d'être étendu de manière significative. Ici, nous allons passer en revue ce qu'est ARIA, voir comment il peut bénéficier d'un site Web d'information et passer en revue un cas d'utilisation étape par étape avec des exemples de code. Commençons!

ARIA Basics

ARIA (ou parfois WAI-ARIA) est l'acronyme d'un ensemble de normes d'accessibilité, appelées applications Internet riche accessibles pour l'accessibilité du Web. Vous pouvez en savoir plus sur les fondements de l'ARIA dans mon article précédent, mais passons maintenant en revue certains de ses piliers..

Définir des relations non traditionnelles

La majorité des sites Web sont construits à l'aide de HTML, qui relie principalement les éléments les uns aux autres de manière hiérarchique via des relations parent-enfant. Cette structure est idéale pour définir le contenu, mais ne permet pas de définir les interfaces utilisateur. Par exemple, dans de nombreux sites et applications Web, une zone de contenu est contrôlée par des boutons au sein d'un élément frère: les frères ont le même élément parent, mais en HTML, ils n'ont pas de relation directe. De ce fait, il devient difficile de définir quels éléments de l'interface utilisateur contrôlent quels éléments de contenu lors de l'utilisation de technologies d'assistance..

Cela se répercute également sur les nouvelles interfaces. Par exemple, si vous essayez de naviguer sur un site Web à l'aide d'un périphérique intelligent, il devient difficile lorsque les modifications d'éléments ne sont pas visibles..

ARIA vous permet de lier des éléments HTML en utilisant des attributs supplémentaires pour représenter ces types de contrôles..

Classification des éléments non rigides

Un autre inconvénient de HTML est son incapacité à séparer la structure de l'intention.

Par exemple, vous souhaiterez peut-être transformer un élément d'image en un bouton cliquable. Cependant, HTML définit encore largement cette image comme une simple image, et tout ce qui se passe au-delà se passe ailleurs.

Avec ARIA, l’intention peut être séparée de l’élément, ce qui permet de marquer les images en tant que boutons ou de définir un lien en tant qu’info-bulle. Cela donne plus de contrôle au développeur concernant l'interface utilisateur, créant des relations plus clairement définies.

Création de zones de repère

Outre le marquage des éléments dans l'interface utilisateur, ARIA donne également accès à l'attribut de rôle utilisé pour définir les zones d'une page. Par exemple, vous pouvez marquer votre menu principal en tant que navigation et la zone de contenu de votre article en tant que contenu principal. Cela facilite la navigation des utilisateurs dans les zones importantes de votre site et évite toute confusion pour les utilisateurs disposant de dispositions de site peu communes ou complexes..

Cas d'utilisation: Page d'accueil pour petites entreprises

Pour acquérir de l'expérience en ajoutant ARIA à un site, nous allons prendre une structure filaire d'un site qui pourrait être utilisé par une petite entreprise et mettre en œuvre nos attributs étape par étape..

Le fil de page que nous allons baliser

Pour des raisons de clarté, le code avec lequel nous allons travailler est allégé, avec suppression des classes CSS et de toutes les fonctionnalités d'un CMS..

La première chose que nous souhaitons faire est de diviser notre structure filaire en plusieurs parties afin de simplifier l’ajout de ARIA. Dans l'image ci-dessous, vous verrez que j'ai choisi de diviser le site en cinq parties principales: 

• la navigation
• contenu
• barre latérale
• formulaires de contact
• éléments d'interface utilisateur spécialisés

Dans notre cas, cela ressemble à ceci:

Les sections avec lesquelles nous allons travailler

Lorsque vous divisez votre site en zones comme celle-ci, nous recherchons deux choses. Le premier concerne les éléments majeurs pouvant être définis par un repère ARIA: bannière, navigation, élément principal, complémentaire, informations de contenu, recherche et formulaire. Celles-ci représentent les parties nécessaires de notre site et tout élément non nécessaire à son utilisation ne sera pas considéré comme un point de repère (par exemple, des publicités)..

La deuxième chose à rechercher concerne les éléments spécifiques qui doivent être clarifiés avec ARIA. Dans la plupart des cas, c'est assez simple (comme marquer une image en tant qu'image), mais pour certains éléments de l'interface utilisateur, cela peut être un peu compliqué..

Une fois que nous savons quels domaines doivent avoir mis en œuvre ARIA, nous pouvons commencer à les parcourir systématiquement. Commençons avec la navigation du site.

La navigation

Dans notre exemple, vous remarquerez que nous avons quelques types de navigation. Le premier est un menu comme sur la plupart des sites, listant quelques pages du site. Directement ci-dessous est un menu plus petit qui contient des options pour les utilisateurs.

Nous voulons les marquer avec le role = "navigation" attribut afin qu’ils puissent être facilement choisis comme menus du site. Cela conduit à la question: doivent-ils être regroupés dans un seul repère de navigation, ou marqués comme deux points de repère distincts?

Pour répondre à cette question dans vos propres projets, vous pouvez généralement vous poser deux questions:

1. L'intention de ces menus est-elle différente? Dans notre exemple, le menu supérieur navigue dans les pages de piliers du site, tandis que le menu plus petit se concentre sur les éléments dont un utilisateur connecté pourrait avoir besoin. Ces intentions sont différentes, il est donc logique de les séparer.

2. Les menus sont-ils dans le même élément parent? Je sais que cela semble contre-intuitif, car ARIA est conçu pour nous aider à surmonter ces types de restrictions relationnelles, mais dans ce cas, il s'agit moins de ce qui est possible que de ce qui convient à l'utilisateur. Avoir un seul menu défini, mais avec la moitié à un endroit et l’autre ailleurs, rend la navigation plus difficile.

Dans notre cas, nous allons traiter nos navigations comme deux points de repère distincts. Nous allons donc apporter quelques modifications au code. Pour commencer, nous avons juste notre code HTML de base:

 
 
 
Accueil
 
Sur
 
Prestations de service
 
Emplacement
 
Contactez nous
 
 
 
S'identifier
 
Compte
 
Réglages
 
 

Maintenant, nous allons l'annoter avec quelques points de repère.

La prochaine étape dans la définition de ces points de repère consiste à donner à l’utilisateur un indice sur l’intention de chaque menu. Si nous les laissons tous deux comme navigation sans autre information, cela rend simplement les choses plus difficiles à interpréter. Alors ajoutons-leur des étiquettes significatives en utilisant le aria-label attribut:

Au-delà de cela, nous voudrons ajouter des balises de rôle supplémentaires à notre menu pour que les utilisateurs sachent qu'il s'agit d'un menu et marquer chaque lien dans un élément de menu:

Zone de contenu

Passons maintenant à la zone de contenu. Ici, nous allons marquer le conteneur qui contient la totalité de notre contenu principal avec role = "main". Encore une fois, à titre de comparaison, voici notre code de démarrage. 

 
  
 Lorem… scelerisque… 
 
  Trouve le 
 

Et voici à quoi ça ressemble après avoir ajouté le "principale" point de repère.

 
  
 Lorem… scelerisque… 
 
  Trouve le 
 
 

Dans ce contenu, nous rechercherons tout élément dont l'intention ne correspond pas à la définition HTML..

Tout d'abord, nous allons nous occuper de l'image agissant comme un bouton en ajoutant le "bouton" rôle:

Ce lien qui active un modal est un peu plus compliqué, car il dépend de ce qu’il contient. Pour nous, nous allons dire que c'est une info-bulle:

scelerisque

Dans notre contenu principal, nous avons également un formulaire de recherche. Cela comporte une couche supplémentaire de complexité, en ce sens qu'il s'agit d'un formulaire de recherche utilisant des éléments HTML et qu'il constitue également un repère dans la zone de recherche. Nous le marquerions comme ceci:

 
  Trouve le 
 

Au-delà de cela, vous pouvez définir chaque élément avec sa balise ARIA appropriée. Pour la plupart des sites, cela peut représenter une charge de temps excessive pour le processus de développement, bien que, dans la plupart des systèmes de gestion de contenu, il puisse être automatisé. Dans les cas où cela ne peut pas être le cas, si la définition HTML d'un élément correspond à l'intention d'utilisation, il peut alors être considéré comme une priorité basse lors de la mise en œuvre d'ARIA. Voici à quoi ressemble la zone de contenu principale après toutes ces modifications:

 
  
 Lorem… scelerisque… 
 
 
  Trouve le 
 
 
 

Barre latérale

La barre latérale d'un site peut prendre de nombreuses formes. Dans notre cas, il fournit du contenu supplémentaire lié au site, avec une liste de messages connexes en bas..

Voici le balisage de départ pour la barre latérale:

Pour définir le contenu, nous voudrons lui donner la "complémentaire" rôle, en indiquant aux utilisateurs que les informations contenues dans la barre latérale constituent un contenu supplémentaire lié au contenu principal. Cela peut ressembler à ceci:

Les publications connexes ci-dessous pourraient être considérées comme une forme de navigation, permettant aux utilisateurs d’explorer davantage les publications du site. Nous voudrons marquer avec un "la navigation" rôle, et lui donner une étiquette appropriée, comme ceci:

La barre latérale de chaque site est différente et peut nécessiter une combinaison différente de rôles et de points de repère. Si votre barre latérale comporte une publicité, il est préférable de ne pas marquer cet élément. S'il y a un formulaire de recherche dans votre barre latérale, marquez-le également avec le rôle approprié. Tous les menus qui apparaissent dans une barre latérale doivent suivre le même schéma que celui décrit dans la section de navigation: 

• une "la navigation" point de repère
• une "menu" rôle du conteneur de menu
• rôles de "élément du menu" pour chacun des éléments imbriqués

Voici à quoi ressemble notre dernière barre latérale:

Traitement des formulaires de contact

Enfin, au bas de notre page se trouve un formulaire d’appel à l’action, demandant le nom de l’utilisateur et son adresse électronique, avec un bouton de soumission standard ci-dessous. En ce qui concerne les formulaires, vous devez garder à l’esprit trois points:

1. Donner au formulaire le rôle déterminant de "forme": comme le formulaire est une partie importante du site, nous devons le rendre facile pour les utilisateurs. Nous le faisons en lui attribuant un rôle historique

2. Attribuez des rôles correspondants aux éléments. Les formulaires constituent un espace commun pour les intentions et les définitions HTML qui ne correspondent pas. Ajoutez des rôles ARIA si nécessaire, notamment en ce qui concerne les cases à cocher, les curseurs, les info-bulles et autres éléments pouvant être implémentés de plusieurs manières..

3. Faites correspondre les étiquettes avec les éléments appropriés. HTML gère cela de manière basique, vous permettant d'utiliser le élément pour associer une étiquette à une entrée. Les formulaires peuvent facilement avoir une structure plus complexe qui l’empêche de fonctionner; heureusement, nous pouvons résoudre ce problème avec le aria-labelledby attribut.

Voyons à quoi ressemble notre code mis à jour:

 
 Zone de texte   Choix n ° 1 Choix n ° 2  Case à cocher