Vous souhaitez rendre votre site plus accessible? Ou peut-être souhaitez-vous faciliter la navigation sur l'ensemble de votre site à l'aide de navigateurs et d'autres interfaces? En utilisant ARIA, vous pouvez faire les deux. Jetons un coup d'œil à ce qu'est ARIA et à ses avantages pour un site de commerce électronique. Nous allons aussi passer en revue quelques exemples étape par étape..

Qu'est-ce que ARIA??

WAI-ARIA est l'abréviation d'Applications Rich Internet pour Web Accessibility Initiative. Cette initiative prend la forme d'un ensemble de directives et d'attributs conservés par le W3C. En utilisant ces attributs, nous pouvons créer des relations entre les éléments de notre site qui ne peuvent pas être exprimées via HTML uniquement. Le plus important pour notre utilisation ici est que nous pouvons définir des relations d'élément en dehors de la relation parent-enfant et connecter plus clairement des éléments d'interface utilisateur à nos utilisateurs..

À ce stade, il serait peut-être intéressant de consulter notre document d’introduction sur ARIA afin d’en actualiser certains fondements..

Ajouter ARIA au commerce électronique

Auparavant, nous avions expliqué comment appliquer ARIA à un site Web général ressemblant à une page d’accueil commune pour les petites entreprises. Cette fois-ci, nous allons examiner de plus près comment ARIA peut améliorer l'expérience utilisateur pour les grands sites de commerce électronique..

Nous allons nous concentrer sur quatre domaines clés du commerce électronique qui posent des situations uniques: les pages de produits, les pages de catégories (ou les pages d'agrégat de produits), la navigation à plusieurs niveaux et la navigation par facettes. Nous utiliserons ces deux structures filaires pour nous guider tout au long du processus:

Une maquette de produit très basiqueExemple de maquette de page de liste de produits

Se préparer pour ARIA

Dans le cas de la plupart des sites Web, l'ajout d'ARIA est un processus assez simple. Vous définissez les éléments de votre site, les décomposez en points de repère et en éléments, puis vous ajoutez le code nécessaire..

Nous allons suivre un processus similaire avec notre site de commerce électronique, mais nous avons maintenant une nouvelle couche de complexité. Compte tenu de la complexité des sites de commerce électronique, ARIA peut devenir un véritable terrier dans de nombreux cas. S'il est important d'améliorer autant que possible l'accessibilité de votre site, nous rencontrons malheureusement souvent des contraintes commerciales. Pour cette raison, nous voudrons faire un peu plus de planification dès le départ, en donnant la priorité à chacun de nos ajouts à ARIA..

En établissant cette hiérarchisation, nous pouvons d’abord améliorer les aspects les plus importants de notre site, afin de rendre l’expérience utilisateur la meilleure possible dans les délais impartis..

Commençons par regarder quelques pages de produits.

ARIA pour les pages produits

Page d'agrafe pour tout site de commerce électronique, ces pages présentent généralement un produit, ses variantes disponibles et un moyen d'ajouter l'article à un panier. Chacun de ces éléments interactifs doit être considéré séparément.

Décomposons notre page produit comme suit: informations de base sur le produit, éléments interactifs qui affectent le produit, bouton Ajouter au panier et section de contenu développée..

Si nous devions donner la priorité à la mise en œuvre sur cette page, nous souhaiterions la regrouper de la manière suivante:

1. Informations de base sur le produit, éléments interactifs, bouton Ajouter au panier
2. Contenu produit élargi

Le principal facteur en jeu ici est quelque chose dont nous avons parlé dans un article précédent: ARIA aide à définir l'intention d'un élément. Dans le cas du contenu développé, la plupart des éléments HTML utilisés ont des éléments avec une signification sémantique et une intention qui correspondent. Cela signifie que s'il est utile de mettre des informations ARIA supplémentaires si possible, il est probablement moins important que de remplir les trois autres domaines..

Informations sur le produit de base

Commençons par ajouter ARIA à nos informations produit de base. Ceci est assez simple en raison de la simplicité des éléments utilisés ici. Le code ressemble à ceci:

 
 
  
 
 
Un joli sac
 
Taille du sac:
100x150mm
  marron Noir   Ajouter au panier 
 

Pour commencer, nous allons ajouter un rôle à la division principale et une relation entre l'image et la rubrique du titre du produit.. 

 
  
 
 
Un joli sac
… 
 

Éléments de produit interactifs

C'est ici que les pages de produits peuvent devenir un peu délicates. Les produits sur un site de commerce électronique peuvent avoir différents types de variations. Au-delà des types disponibles, leur nombre pouvant être utilisé simultanément ajoute une complexité supplémentaire. Dans notre exemple, trois éléments entrent en jeu: la taille, la couleur et la quantité..

Jetons un coup d'oeil à comment vous pouvez marquer cela. Voici le code des éléments de sélection et de case à cocher améliorés par ARIA:

  marron Noir  

Bouton Ajouter au panier

Le bouton de panier est similaire à un bouton standard, mais nous allons faire de notre mieux pour l’étiqueter plus clairement que d’autres:

Ajouter au panier

Contenu du produit étendu

Enfin, la zone de contenu développée est traitée comme une zone de contenu typique. Toutefois, en fonction des pages de votre produit, il peut être judicieux de séparer les principaux repères de contenu de vos repères de contenu supplémentaires. Les onglets ajoutent également une couche supplémentaire au code. Voici comment nous le ferions dans notre exemple:

 
 
Information sur le produit
 
 
 Plus d'informations sur le produit… 
 

Ajouter ARIA aux pages de catégorie

Alors que les pages de produits peuvent être considérées comme une forme alternative de pages de contenu à bien des égards, les pages de catégories d'un site, également appelées pages de liste de produits (PLP), sont un tout autre genre. Ils fonctionnent comme une grande structure de navigation, permettant aux utilisateurs de trier des centaines voire des milliers de produits..

Cela les rend de plus en plus complexes, d'autant plus que des couches de contenu et des filtres supplémentaires sont ajoutés (nous parlerons de navigation à facettes et de filtres dans la section suivante). Regardons les deux domaines principaux de notre PLP en dehors des filtres: les blocs de produit et la pagination.

Voici notre cadre de code de départ:

Page de liste de produits
 
 
Tri de couleur
 Rouge vert noir 
Tri par taille
 Grand petit 
 
 
 
Un joli sac
  Ajouter au panier 
… 
 
 1 2 3… Dernier 

Gestion de la pagination

La pagination est le nom donné aux petits liens au bas de nos listes de produits ici. Généralement, ils sont représentés par des chiffres ou des flèches, mais ils peuvent prendre diverses formes. Du côté HTML, les liens de pagination ressemblent aux liens ordinaires. Nous dirons que notre contrôle des listes de produits sans rediriger vers une autre page.

Pour faire savoir qu'il contrôle une zone de contenu de cette manière, nous devons la déclarer en tant que contrôleur, définir ce qu'elle contrôle, puis marquer cette zone de contenu comme en direct. Voici à quoi cela ressemble dans notre cas:

… 
 

Lorsque nous créons notre espace live ici, nous utilisons le "poli" paramètre mis à disposition par ARIA. Si vos modifications sont pertinentes et que l'utilisateur doit réagir rapidement, ou si vous devez définir des priorités parmi plusieurs zones actives, vous pouvez utiliser la valeur. "assertif" ainsi que.

Marquage des éléments répétitifs

La complexité de la navigation intensive au sein des listes de produits constitue un défi unique associé aux pages de destination des produits. D'un point de vue visuel, il peut être assez facile de regrouper les informations, en utilisant des indices visuels pour déterminer quelle information s'applique à quel produit..

Cela avec ARIA comporte un peu plus de couches que les applications précédentes que nous avons couvertes. Marquer un bouton «Acheter maintenant» sur un bouton standard peut créer de la confusion quand il y a 20 de ces boutons sur une page. Pour résoudre ce problème, nous devons créer des liens clairs entre chaque produit et ses éléments associés..

Voici comment nous allons faire cela:

 
 
Un joli sac
  Ajouter au panier 
… 

Bien que cela aide un peu à clarifier les relations pour l'utilisateur, ce n'est pas la meilleure implémentation. Un meilleur moyen serait de générer dynamiquement une étiquette aria en concaténant l'élément product-title avec une phrase supplémentaire telle que "ajouter au panier"..

Utiliser ARIA avec la navigation à facettes

La navigation par facettes fait référence aux filtres et aux options couramment affichés sur les sites de commerce électronique, ce qui vous permet d'affiner vos résultats de recherche. Ceux-ci viennent dans beaucoup de saveurs, de tailles à la couleur et au-delà. Pour notre exemple, nous allons faire deux hypothèses:

1. Notre navigation à facettes met à jour les produits en direct sur la page. Ce n'est pas toujours le cas, car les sites de commerce électronique peuvent parfois générer une nouvelle page lorsqu'un filtre est appliqué, mais nous travaillerons comme si le site mettait à jour le contenu en direct..

2. Notre navigation à facettes permet la sélection de plusieurs filtres. Tous les sites de commerce électronique ne le font pas, et il y a certainement des cas où cela ne devrait pas être permis. Cependant, cela crée une couche supplémentaire de complexité en dehors du cadre de cet article..

Configurer vos contrôles

Le code HTML derrière nos filtres est similaire à celui de la pagination, il apparaît dans le code sous forme de liens de base. Pour nos utilisations, cependant, l’intention des filtres est de modifier les informations qui se trouvent actuellement sur la page. Pour cette raison, nous voudrons marquer l'ensemble du conteneur autour des filtres, en précisant qu'il s'agit d'un contrôleur pour une autre zone de la page:

Définir les espaces de vie

Comme la pagination, ces mises à jour sont effectuées en direct sur la page. Pour cette raison, nous voudrons marquer le contenu principal de notre page comme étant «en direct». Notez que nous l'avons déjà fait dans la section pagination, mais nous allons répéter l'étape ici pour des raisons de cohérence..

Le code devrait ressembler à ceci:

 
 
Un joli sac
  Ajouter au panier 
… 

Tester vos implémentations

Nos implémentations sont maintenant toutes en place, alors soumettons-les à des tests. Mes outils préférés pour ce faire sont les outils de développement d'accessibilité de Google ou le plug-in Dynamic Assistant d'IBM, mais en fonction de l'échelle de votre projet, vous devrez peut-être créer votre propre script de test..

Si vous avez besoin d'un outil qui fonctionne en dehors de Chrome ou que vous ne préférez pas les deux mentionnés ci-dessus, le W3C propose une liste des autres outils d'accessibilité disponibles..

Rendre le commerce électronique plus accessible

Avec ces nouveaux ajouts à votre ensemble d’outils ARIA, vous devriez maintenant être en mesure de baliser de manière appropriée la plupart des sites de commerce électronique. Pour assurer la meilleure expérience utilisateur possible avec un site de commerce électronique, veillez à ce que votre navigation soit aussi simple que possible et exprimez clairement votre intention..

Vous avez d'autres questions sur ce sujet? Ai-je raté quelque chose d'important? Dis-moi dans les commentaires ci-dessous!