Récemment, je suis tombé sur une question sur un forum de discussion pour mon cours de conception d'expérience utilisateur par un autre étudiant.

Je connais un peu l'idée des attributs ARIA , mais en tant que personne qui n'a jamais utilisé de lecteur d'écran ou d'autre type de technologie d'assistance, j'ai toujours été curieux de savoir quels impacts spécifiques les différents attributs ARIA ont sur la façon dont ils présentent le contenu aux utilisateurs .

La plupart d'entre eux sont-ils simplement évolutifs au cas où les technologies d'assistance décideraient d'utiliser ces informations à l'avenir, ou la plupart des attributs ont-ils réellement un effet tangible maintenant ?

L'excès d'attributs ARIA peut-il réellement nuire à l'expérience utilisateur dans certains cas ?

Apprendre ce genre de choses semble être important pour créer des sites Web accessibles en pratique et pas seulement en théorie.

Je pense que la plupart des développeurs ont cette compréhension de haut niveau que les attributs ARIA sont importants pour les utilisateurs handicapés. Mais en tant que personne qui n'a jamais eu besoin d'utiliser un lecteur d'écran, je ne comprends pas très bien quelles sont les conséquences lorsque vous ne configurez pas correctement vos attributs. C'est pourquoi je souhaite explorer des exemples concrets de ce qu'un utilisateur malvoyant entendrait lorsqu'un site Web n'est pas correctement configuré avec les attributs ARIA. Mais d'abord, nous devons comprendre comment fonctionne exactement un lecteur d'écran.

Que sont les lecteurs d'écran et qui les utilise ?

Les lecteurs d'écran utilisent la synthèse vocale et d'autres méthodes pour lire à haute voix le contenu et les éléments d'un écran, tels que le texte, les boutons, les liens et les images, et permettent aux utilisateurs de naviguer et d'interagir avec le contenu à l'aide de commandes clavier ou d'autres méthodes de saisie. Ce cycle simple naviguer-écouter-interagir permet aux utilisateurs d'utiliser toutes les fonctions d'un site Web s'il est conçu avec ce type d'interaction utilisateur à l'esprit.

Il existe des options intégrées telles que VoiceOver (inclus dans les systèmes d'exploitation macOS et iOS d'Apple) et Narrator (qui est inclus dans Microsoft Windows) ainsi que le plug-in de navigateur qui fournissent généralement des fonctionnalités et une personnalisation supplémentaires.

Bien que la plupart pensent que les lecteurs d'écran sont méchants avec les utilisateurs malvoyants ou aveugles. Ils sont également utilisés par des personnes ayant des troubles cognitifs ou à mobilité réduite et par des personnes non handicapées, mais qui ont besoin d'accéder à des informations électroniques et à des sites Web dans des situations où l'accès visuel n'est pas possible ou pratique.

Exemple 1 : Une image

Prenons cette simple image d'un carlin.

<img src="assets/images/8193903121.png"/>

      
                

                    
                    
                
            

8193903121.png, image

Ce qui ne fournit pas d'informations à un utilisateur de lecteur d'écran autre que le fait qu'il y a une image. Pour résoudre ce problème, ajoutez une altbalise aux images.

<img
  src="assets/images/8193903121.png" 
  alt="A pug wearing a red party hat with white dots"
/>

En remarque, lorsqu'un élément html prend en charge cette altbalise, celle-ci doit être utilisée sur aria-label. Aria-labelne doit être utilisé que dans des cas particuliers, comme lorsque a divpossède la propriété role=”img”.

Exemple 2 : un bouton d'envoi désactivé

<button disabled>Let's Go!</button>

      
                

                    
                    
                
            

Allons-y !, bouton

Cela ne dit pas à l'utilisateur ce qu'il fera en appuyant sur le bouton, ou le fait qu'il est désactivé. Corrigeons ça :

<button aria-label="Submit email" aria-disabled="true" disabled>Let's Go!</button>

Ici, le aria-labeldécrit le but du bouton et l' aria-disabledattribut permet au lecteur d'écran de décrire que le bouton est grisé et actuellement désactivé.

Exemple 3 : Une zone de commentaire avec une étiquette

Comment:
<textarea></textarea>
<p> Your comment will be visible to all members of your organization.</p>

      
                

                    
                    
                
            

Modifier le texte, vide

Pour résoudre ce problème, nous devons associer la zone de texte à l'étiquette et à la description.

<label id="comment-label" for="comment-box">Comment:</label>
<textarea 
  id="comment-box" 
  aria-labelledby="comment-label" 
  aria-describedby="comment-desc"
></textarea>
<p id="comment-desc">Your comment will be visible to all members of your organization.</p>

Relie ici aria-labelledbyle textareaau label, permettant au lecteur d'écran de comprendre que le champ demande un commentaire. Notez également que la forpropriété dans l'étiquette fait l'inverse de sorte que lorsque le lecteur d'écran est concentré sur le label, il sait qu'il s'agit d'une étiquette pour le textarea. Enfin, aria-describedbyl'attribut relie la description au fichier textarea.

Exemple 4 : tableau simple

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Product 1</th>
      <td>5</td>
      <td>4.5</td>
    </tr>
    <tr>
      <th>Product 2</th>
      <td>3</td>
      <td>3.7</td>
    </tr>
  </tbody>
</table>

      
                

                    
                    
                
            

Nom : (Colonne 1 sur 3) -> Quantité : (Colonne 2 sur 3) -> Évaluation : (Colonne 3 sur 3) -> Produit 1 -> 5 -> 4,5 -> Produit 2 -> 3 -> 3,7

Cela peut suffire à certains utilisateurs, surtout lorsque le tableau est court. Cependant, nous pouvons ajouter des attributs Aria pour améliorer considérablement cette expérience.

<table role="table" aria-label="Product Comparison">
  <thead>
    <tr>
      <th scope="col" aria-label="Product Name">Name</th>
      <th scope="col" aria-label="Product Quantity">Quantity</th>
      <th scope="col" aria-label="Product Rating">Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" aria-label="Product 1">Product 1</th>
      <td>5</td>
      <td>4.5</td>
    </tr>
    <tr>
      <th scope="row" aria-label="Product 2">Product 2</th>
      <td>3</td>
      <td>3.7</td>
    </tr>
  </tbody>
</table>

Maintenant, en parcourant la 3e colonne, un lecteur d'écran pourrait dire :

Nom du produit : Produit 2 -> Quantité de produit : 3 -> Évaluation du produit : 3,7

Bien sûr, la verbosité de ceci peut être ajustée sur la plupart des lecteurs d'écran pour éviter de dire les titres de colonne si après x répétitions, mais l'ajout de ces étiquettes donne ce contrôle à l'utilisateur et lui permet de choisir ce qu'il veut entendre.

Exemple 5 : utilisation excessive des attributs Aria

Bien sûr, comme pour la plupart des choses dans la vie, trop de bonnes choses peuvent être mauvaises.

<div 
  role="dialog" 
  aria-labelledby="modal-title" 
  aria-describedby="modal-description" 
  aria-modal="true" 
  aria-hidden="false" 
  aria-live="polite" 
  aria-atomic="true"
>
  <h2 id="modal-title">Modal Title</h2>
  <p id="modal-description">This is a modal window that contains important information for the user.</p>
  {...}
</div>

L'avenir d'ARIA

Alors que le Web continue d'évoluer et de devenir plus complexe, ARIA continuera à jouer un rôle crucial en rendant les applications Web accessibles et conviviales pour les utilisateurs de technologies d'assistance, telles que les lecteurs d'écran et la navigation au clavier.

L'un des domaines clés dans lesquels ARIA est susceptible de se développer davantage est la prise en charge des nouvelles technologies Web et des nouveaux modèles de conception . Par exemple, à mesure que de plus en plus d'applications Web utilisent des architectures à page unique et JavaScript asynchrone, ARIA devra fournir de nouveaux attributs et techniques pour rendre ces applications accessibles aux utilisateurs de technologies d'assistance.

Un autre domaine important pour l'avenir d'ARIA est l' amélioration de l'interopérabilité et de la compatibilité des attributs ARIA entre différents navigateurs et technologies d'assistance . Actuellement, il existe des incohérences et des différences dans la manière dont les différents navigateurs et technologies d'assistance interprètent et utilisent les attributs ARIA. Travailler à une mise en œuvre plus cohérente et standardisée d'ARIA sur le Web sera essentiel pour améliorer l'expérience utilisateur des utilisateurs de technologies d'assistance.

Enfin, l'avenir d'ARIA impliquera également une collaboration et un dialogue continus entre les développeurs Web, les experts en accessibilité et les utilisateurs de technologies d'assistance . Alors que de nouveaux défis et opportunités se présentent dans le monde de l'accessibilité du Web, il sera important que ces parties prenantes travaillent ensemble pour identifier et résoudre les problèmes potentiels, et pour développer de nouvelles solutions qui peuvent profiter à tous les utilisateurs du Web.

Dans l'ensemble, l'avenir d'ARIA s'annonce brillant et prometteur. Alors que le Web continue d'évoluer, ARIA jouera un rôle crucial pour le rendre plus accessible et convivial pour tous. Les développeurs Web doivent :

1. Utilisez les attributs et techniques ARIA pour fournir un contexte et des fonctionnalités supplémentaires pour les technologies d'assistance.
2. Fournissez des étiquettes et des descriptions claires et descriptives pour tous les éléments et contrôles.
3. Utilisez des éléments HTML sémantiques pour transmettre avec précision la structure et le contenu de la page.
4. Assurez-vous que le contenu est correctement structuré et organisé, avec une hiérarchie et des relations claires entre les éléments.
5. Utilisez judicieusement la couleur et le contraste pour vous assurer que le contenu est lisible et visible pour les utilisateurs malvoyants.
6. Fournir une accessibilité au clavier, permettant aux utilisateurs de naviguer et d'interagir avec la page en utilisant uniquement un clavier ou un autre périphérique d'entrée.
7. Testez l'application avec des technologies d'assistance pour vous assurer qu'elle est utilisable et accessible.

Il y a beaucoup plus d'attributs ARIA que je n'ai pas montrés ici. Voir une liste complète d'entre eux ici:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes

Notez que ChatGPT a été utilisé pour la recherche et pour la rédaction de certaines parties de cet article.