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 le programme de la conférence.

---

Widgets réutilisables qui fonctionnent !

- 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 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

Languette	Déplace le focus vers l'élément tabbable suivant dans modalBoucle autour du premier élément
Maj + Tabulation	Déplace le focus vers l'élément tabbable précédent dans modalBoucle autour du dernier élément
Échapper	Ferme la boîte de dialogue

Considérations techniques modales

Le conteneur de dialogue doit contenir :

• Rôle du
• défini sur vrai.
• ou 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 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 et le vérifier, et le code.

Boutons bascule

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

Boutons

Un 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 .

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

Entrer	Active le bouton
Espace	Active le bouton

Boutons bascule Considérations techniques

• Le bouton Basculer doit avoir le rôle de .
• Assurez-vous que le bouton a un nom accessible.
• Vous pouvez définir sur n'importe quelle description.
• Vous pouvez ajouter défini sur true si l'action n'est pas disponible.
• Le bouton bascule a un état .

  
  

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

Voici un bon que vous pouvez consulter et le code.

Accordéons

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

Entrée ou Espace	Développe le panneau réduit associé, réduit éventuellement un autre panneau ouvertRéduit le panneau développé associé ; si la mise en œuvre le permet.
Languette	Déplace le focus vers l'élément focalisable suivant
Maj + Tabulation	Déplace le focus vers l'élément focusable précédent
Flèche vers le bas (facultatif)	Déplace le focus de l'en-tête d'accordéon vers l'en-tête d'accordéon suivant Boucle éventuellement vers le premier en-tête d'accordéon.
Flèche vers le haut (facultatif)	Déplace le focus de l'en-tête d'accordéon vers l'en-tête d'accordéon précédent Boucle éventuellement vers le dernier en-tête d'accordéon
Domicile (facultatif)	Déplace le focus d'un en-tête accordéon vers le premier en-tête accordéon
Fin (facultatif)	Déplace le focus d'un en-tête d'accordéon vers le dernier en-tête d'accordéon

Considérations techniques sur les accordéons

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

• enveloppé dans un titre
• défini sur l'ID du contenu du panneau d'accordéon correspondant
• défini sur true si le contenu du panneau correspondant est visible
• défini sur true si l'accordéon qui s'effondre n'est pas autorisé
• Chaque contenu de panneau a une et 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 et son .

Onglets

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

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

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

Languette	Place le focus sur l'élément d'onglet actif lorsque l'utilisateur se déplace dans la liste d'onglets
Flèche gauche (onglets horizontaux)
Flèche vers le haut (onglets verticaux)	Déplace le focus sur l'onglet précédent ; boucle vers le dernier ongletEn option, active l'onglet nouvellement ciblé
Flèche droite (onglets horizontaux)
Flèche vers le bas (onglets verticaux)	Déplace le focus vers l'onglet suivant ; boucle vers le premier ongletEn option, active l'onglet nouvellement ciblé
Espace ou Entrée	Active l'onglet s'il n'a pas été activé automatiquement au focus
Maj + F10	Lorsque le focus est sur un onglet auquel est associé un menu contextuel, ouvre le menu

Onglets Interaction clavier en option

Domicile (facultatif)	Déplace le focus vers le premier ongletEn option, active le nouvel onglet ciblé
Fin (facultatif)	Déplace le focus vers le dernier ongletEn option, active le nouvel onglet ciblé
Supprimer (facultatif)	Si la suppression est autorisée, supprime (ferme) l'élément d'onglet actuel et son panneau d'onglet associé, définit le focus sur l'onglet suivant l'onglet qui a été fermé et active éventuellement l'onglet nouvellement ciblé

Onglets Considérations techniques

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

Rôle de l'onglet : l'élément qui sert d'onglet doit avoir 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 et son .

Ressources

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

---

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é .