Améliorations UX pour l'accessibilité du clavier

Comment pouvons-nous fournir une expérience utilisateur accessible pour le clavier uniquement et l'assistance? utilisateurs de la technologie sans affecter l'expérience pour d'autres utilisateurs? Nous avons gracieusement demandé à Aaron Pearlman, concepteur UX principal chez Deque Systems, de partager des outils et techniques pratiques garantissant que nous fournissions tous une expérience inclusive et accessible à nos utilisateurs.

Dans le cadre de notre . Smashing Membership nous organisons chaque semaine Smashing TV, une série de webinaires en direct. Pas de fluff – juste des webinaires pratiques et exploitables avec un Q & A en direct, animé par des praticiens respectés du secteur. En effet, le programme télévisé Smashing semble déjà assez dense et il est gratuit pour les membres Smashing, ainsi que pour les enregistrements – évidemment .

Nous espérons que le webinaire sera aussi agréable que possible.

Aaron Pearlman: Vous devriez pouvoir voir mon écran. . D'accord, maintenant, laissez-moi juste… Nous y voilà, très bien. Bonjour tout le monde. Comme je l'ai dit, je suis Aaron Pearlman, principal concepteur d'expérience utilisateur pour Deque. Et je pense… Euh, laisse-moi bouger— Zoom a tendance à mettre un peu d’assurance-chômage dans le chemin, alors je suis désolé si j’ai l’air de bouger comme un fou et d’espérer que la souris n’est pas visible. Nous allons donc parler des types d’optimisation que vous pouvez apporter aux utilisateurs utilisant uniquement le clavier et les technologies d’assistance. Comme je l’ai dit il ya un instant, ce type d’optimisation, ce genre de choses n’empêchera personne d’utiliser votre… ils ne seront pas non plus utilisés par d’autres personnes. Ce sont plutôt des choses qui vont être plus avantageuses pour les utilisateurs qui utilisent principalement un système utilisant uniquement la technologie d'assistance utilisateur au clavier.

Aaron Pearlman: Pour ceux qui ne connaissent pas bien ce que cela signifie. , qu'est-ce qu'une technologie d'assistance utilisateur uniquement au clavier – un utilisateur uniquement au clavier est une personne qui utilise simplement votre clavier pour parcourir un système. Donc, ils vont beaucoup utiliser les touches Tab et Shift et les touches fléchées pour parcourir votre système. La mise au point est donc très importante pour eux. Vous remarquerez peut-être que cette personne peut avoir des problèmes de motricité, avoir une déficience visuelle, les utilisateurs seulement au clavier, puis que les utilisateurs de technologies d'assistance utilisent également un clavier pour parcourir votre système. Ils peuvent également utiliser d'autres technologies d'assistance telles que l'écran. mètres comme VoiceOver ou un lecteur de braille ou quelque chose dans ce genre.

Aaron Pearlman: C'est donc un peu ce sur quoi nous nous concentrons – nos utilisateurs de cette nature, car une bonne partie des personnes handicapées ont tendance à tomber dans ce camp. Cela ne veut pas dire tout le monde. Certes, il existe une myriade d'incapacités et de gradations différentes entre les deux, mais nous allons nous concentrer sur ceci aujourd'hui.

Aaron Pearlman: un aperçu de ce que nous allons couvrir: nous allons parler un peu du processus de conception avec beaucoup de faire peut-être un peu un type d'exercice que nous pourrions entreprendre, peut-être pas, avant de commencer. aller aux liens de saut. Et puis, les liens de saut vont devenir l’une des fonctionnalités que nous allons couvrir, des façons d’optimiser votre modal et de gérer le focus. Donc, ce seront les trois grandes catégories que nous allons couvrir et nous aurons ensuite le temps de poser des questions lorsque tout sera terminé.

Aaron Pearlman: Pour commencer, je pensé que nous pourrions faire un peu de vue d'ensemble du processus de conception UX. J'étais dans différents ateliers et divers objets. Je trouve qu'il existe une multitude d'individus appartenant à de nombreuses disciplines différentes. Tous ne sont pas des concepteurs d'expérience utilisateur. Ils ne sont donc peut-être pas aussi familiarisés avec le processus employé par de nombreux concepteurs UX. Donc, pour ce faire, j’ai pensé que nous allions l’analyser brièvement, nous ne passerons pas énormément de temps là-dessus, mais j’estime que cela mérite d’être brièvement passé en revue. Et aussi parce que cela va être lié à la conception accessible également. Ainsi, la plupart des conceptions UX ont tendance à passer par un processus appelé découverte, ce n’est pas toujours appelé découverte, mais on parle parfois d’idéation rapide, d’itération rapide. Beaucoup de gens portent des noms différents, mais le fait est que c'est la partie du processus de conception qui nécessite le plus souvent une fabrication.

Aaron Pearlman: Il est très souvent temps Nous avons également des idées et des exigences différentes. C’est un domaine dans lequel de nombreuses recherches et synthèses sont faites avec les objectifs de votre organisation et filtrés avec toutes ces informations. Ce qui en résulte sont généralement des artefacts qui nous permettent de construire le système. que nous allons faire ou les fonctionnalités que nous faisons. Celles-ci ont tendance à être – elles ne le sont pas toujours – mais elles ont tendance à ressembler à des prototypes. Parfois, vous verrez des modèles mentaux qui en découleront également. Mais un prototype d’un certain niveau de fidélité reflète bien la manière dont votre utilisateur cible atteindra ses objectifs. Le TLDR permet de réitérer la conception. Nous testons avec les utilisateurs et répétons-le, testons avec les utilisateurs, répétons-le et testons avec les utilisateurs, puis il finit par être construit.

Aaron Pearlman: Vous pensez que c'est important, si vous souhaitez que l'accessibilité soit prise en compte tout au long du processus de conception, vous devez prendre en compte l'accessibilité. Et différents niveaux de fidélité peuvent valoir la peine de penser à différents types de choses, cela dépend vraiment. Nous n'allons pas entrer dans beaucoup de choses là-dessus, mais en général, nous voulons intégrer ces méthodes heuristiques et heureuses, et les concepteurs augmenteront leur pouvoir d'accessibilité au fil du temps, tout comme nous le ferons pour devenir un bon concepteur d'expérience utilisateur au fil du temps. Au début, vous ne vous attendez pas à lire WCAG 2.1, puis à lire les spécifications ARIA, puis vous aurez terminé et vous ne ferez plus d'erreurs. ou vous ne manquerez de rien en ce qui concerne vos conceptions et vos conceptions de manière accessible. Ce n’est pas forcément raisonnable, loin de là.

Aaron Pearlman: Sachez simplement que vous allez apprendre avec le temps. Certes, je continue à me tromper en matière d’accessibilité et dans tout ce sur quoi je travaille, et c’est uniquement pour améliorer. Donc, [inaudible] parce que je dessine toujours de manière accessible. Trane est donc un petit problème, bien qu’il corresponde à ce sur quoi nous allons travailler aujourd’hui. C’est notre bibliothèque de modèles entièrement accessible chez Deque, nous l’utilisons pour créer nos propres produits. C’est un framework frontal HTML, CSS et JavaScript, assez similaire à Bootstrap, si vous avez déjà utilisé quelque chose de ce genre. Nous avons également une bibliothèque de réaction qui est également la bibliothèque sœur. Notre équipe évolue en réaction. Mais nous allons examiner quelques exemples d’actualité. Mais ceci est open source, il est disponible, il y aura un lien vers celui-ci à la fin de ce document, que je mettrai à la disposition de tous.

Aaron Pearlman: Et il est gratuit pour vous de utiliser et obtenir des branches et les utiliser à votre guise ou y contribuer, nous aimerions aussi y contribuer. Donc, juste un petit bouchon, mais nous y ferons référence au fur et à mesure. Donc, pour la première chose que nous allons examiner, ce sont les liens de saut. Et pour ceux qui ne connaissent peut-être pas ce qu'est un lien de saut, les liens de saut sont de petits liens qui tendent à apparaître comme le tout premier arrêt d'onglet dans une application Web ou un site Web. Et ce qu'ils vous permettent de faire, c'est de vous permettre de contourner des parties du site. Pourquoi voudriez-vous faire cela?

Aaron Pearlman: Eh bien, si vous avez un site Web qui propose un menu très riche, il peut s'agir d'un grand menu avec panneau d'affichage ou simplement contenir de nombreux éléments, Si vous utilisez uniquement le clavier ou les technologies d'assistance, lorsque vous accédez à ce site et que votre VoiceOver commence à le lire, ou même pas, même si vous êtes un utilisateur voyant, vous utilisez simplement votre clavier, vous ' Nous allons devoir parcourir tous ces éléments pour passer au contenu ou à l’espace de travail que vous souhaitez commencer, quelle que soit votre activité. Et ainsi, ce qu'un lien vous permet de faire est de contourner généralement, généralement la navigation pour accéder à l'espace de travail de cette application.

Aaron Pearlman: Il peut y avoir des liens multiples parfois et généralement seulement voir un, mais nous avons quelques exemples. Je vais vous montrer un exemple d’utilisation de plusieurs liens de saut. J'ai donc pensé que nous pourrions examiner différents types de liens Ignorer ou différents types de liens Ignorer, puis nous examinerons une autre page sans lien ignifuge, et parlerons peut-être un peu de l'endroit où pourrait être utile là-bas. Le premier que nous allons regarder, espérons que vous pourrez voir mon écran. Le premier élément que nous allons examiner est le lien ignoré que nous utilisons sur deque.com. Ce que j’appellerais un élément de déplacement, c’est-à-dire qu’il déplace la page. Ainsi, lorsque je coche ici, je peux voir que le lien de saut est présent et qu'il me dira de passer directement au contenu.

Aaron Pearlman: Et lorsque je le sélectionnerai, il me renverra au contenu. en bas, et j’appelle déplacement, parce qu’il s’insère et se cache et s’insère dedans et le déplace. C’est le lien que nous avons choisi d’utiliser pour notre contenu, mais c’est un lien très courant. Vous le verrez s'afficher en haut d'un site Web ou d'une application Web. Le prochain que nous allons examiner est celui d’un site que je suis sûr que beaucoup d’entre vous ont utilisé ou utilisé assez fréquemment. C’est Amazon, nous allons regarder leur lien de saut. Lorsque j'aperçois là-dedans, si vous regardez dans le coin supérieur gauche, vous verrez qu'il est superposé, il s'agit d'un style de superposition, c'est très, très courant, où il superpose le contenu, et donc il saute souvent ce qui est derrière pour montrer le contenu principal.

Aaron Pearlman: Les avantages et les inconvénients entre déplacer et superposer sont négligeables. Si vous trouvez que votre contenu est quelque chose que vous ne voulez jamais obscurcir, vous voudrez peut-être insérer quelque chose et l'utiliser, déplacement, et inversement, cela n'a pas d'importance, cela convient également. Si vous concevez un contenu qui se lit de droite à gauche, comme du contenu arabe, vous pouvez placer votre lien de saut dans le coin supérieur droit, cela peut valoir le coup. Cela revient vraiment à ce qui est approprié. Mais en fin de compte, cette discrétion sera laissée au concepteur de son équipe. Donc, ceci est un exemple de deux liens de skip qui étaient un lien de skip unique, et je pensais vous en montrer un où il existe de nombreuses options dans le lien de skip.

Aaron Pearlman: Je suis pour tirer cet exemple, cela provient de notre bibliothèque de modèles. Maintenant, pour cet exemple particulier, je ne concevrais pas réellement quelque chose qui comportait plusieurs liens de saut, car cela ne le méritait pas vraiment, mais nous ne l’avons fait que dans le but de le démontrer. Donc, je vais faire un onglet et dans le coin supérieur gauche, nous utilisons une superposition qui vous montre deux liens de saut ici. Et ce sont des taquets de tabulation à l’intérieur d’ici, donc si j’appuie à nouveau sur tab, nous allons passer au suivant et si je l’abaisse, ça ira. Si je tape à nouveau, il va partir et il va aller dans l'en-tête en haut. Je vais reculer, reculer afin que nous puissions voir que nous pouvons aller et venir d'ici.

Aaron Pearlman: Ensuite, je vais aller de l'avant et entrer l'un de ces éléments. juste pour que vous puissiez le voir. Et ce qui se passe à ce stade lorsque je le sélectionne, il m'envoie dans la zone de travail et concentre réellement cette zone. Ce que vous verrez pour beaucoup d’applications Web, c’est qu’elles ne montrent pas vraiment le focus, nous voulions montrer que dans nos applications, ce n’est pas un focus d’éléments pour ainsi dire, mais c’est quelque chose qui peut prendre concentrer. Et à partir de là, nous allons nous concentrer et ensuite nous pourrons passer aux différents éléments à l’intérieur de celui-ci qui sont au centre de tous les éléments qui se trouvent à l’intérieur, les éléments [inaudible 00:12:28]. Voici donc quelques exemples de différentes manières de sauter des liens.

Aaron Pearlman: Comme je l'ai dit, il existe un exemple dans la bibliothèque de modèles, vous pouvez l'utiliser, nous J'en ai aussi une version, je crois qu’il ya des erreurs. Nous avons également un exemple de lien unique, que vous pouvez également utiliser. Nous avons donc deux exemples différents ici. Mais ce sont des exemples de manières courantes d'utiliser des liens de saut. Et ils sont avant tout bénéfiques pour les personnes qui utilisent leur clavier uniquement pour parcourir le système lorsqu'elles utilisent une technologie système à la suite de cela.

Aaron Pearlman: Mais il peut arriver que, dans certains cas, qu'un lien de saut pourrait être potentiellement bénéfique. J'ai vu que cela pouvait être potentiellement bénéfique. Vous pouvez imaginer un cas où le grand espace de travail de votre site est peut-être un ensemble de résultats de recherche et un score paresseux dans lequel vous allez défiler vers le bas, puis charger plus de résultats et faire défiler vers le bas et ensuite. Je chargerai plus de résultats, vous ferez défiler vers le bas, et cela chargera plus de résultats.

Aaron Pearlman: Comment allez-vous au bas de page? Et j’avais eu ce problème auparavant, lorsque je me suis tourné vers les moteurs de recherche et que je n’ai jamais pu me rendre au pied de page. Et ce qui aurait été sympa, c’est le lien de saut qui me permettait de passer directement au pied de page, car je cherchais des informations dans le pied de page. Ignorer les liens peut donc être bénéfique. Ce n’est pas le seul moyen de résoudre ce problème. Bien sûr, vous pouvez également utiliser des touches de raccourci ou des menus contextuels. Il existe de nombreuses techniques différentes pour atteindre ces objectifs, mais c’est celle pour laquelle les liens de saut ont tendance à être très bon dans [inaudible 00:14:13]. Certains points à garder à l’esprit lors de la création d’un lien ignoré sont qu’il s’agit généralement du premier arrêt de l’onglet de l’application Web de votre site Web.

Aaron Pearlman: Et c’est généralement là où il se trouve, et Donc, si je ne fais que crier ou que je ne suis qu'un utilisateur de clavier, je peux y accéder immédiatement. C’est la toute première chose que je puisse faire lorsque j’entre. Donc si c’est une application Web que j’utilise fréquemment, je peux aller au bout de ce que j’essaie de faire. Il devrait également être indiqué visuellement où il est supposé figurer dans les informations, dans l'IA essentiellement, pour que vous puissiez mettre des liens de saut et d'autres parties de votre demande, comme si je pouvais en mettre un ici si je le voulais, trouver un long le site de défilement de la pile et je voulais le faire, et je voulais avoir un lien de saut dans quelque chose. Je suis à peu près sûr que vous pouvez ancrer dans des choses comme ça, mais il devrait être représenté visuellement là où il devrait être, dans la demande.

Aaron Pearlman: En général, c’est extrêmement rare. La plupart des liens de saut sont toujours dans les tous premiers onglets. En général, ne faites pas ça. Je pense que techniquement, vous le pouvez, mais je dirais que non. Et puis le dernier élément est qu’il s’agit d’un élément interactif et du contraste de couleurs passé, assurez-vous que c’est le cas, si vous décidez d’utiliser une image ou quelque chose dans l’image, je le ferais, mais si vous l’avez fait, il doit disposer de le nom accessible approprié avec elle aussi. En général, la plupart des gens utilisent des textes et des liens, ils seront donc marqués comme un lien. Assurez-vous simplement que le contraste des couleurs est correct. [inaudible 00:16:07]. Très bien. C’est donc un peu tout ce que nous avons pour les liens de saut.

Aaron Pearlman: C’est un modèle assez succinct, mais très courant, que vous voyez partout et que vous pouvez ajouter assez, c’est assez simple. ajouter à votre application Web, mais cela peut faire une grande différence pour les personnes qui utilisent leur clavier ou leur technologie système. Alors laissez-moi aller de l'avant et fermer ceci et passons aux optimisations modales. Choisissez de le faire parce que les modaux sont très très répandus parmi la plupart des applications Web et qu'ils se présentent dans de nombreux forums, de nombreuses façons différentes de façonner et de créer les modaux.

Aaron Pearlman: Mais certaines choses courantes que je vois se retrouvent dans plus de choses que nous pouvons corriger, jusqu'à ce qu'il y ait quelques optimisations que nous puissions faire pour en faire une meilleure expérience pour les utilisateurs utilisant uniquement le clavier et les technologies d'assistance. Et en général, je pense que votre modal est bien meilleur. Une des choses que je pensais montrer ici très rapidement, c’est qu’une des choses importantes qu’un Modal doit faire, c’est qu’elle doit pouvoir rester au centre de la discussion. Je voulais montrer un exemple de… c’est ici. J'adore dribbler en passant, alors ce n'est pas un problème contre eux. Ce n'est probablement qu'un petit oubli ici. Je les utilisais tout le temps comme un site enchanteur et j'y ai ajouté des trucs merveilleux.

Aaron Pearlman: Donc, si je devais appuyer sur la pancarte, oups, je suis désolé, je m'inscris . Voici un mode ici et quelque chose qui peut arriver parfois. Si vous remarquez attentivement, je frappe onglet, onglet, onglet, onglet, onglet. Comme vous pouvez le voir derrière l’écran, c’est un peu difficile à voir. Vous pouvez voir que la focalisation n’a pas été complètement bloquée à l’intérieur du Modal, ce qui peut arriver parfois. Donc, si j’utilisais la technologie d’assistance ou un clavier uniquement, il me serait très difficile d’y revenir.

Aaron Pearlman: C’est quelque chose qui arrive très, très, très , très souvent, et cela peut certainement arriver lorsque vous insérez différentes choses intéressantes dans Modal. Donc, quelque chose que nous voulons nous assurer, et la raison pour laquelle j’en parle, la raison qui est en fait très importante, c’est quand un modal est évoqué, il doit en quelque sorte s’annoncer à la personne qui l’a évoqué, savoir quoi ils ont en fait juste ouvert, mais ils ont en fait ouvert la chose correcte.

Aaron Pearlman: Ainsi, la façon dont il peut s'annoncer est la suivante: le corps du modal doit être ciblé ou potentiellement l'en-tête du modal peut être ciblé pour que nous puissions dire à la personne qui évoque le modal que c'est ce qui se passe. Ainsi, s’ils ont une voix, ils utilisent par exemple VoiceOver, ils leur diront ce qu’ils regardent. J'ai donc pensé donner quelques exemples de moyens de focaliser le corps, puis un exemple de modèle permettant de centrer l'en-tête à la place, puis ce que nous pouvons faire avec cela.

Aaron Pearlman: Je vais ouvrir ceci très rapidement ici. Très bien. Et donc le modal qu’ils ont pour cela, je pense que c’est un site de vêtements ici. Et ce qui s’est passé, c’est que le corps a été focalisé et que je peux le montrer au mieux… Je vais activer VoiceOver très rapidement.

VoiceOver: VoiceOver sur Chrome.] Bonobos, [inaudible 00:20:10] –

Aaron Pearlman: Et vous ne pourrez pas pour l'entendre-

VoiceOver: Google Chrome, Aaron.pearlman@deque.com-

Aaron Pearlman: Mais vous pourrez le voir. [19659005] VoiceOver: Fermez la carte, votre carte est vide, le groupe a le focus clavier. Vous êtes actuellement sur le groupe en ouvrant votre carte, fermez la carte, votre carte est un groupe vide. Vous êtes actuellement dans le groupe à l’intérieur du contenu Web, VoiceOver off.

Aaron Pearlman: Ainsi, lorsque j’ai fait la mise au point, il lisait un peu de tout ce qui se passait sur votre carte fermée et votre carte est vide car les achats ont été concentrés à ce stade. Et cela est parfaitement valable. C’est un moyen parfaitement valable de focaliser vos modaux. Ce n’est pas un problème du tout. Et à partir de là, vous pourrez parcourir tout ce qui se trouve à l’intérieur. Une autre façon courante d’évoquer un modal est de focaliser l’en-tête.

Aaron Pearlman: Et c’est ce que nous faisons sur les modaux que nous utilisons pour nos applications, c’est l’en-tête. Donc, je vais évoquer le modal, et comme vous pouvez le voir ici, le focus est ici, là où il est dit modal avec la forme, le focus est juste là-dessus. En fait, plutôt que d’indiquer qu’en tant qu’index, nous concentrons cela par programme. Et la raison pour laquelle nous focalisons par programme, lorsque je fais défiler les onglets ici, passe maintenant au bouton de fermeture, également dans l’en-tête, puis au premier élément interactif, qui est champ au champ suivant, au champ suivant, au champ champs suivants, en reculant à la sauvegarde, en reculant à l'annulation.

Aaron Pearlman: Et à partir de là, lorsque je tape l'onglet, si cet en-tête était un taquet, il irait là, mais nous a choisi de ne pas le faire. Au lieu de cela, nous allons à la fin et la raison pour laquelle nous le faisons est simplement si quelqu'un utilisait Voice Over, car vous avez peut-être vu une partie de ce qui était en train d'être écrit et me tombait dans les oreilles en même temps, c'était en fait très peu distrayant car il parle très vite, c’est un peu bavard. Et si l’une des optimisations que nous voulions faire pour l’expérience ici était de la rendre un peu moins bavarde. Alors oui, nous l'annonçons, nous allons, nous programmons modale avec la forme dès leur arrivée, de sorte que cela leur permette de savoir que la modale qu'ils ont évoquée est en fait celle sur laquelle ils se concentrent actuellement.

[19659] Aaron Pearlman: Mais nous n'avons pas besoin de l'annoncer encore et encore et encore s'ils devaient parcourir ce changement en passant par ce mode. Il s’agit donc d’une petite optimisation qui serait probablement totalement invisible pour la majorité des utilisateurs de souris cités. Mais cette petite optimisation, vous pouvez imaginer si j’utilisais beaucoup de modaux pour remplir fréquemment des formulaires et que j’étais un utilisateur qui utilisait une technologie pour clavier uniquement ou une technologie d’assistance que cette optimisation ajouterait avec le temps. Ainsi, les petites expériences utilisateur que nous pouvons faire peuvent avoir une grande influence sur les soins que nous pouvons apporter à nos conceptions, de manière à ce que ce soit l'expérience la plus souvent possible.

Aaron Pearlman: En ce qui concerne le traitement de la focalisation, le dernier sujet dans lequel nous allons nous intéresser est la gestion de la focalisation elle-même. Et nous en avons vu un exemple: que peut-il se passer si l’attention peut se perdre dans certains types de manipulation? Mais au lieu d’être un problème important, la façon dont vous gérez votre objectif peut changer considérablement l’expérience d’un individu. Vraiment, la règle concernant la gestion du focus, en particulier avec les deux instances que nous allons examiner maintenant, à savoir, supprimer et ajouter des éléments à votre espace de travail ou quoi que vous travailliez, est que… Cela peut définitivement changer la façon dont quelqu'un interagit avec elle. Nous voulons donc faire en sorte que vous suiviez l'expérience attendue pour quelqu'un qui est un utilisateur de souris uniquement ou un utilisateur voyant, un utilisateur de souris uniquement devrais-je dire.

Aaron Pearlman: Dans ce cas, nous allons regarder… car ici nous allons regarder… OK, laissez-moi traîner. Attends une seconde. Je vais devoir sortir ça d’ici temporairement. Nous y voilà. Donc, vous ne devriez pas être capable de voir un exemple de modal que j'ai conçu, c'est en fait un simple modal, nous en avons deux types d'images et une seule montre simplement ce qu'il y a en dessous du pli au lieu d'en créer une vraiment , vraiment faux ou je viens de le séparer afin que vous puissiez voir ce qui était en dessous dans le pli. Et sur le côté droit, si vous regardez, il y a une icône de corbeille en cours de mise au point. Et donc, lorsque nous cliquons sur l'icône de la corbeille, en supposant qu'il n'y ait pas de dialogue disant: "Êtes-vous sûr de vouloir le supprimer?"

Aaron Pearlman: Supposons simplement que c'est pas le cas. La vraie question se pose alors: que se passe-t-il avec la focalisation là-bas? Parce que lorsque cette icône de corbeille est atteinte ou est sélectionnée, elle va supprimer les instructions qui se trouvent ici, et elle va également se supprimer elle-même. Alors, où va la concentration? En tant que concepteurs, nous voulons donc choisir l’orient de la priorité, sinon les navigateurs choisiront cette option si vous créez une application Web à l’intérieur d’une application Web et nous ne voulons pas que le navigateur choisisse l’orient de la priorité, car a tendance à jeter des objets au corps. Donc, dans ce cas, nous voulons vraiment nous concentrer sur le prochain élément focalisable, pas nécessairement… ce que j'appellerais l'analogue à cela, qui se concentrera sur la prochaine poubelle, la poubelle pour

Aaron Pearlman: Et la raison pour laquelle nous voudrions faire cela, c'est que vous pouvez imaginer si quelqu'un frappe accidentellement, en utilisant son clavier seulement, retourne, puis appuyez sur retour à nouveau. Il aurait simplement supprimé deux ensembles d'instructions au lieu d'un. Et nous voudrions éviter cela pour un utilisateur de souris uniquement en séparant littéralement ces éléments. Mais nous voulons aussi pouvoir empêcher cela parce que l’objectif est ce qu’ils utilisent pour traverser cela. J'ai donc pensé montrer un autre exemple de ce que nous faisons lorsque nous supprimons ici le dernier élément de toute une section.

Aaron Pearlman: Nous avons maintenant des instructions de cuisson, les dernières instructions. pour l'instruction un, où se concentre l'attention ici? Pour ce qui est de celui-ci, il en va de même pour le précédent, c’est-à-dire qu’il ira jusqu’au prochain objectif, mais sera à nouveau rempli, ce qui est l’ingrédient 1 pour la même raison que nous ne voudrions pas lancer. c'est à la poubelle de nouveau parce qu'alors si quelqu'un appuyait encore sur select ou sur return, nous serions… Ils supprimeraient accidentellement deux choses qu'ils ne voulaient pas involontairement.

Aaron Pearlman: Pour la même raison, nous ne voudrions pas nécessairement ajouter cela à l'un de ces liens, car nous aurions le problème inverse: ils ajouteraient également des éléments par inadvertance. Et nous ne voulons pas nécessairement que cela aille au corps, parce que nous allons au corps et votre utilisateur de Voice Over, votre assistant technique, va juste recommencer à parler du modal ou plutôt de vous laisser continuer à interagir et faites ce que vous aviez l'intention de faire.

Aaron Pearlman: Enfin, le dernier exemple que j'ai ici est ce que nous faisons lorsque nous allons supprimer le dernier élément de cette affaire, dans le modal ici, il ne reste plus rien. Où pourrais-je l'envoyer? Et c’est à la discrétion des concepteurs de décider où aller. Il ne sera pas inaccessible si vous choisissez de l'envoyer aux vêtements ou de vous concentrer peut-être sur l'annulation. Cela ne le rend pas nécessairement inaccessible, c’est juste ça, c’est vraiment ce que vous attendez? Quelles informations voudriez-vous transmettre? Quel récit voulez-vous transmettre à cet utilisateur et où nous avons choisi de l'envoyer comme nous le renverrions à l'en-tête pour l'informer qu'il est toujours sur le modal, qu'ils sont toujours là, nous n'avons pas par exemple ici.

Aaron Pearlman: Voilà donc un changement de programme car, comme je l’ai dit, ce n’est pas une voix terrible. Ce n’est pas un élément aussi focalisable que celui-là. Nous nous sommes donc tournés vers cela dans cet exemple particulier. Voilà donc quelques exemples intéressants de ce que vous pouvez faire avec focus lorsque vous supprimez des éléments. Je pensais donc que vous pouviez… Je montrerais un exemple de ce que vous faites lorsque vous ajoutez un élément. Donc, j'ai un exemple de ce qui est vraiment rapide ici pour la rétention de la focalisation.

Aaron Pearlman: Et ici, nous allons frapper ceci en ajouter une autre… vous pouvez simplement vous concentrer ici, ajouter un autre ingrédient et concentrez-vous ensuite sur l’ingrédient réel dans ce cas, le champ que vous avez ajouté pour deux raisons, l’une, parce que l’hypothèse est en ajoutant le champ suivant que nous voulions interagir avec celui-ci et qui serait le comportement attendu si j’étais un Utilisateur de la souris uniquement, j'ajouterais probablement cela pour pouvoir commencer à taper du texte.

Aaron Pearlman: Encore une fois, nous ne voudrions pas nécessairement rester concentrés sur un autre ingrédient pour la même raison que si ils reviennent à nouveau, nous ne voudrions pas ajouter deux ingrédients au lieu d'un. Ce devrait être le problème opposé de l'exemple précédent. Et le dernier, le dernier exemple que je voulais montrer, parce que je pense que cela pourrait valoir la peine de le montrer, c’est… en fait, j’ai cet exemple, je vais peut-être en parler un peu plus tard. Mais je peux le décrire assez, justement, si vous avez ce que vous faites quand vous évoquez un modal. Par exemple, vous avez sauvegardé quelque chose, le modal s'en va, où va maintenant le focus et ce que nous avons tendance à faire, mais la règle générale est que vous voulez le renvoyer à l'élément que [inaudible 00:31:03] obtient.

Aaron Pearlman: Donc, si vous imaginez que si vous avez un petit crayon de modification et que vous le sélectionnez, vous ouvrez le modal, vous remplissez ce modal, vous cliquez sur Enregistrer, vous souhaitez renvoyer le focus à celui-ci. élément interactif qui a tendance à être… ou nous faisons. Il peut y avoir des cas où vous souhaitez l'envoyer ailleurs. Si c’est un sorcier et que cela va ailleurs après cela, toujours à la discrétion du concepteur, à quel récit vous essayez de nous dire où aller. Mais pour des choses qui ressemblent à celle… l'instance que je viens de décrire, qui est très courante. Vous évoquez une modale, ou vous en faites quelque chose et elle est rejetée pour cette raison et le contexte ne change pas nécessairement.

Aaron Pearlman: Et vous ne voulez pas envoyer cela se concentrer à nouveau là où il était. Et la raison en est qu’un utilisateur utilisant uniquement un clavier ou une technologie d’assistance peut se rappeler où il se trouve. Car rappelez-vous qu’ils se trouvent dans cet espace et que cet espace est quelque peu linéaire quant à la façon dont ils se déplacent, en particulier lorsque vous utilisez la ville pour tout traverser. So, I think we’re just about at 40 minutes, we just about at time for all the examples and things that I had. So I’m going to pass it back over to Scott.

Scott: Thanks Aaron. That was pretty awesome, and we do have a lot of questions from the attendee as well as a few from individually who couldn’t make it today because he’s traveling. So Poan who’s a regular attendee of our webinars asks, “When you’re removing items, shouldn’t we have an acknowledgement of the action and move the focus there and then move to the next element?”

Aaron Pearlman: when removing an item, should you have an … are you referring to like a notice like a toast or are you saying should you have a live region that is letting you know what’s happening? If you’re shifting focus to remove an item, like the ones that I just showed in that particular instance the evocation of that delete for example, should be adequate enough to let them know that they in fact deleted.

Aaron Pearlman: It should be gone. Also, if they’re using Voice Over, it’s going to pick that up as well. If you’re interacting with something and it’s making changes somewhere else, for example, like you did something and then it changed some metrics somewhere for example, you’re probably going to want to use a live region that does something politely to let them know that that’s happened. That’s something that’s sort of out of the purview of where you’re working in specifically. I hope that answers your question. It might be diving into something that’s a little bit more technical. I may need to follow up a little bit more with some of it, if we’re going to get into deep technical implementation stuff.

Scott: Perfect.

Aaron Pearlman: My developer, so they don’t steer you arrive but in general that tends to be the case. The example that I showed should be adequate. If you want it to because it’s a delete, you could have an interim part where you throw an alert and say, “Are you sure you want him to delete this?” Which case you’re just reinforcing it further what happening.

Scott: Great. So, yeah, try and keep the questions user experience focused. So from a user experience standpoint, how would you manage focus for notification messages?

Aaron Pearlman: Focus for a notification? I can show you one if you’d like to see.

Scott: Sure.

Aaron Pearlman: We can pick back random because we happen to have toasts, which are notifications. So I’m going to open up toasts here. So this is actually being focused right now. This toast is evoked and it is being focused right now and you can actually, as you can see, you can tab into the clause right here. So, it depends. So, if I finished something and I wanted to notify them that it’s been finished and I toasted it, then I want to focus it so that they can see that it’s been … that I’m communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don’t use them very often, so I’m going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that’s an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that’s an animation wise can’t animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you’re doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we’ll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you’re going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don’t know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It’s a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they’re tricky, but that doesn’t mean that they can’t be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia’s asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I’m not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that’s something that our developers have encountered before and how they’ve gotten around it. So we’ll make a note of that and I’ll try and circle back. But for the first one what’s a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don’t want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I’m a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Skip to main content.

Scott: Okay. That’s a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it’s accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you’re working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you’ll get it and you’ll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it’s meeting at 4.5 to one.

Aaron Pearlman: So that’s one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it’s an interactive element that it’s a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That’s things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that’s our accessibility engine. It’s totally free. It’s a little extension for chrome and Firefox and just hit the run button and see what you find. It’s a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you’re on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It’s a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you’ve been doing design and UX for so long, but you’ve only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I’ve always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don’t know as a person that very much appeals to me. And so it was just a good fit to learn design. That’s really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don’t not design accessible anymore. It’s like UX designers don’t design unless you’re being tongue in cheek, you’re not going to design something to have a really poor user experience. It’s going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can’t like not think about accessibility as I do designing and that’s a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn’t think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn’t know focus was a state that you had full control over as well.

Scott: Our industry there’s always a new trend that’s just kind of how it goes, that’s the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don’t know if there’s anything that’s super trendy right now when I look at different sites and web applications that couldn’t be designed excessively. I think there are pitfalls that that we’ve been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That’s one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it’ll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that’s conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that’s conveyed is if what’s being conveyed is that the person is doing something that’s, you wouldn’t necessarily describe it as a man standing. It could be that they’re playing baseball. Maybe that’s the important part. So make sure that the, that the, the alternative text matches with the intended information that’s trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn’t accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don’t do a great job of being evoked on focus as well. And they don’t always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we’re doing wireframes and design of the onset of the project, they’re inherently not inaccessible. It doesn’t really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they’re done with it. Do you do audits throughout the process, at the end of the process? Like what’s the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I’ll go through a discovery process. They’re going to be privy to that, they’re not going to see it when the design is fully finished.

Aaron Pearlman: They’re going to see it throughout the design. I’ll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I’ve done, some of these ability testing that I’ve done. So, hopefully at that point nothing’s really new to them that I’m not going to get any 11th hour that we can’t even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there’s a great resource that one of the designers from Adobe put together. I know there’s like a pdf, there may be. There’s like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don’t think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It’s a really, really wonderful resource. It’s all included in here as well. That’s a great way of saying, “Here’s part of my prototype and here’s the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: So that’s one thing that we do is I annotate my designs pretty heavily. Everything from the size of how certain things are supposed to be to the Hex codes or RGBA values for what’s supposed to look like and feel like. But then also, there are accessibility annotations that you can add to it too.

Aaron Pearlman: And then just communicating, looking through the builds as they go through, making sure things like if you made any custom focuses that those custom focuses, look great, check the color contrast, make sure that it’s coming through, that the font choices that you’ve had there are some fonts that when their weight is higher and they’re bigger. Their color contrast it doesn’t have to be a 4.5. It can actually be a little bit lower, but you just going to want to just keep an eye on those things. Just as you would keep an eye on the experience stuff as well. You’re going to want to keep an eye on that stuff that you’ve been mindful for and annotated in your designs.

Scott: So we have a couple minutes left here. So I’ll ask one more question. Some people feel accessibility can stifle creativity throughout the design process. Is that something that you’ve come across? How do you think creativity fits into accessible design?

Aaron Pearlman: Sure. That was one of my initial reactions to having to design accessibly, was that somebody basically put the handcuffs on me and says, “There’s a much smaller box you have to be able to work in.” It’s true that designing accessibly means that there can be some more challenges because there’s more rules that you have to follow. But in the end, I found that the experience ends up being better and I haven’t … Once I removed that misnomer and began to do more and more accessible designs that were WCAG 2.0 AA accessible, I noticed that I can pretty much do everything that I wanted to do.

Aaron Pearlman: I would just need to sometimes express or solve problems in a slightly different way than I did before. I think a lot of people when they think about designing accessibly … I’ll give you a very specific example. When they think about designing accessibility they think, “Oh, well, I can’t do all of these fancy visualizations, for example. I’m not going to be able to do all of those things because they’re not going to be accessible, because if an individual can’t see them, I’m not going to be able to do that.”

Aaron Pearlman: I was designing a visualization that was just basic, just sort of line graph and under those, there was a line graph, on the x axis there was I think it was time and on the y axis it was usage or something like that. And there was this nice little gradient that went down from it and there was sort of these light lines that went behind it to delineate the months and time. And when I talked with one of my subject matter experts about making it accessible, it turned out I was sure he was just going to be like, “Nope.” But he said that there was actually just a few things that I needed to do to make this really nice looking graph accessible. One, that line at the top it need to pass color contrast because that’s actually what’s conveying the information of the trend over time.

Aaron Pearlman: The gradiated stuff underneath it’s just decoration and as long as it’s not interrupting the passing of color contrast of that and the y and x axis lines and ended up being okay. Those lines behind it were okay, but I ended up adding tick marks at the bottom there to indicate that. And then when I hovered and focused over, because sometimes you can hover over and it’ll add a dot to part of the line graph, just making sure that the dot itself would pass color. contrast. I did that by doing the sort of donut thing where you put a white dot with another dot or I should say has it like a large stroke on the outside of it as well.

Aaron Pearlman: And then I added a little bit of treatment in there that would bring the those lines that were faded back forward. And it all pass color contrast and ended up being fine. It was really pretty visualizations that passed. Now granted, I’m not getting into all of the accessible name stuff and being able to do that. Many libraries are on that. Put that aside, at least we call a contrast because is where I think a lot of designers struggle with. You can do it.

Aaron Pearlman: It’s just about being really mindful about those types of things, and getting more examples and just trying and trying different things, and having other people that you can pitch those ideas with and bounce them back and forth and checking again, just really do that. I don’t think it really inhibits anything. It just makes you have to think a little bit more clearer about how you’re going to do it and making sure that you’re looking through the lens of how an individual engaged with this if they had low vision, or if they couldn’t see it at all or couldn’t hear if you’re building a media application.

Scott: One more question, but I think we should’ve touched upon it. What stage in your process do you start thinking about accessibility? I’m going to assume throughout the whole process.

Aaron Pearlman: Yeah, it is throughout the whole process. I’ll be a little bit more rather than … I know who I say that and it sounds a little flippant. So, early on when you’re doing things like low fidelity prototyping, you’re going to be thinking about things like some tab order stuff. You’re going to be thinking about maybe headings and structure, things like that. Those are the type of accessibility stuff that you think about. Later on as it gets higher in fidelity, you’re going to be thinking about things more like, colors and your pallets that you’ve chosen, maybe accessible names, alternative text for anything that may merit that, you may be thinking about, if you’re doing any custom focuses, for example, that’s probably where you’re going to start to think about that.

Aaron Pearlman: It doesn’t mean that you couldn’t think about it when you’re doing low fidelity just means in general, when I go through my process those things tend to fall into those categories. You’re thinking about accessibility the whole time, but you’re not always thinking about everything with it as you’re in lower fidelity stuff, and you’re ideating, and you’re just thinking about ideas, and you’re just working through ideas, let that creative stuff go through as you become more attuned to accessibility, it will just sort of intrinsically make its way in and there’ll be less of a conscious thing.

Scott: Yeah. Fair enough. Well, on that note, we’ve run out of time, Aaron. Thank you very much for your time and—

Aaron Pearlman: That was great. I’ve had a wonderful time.

Scott: You’re going to be at the next couple of Smashing conferences, I think.

Aaron Pearlman: I will be at the one in New York. I’ll be at the one in New York.

Scott: Okay. And are you guys doing a workshop there?

Aaron Pearlman: Yes, we’re.

Scott: Okay. Awesome. Well thank you again for your time and just to let see the members that are still watching, we’ve two webinars next week. The first one is the Power of Digital People, with Kristina Podnar. And then we have a number three in our series with Andrew Clarke, Inspired Designs Decisions, number three inspired by Ernest Joural. Thank you very much everybody for attending today. And again, this recording will be available in dispatching membership panel once we’re done editing it and we hope to see you all next week. So thanks again Erin.

That’s A Wrap!

We kindly thank Smashing Members from the very bottom of our hearts for their continuous and kind support — and we can’t wait to host more webinars in the future.

We couldn’t be happier to welcome Aaron to our upcoming SmashingConf New York (October 15-16) — we’d love to see you there as well!

Please do let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it.

(il)