Accueillir! Heureux de vous voir dans la cinquième partie de ma série de résumés Vuejs Amsterdam Conference 2022, dans laquelle je partage avec vous un résumé de toutes les discussions.

Vous pouvez lire ma série de résumés de la JSWorld Conference 2022 (en quatre parties) ici , où j'ai résumé toutes les discussions de la première journée. Vous pouvez également retrouver les précédents Talks de la conférence Vue Amsterdam 2022 sur mon blog.

(Récurrent) Présentation

Après deux ans et demi, JSWorld et Vue Amsterdam Conference étaient de retour au Theater Amsterdam entre le 1er et le 3 juin, et j'ai eu la chance d'assister à cette conférence pour la première fois. J'ai appris beaucoup de choses, rencontré beaucoup de gens formidables, parlé avec de grands développeurs et passé un bon moment. Le premier jour, la Conférence JSWorld a eu lieu, et les deuxième et troisième jours, la Vue Amsterdam.

La conférence a été pleine d'informations avec d'excellents orateurs, chacun d'entre eux m'a appris quelque chose de précieux. Ils voulaient tous partager leurs connaissances et leurs informations avec d'autres développeurs. J'ai donc pensé que ce serait formidable si je pouvais continuer à le partager et aider les autres à l'utiliser.

Au début, j'ai essayé de partager quelques notes ou diapositives, mais je trouvais que ce n'était pas assez bon, du moins pas aussi bon que ce que l'orateur partageait avec moi. J'ai donc décidé de revoir chaque discours, de les approfondir, de rechercher, de prendre des notes et de les combiner avec leurs diapositives et même leurs mots exacts dans leur discours, puis de le partager avec vous afin que ce que je partage avec vous soit au moins au au même niveau que ce que j'ai appris d'eux.

Un point très important

Tout ce que vous lisez au cours de ces quelques articles est le résultat de l'effort et du temps de l'orateur lui-même, et j'ai seulement essayé de les apprendre pour pouvoir les transformer en ces articles. Même la plupart des phrases écrites dans ces articles sont exactement ce qu'elles ont dit ou ce qu'elles ont écrit dans Slides. Cela signifie que si vous apprenez quelque chose de nouveau, c'est grâce à leurs efforts. (Donc, si vous voyez de la désinformation, blâmez-les, pas moi, n'est-ce pas? xD)

Enfin et surtout, je ne peux pas creuser dans tous les détails techniques ou les codages en direct dans certains des discours. Mais si vous êtes intéressé et avez besoin de plus d'informations, faites-le moi savoir et j'essaierai d'écrire un article plus détaillé séparément. Aussi, n'oubliez pas de consulter leur Twitter/Linkedin.

Vous trouverez ici le programme de la conférence.

Widgets réutilisables qui fonctionnent !

Maria Lamardo - Responsable de la formation à l'accessibilité et responsable principale de l'ingénierie de l'accessibilité chez CVS Health

Vue.js est un framework incroyable qui vous permet de créer rapidement des composants réutilisables. Nous pouvons en tirer parti pour créer des widgets réutilisables accessibles à l'aide d'ARIA (Accessible Rich Internet Application). En utilisant les rôles et attributs ARIA, nous pouvons améliorer l'accessibilité de certains éléments en fournissant une sémantique supplémentaire. Dans cette conférence, nous verrons comment suivre les spécifications et créer des onglets, des accordéons, des boutons bascule et des boîtes de dialogue modales accessibles et réutilisables qui fonctionnent pour tout le monde !

Modal

Toutes les choses que vous devez savoir sur ARIA sont bien documentées dans le W3C et il est recommandé de les lire, mais en voici une version abstraite.

Considérations de conception modales

• Il doit avoir un bouton qui ferme la boîte de dialogue.
• Le contenu en dehors de la boîte de dialogue doit être obscurci par un style visuel comme un arrière-plan gris.
• Assurez-vous d'empêcher les utilisateurs d'interagir avec le contenu en dehors de la boîte de dialogue.

Modaux Ouverture Focus Interaction

Lorsqu'une boîte de dialogue s'ouvre, le focus peut être défini soit sur le premier élément pouvant être sélectionné, soit sur un élément statique en haut de la boîte de dialogue pour faciliter la lecture du contenu et garantir que tout le contenu reste visible, ou sur l'élément le plus fréquemment utilisé en cas d'interactions se limitent à fournir des informations ou à poursuivre le traitement.

Vous ne voulez pas mettre l'accent sur quelque chose qui va être destructeur pour l'utilisateur, par exemple, imaginons que vous ayez une interaction où vous ouvrez un modal pour supprimer votre compte. Vous ne voulez pas définir le premier focus sur "Oui, supprimer mon compte".

Modaux Clôture Focus Interaction

Lorsqu'une boîte de dialogue se ferme, le focus est défini sur l'élément qui a invoqué la boîte de dialogue, ou lorsque cela n'a pas de sens, vous pouvez définir le focus sur un élément différent, comme un élément qui fournit un flux de travail logique si l'élément appelant n'existe plus, ou sur l'élément suivant s'il existe une étape ultérieure dans le flux de travail après l'achèvement de la tâche de dialogue, en particulier si la réouverture immédiate du dialogue est très peu probable.

Interaction clavier modale

Considérations techniques modales

Le conteneur de dialogue doit contenir :

• Rôle du dialogue
• aria-modal défini sur vrai.
• aria-label ou aria-labelleden faisant référence au titre de la boîte de dialogue, cela aidera les technologies d'assistance à déterminer le nom de cet élément.
• En option, vous pouvez définir aria-dedicatedby sur n'importe quelle description.

Tous les éléments requis pour faire fonctionner la boîte de dialogue doivent être des descendants de l'élément qui a un rôle de boîte de dialogue.

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

Sur mac, vous pouvez activer Voice Over qui est le lecteur d'écran mac par défaut en cliquant sur Commande + F5, puis vous pouvez parcourir votre page et la tester.

Également dans Chrome Dev-Tools, il existe un onglet d'accessibilité qui contient des informations intéressantes sur l'accessibilité.

Avec cela, vous pouvez ouvrir cet exemple et le vérifier, et voici le code.

Boutons bascule

Si vous souhaitez obtenir des informations complètes, vous pouvez les trouver sur le site Web du W3C .

Boutons

Un bouton est un widget qui permet aux utilisateurs de déclencher une action ou un événement, comme soumettre un formulaire, ouvrir une boîte de dialogue, annuler une action ou effectuer une opération de suppression.

En plus du widget de bouton ordinaire, WAI-ARIA prend en charge 2 autres types de boutons :

• Boutons bascule
• Boutons de menus

Considérations relatives à la conception des boutons bascule

Un bouton à deux états qui peut être éteint (non enfoncé) ou allumé (enfoncé).

Pour indiquer aux technologies d'assistance qu'un bouton est un bouton bascule, spécifiez une valeur pour l'attribut aria-pressed .

L'étiquette d'une bascule ne doit pas changer lorsque son état change ; si l'étiquette change dans la conception, l'attribut aria-pressed n'est pas nécessaire.

Boutons à bascule Gestion de la mise au point

• Si l'activation du bouton ne fait pas disparaître le contexte actuel, le focus reste sur le bouton après l'activation.
• Si l'activation du bouton ouvre ou ferme une boîte de dialogue, suivez le modèle de boîte de dialogue.
• Si l'action du bouton indique un changement de contexte, vous pouvez déplacer le focus sur le point de départ de cette action
• Si le bouton est activé avec une touche de raccourci, le focus reste généralement dans le contexte à partir duquel la touche de raccourci a été activée

Boutons bascule Interaction clavier

Boutons bascule Considérations techniques

• Le bouton Basculer doit avoir le rôle de bouton .

• Assurez-vous que le bouton a un nom accessible.

• Vous pouvez définir aria-dedicatedby sur n'importe quelle description.

• Vous pouvez ajouter aria-disabled défini sur true si l'action n'est pas disponible.

• Le bouton bascule a un état aria-pressé .

  
  

 <button aria-pressed="false"> Mute </button>

Voici un bon exemple que vous pouvez consulter et voici le code.

Accordéons

Voici la documentation complète. Reprenons ses principaux points.

Considérations sur la conception des accordéons

Ensemble d'en-têtes interactifs empilés verticalement contenant chacun un titre, un extrait de contenu ou une vignette représentant une section de contenu

En-tête accordéon :

Libellé ou vignette représentant une section de contenu qui sert également de contrôle pour afficher et, dans certaines implémentations, masquer la section de contenu.

Panneau accordéon :

Section de contenu associée à un en-tête en accordéon.

Interaction clavier accordéons

Considérations techniques sur les accordéons

Assurez-vous que chaque bouton d'en-tête d'accordéon a :

• enveloppé dans un titre
• aria-controls défini sur l'ID du contenu du panneau d'accordéon correspondant
• aria-expanded défini sur true si le contenu du panneau correspondant est visible
• aria-disabled défini sur true si l'accordéon qui s'effondre n'est pas autorisé
• Chaque contenu de panneau a une région de rôle et aria-labelledby au bouton d'en-tête correspondant (facultatif)
• Évitez d'utiliser le rôle de région dans des circonstances qui créent trop de régions repères

Exemple de code d'accordéons

 <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

Voici un bon exemple et son code .

Onglets

Vous pouvez voir la documentation complète de Tabs sur W3C .

Considérations relatives à la conception des onglets

Les onglets sont un ensemble de sections de contenu en couches, appelées panneaux d'onglets, qui affichent un panneau de contenu à la fois.

Liste d'onglets : un ensemble d'éléments d'onglet contenus dans un élément de liste de tabulation

Onglet : un élément de la liste des onglets qui sert d'étiquette pour l'un des panneaux à onglets et peut être activé pour afficher ce panneau.

Panneau d'onglet : L'élément qui contient le contenu associé à un onglet

Il est recommandé que les onglets s'activent automatiquement lorsqu'ils reçoivent le focus tant que leurs panneaux d'onglets associés sont affichés sans latence perceptible.

Onglets Interaction clavier

Onglets Interaction clavier en option

Onglets Considérations techniques

Rôle de Tablist : l' élément contenant un ensemble d'onglets doit avoir aria-labelledby ou aria-label .

Rôle de l'onglet : l'élément qui sert d'onglet doit avoir des commandes aria associées au panneau d'onglets associé, l'onglet actif doit avoir l'état aria-selected défini sur true ; tous les autres onglets sont définis sur false.

Et la propriété aria-haspopup doit être définie sur menu ou sur true si un élément tab a un menu contextuel.

Rôle de Tabpanel : l' élément contenant le panneau de contenu d'un onglet doit avoir aria-labelledby associé à l'onglet associé et définir aria-orientation sur vertical ou horizontal (par défaut).

Exemple de code d'onglets

 <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

Voici un bon exemple et son code .

Ressources

Guide des pratiques de création ARIA

Directives pour l'accessibilité du contenu Web (WCAG) 2.1

Vous pouvez trouver un exemple de code Vue complet avec différents composants ici :

https://github.com/mlama007/Widgets

Fin du cinquième exposé

J'espère que vous avez apprécié cette partie et qu'elle peut être aussi précieuse pour vous qu'elle l'était pour moi.

Au cours des prochains jours, je partagerai le reste des discussions avec vous. Restez à l'écoute…

Également publié ici .