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) , 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. ici (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 et j'ai seulement essayé de les apprendre pour pouvoir les transformer en ces articles. Même 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) 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, la plupart des phrases écrites dans ces articles sont exactement ce qu'elles ont dit ou ce qu'elles ont écrit dans Slides. 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. ici Widgets réutilisables qui fonctionnent ! - Responsable de la formation à l'accessibilité et responsable principale de l'ingénierie de l'accessibilité chez CVS Health Maria Lamardo 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. W3C 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 dialogue défini sur vrai. aria-modal 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. aria-label aria-labelleden En option, vous pouvez définir sur n'importe quelle description. aria-dedicatedby 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. cet exemple voici Boutons bascule Si vous souhaitez obtenir des informations complètes, vous pouvez les trouver sur le site Web du . W3C 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. bouton 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 Entrer Active le bouton Espace Active le bouton 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 sur n'importe quelle description. aria-dedicatedby Vous pouvez ajouter défini sur true si l'action n'est pas disponible. aria-disabled Le bouton bascule a un état . aria-pressé <button aria-pressed="false"> Mute </button> Voici un bon que vous pouvez consulter et le code. exemple voici Accordéons la documentation complète. Reprenons ses principaux points. Voici 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 aria-controls défini sur true si le contenu du panneau correspondant est visible aria-expanded défini sur true si l'accordéon qui s'effondre n'est pas autorisé aria-disabled Chaque contenu de panneau a une et au bouton d'en-tête correspondant (facultatif) région de rôle aria-labelledby É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 . exemple 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. un ensemble d'éléments d'onglet contenus dans un élément de liste de Liste d'onglets : tabulation 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. Onglet : L'élément qui contient le contenu associé à un onglet Panneau d'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 élément contenant un ensemble d'onglets doit avoir ou . Rôle de Tablist : l' aria-labelledby aria-label 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. Rôle de l'onglet : des commandes aria Et la propriété aria-haspopup doit être définie sur menu ou sur true si un élément tab a un menu contextuel. é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). Rôle de Tabpanel : l' 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 . exemple 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 exposé cinquième 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

CodePen

CVS Health

Mozilla

Twitter

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Performance

2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Vue Amsterdam 2022 : Partie V - Widgets réutilisables qui fonctionnent !

Vue Amsterdam 2022 : Partie V - Widgets réutilisables qui fonctionnent !

Trop long; Pour lire

Companies Mentioned

Mohsen Vaziri

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Vue Amsterdam 2022 : Partie V - Widgets réutilisables qui fonctionnent !

Trop long; Pour lire

Companies Mentioned

Mohsen Vaziri

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES