How to Design and Develop for Web Accessibility: A Workshop Summary

La version française est en dessous de l’anglais 👇

Hi, my name is Ian, and I’m a Developer Fellow with the 5th cohort of the Code for Canada Fellowship program. My teammates Malik (Product Manager) and Gillian (UX Designer) and I are working with the Canada Energy Regulator (CER) to improve the tools Canadians use to participate in hearings regarding energy projects regulated by the CER.

More info, in an earlier article.

During early meetings with the Digital Transformation Team at the CER I noticed that there’s a fair amount of interest in the topic of web accessibility. I happen to know a little bit about this topic and thought it might be nice to encourage this interest and get some discussion going. Part of our goal as C4C fellows is to promote building digital capacity within our host organization. I figured hosting a lunch and learn workshop on the topic could be a good way to encourage people to think more about accessibility.

Keep reading for some challenges, learning, and web accessibility tips!

Challenges

Structure

I’ve put together an e-learning course about web accessibility before as part of a volunteering effort, but that was longer and more detailed. My first challenge was deciding how to structure the workshop to maximize the learning that could happen in half an hour.

I chose to start by describing some of the needs people have in response to their physical and cognitive abilities followed by how they might use the web differently as a result. I figured it would be helpful to start with the “why” behind the practices of creating an accessible Web. I ended the presentation with some information about evaluating a website’s level of accessibility, but before this came some tips that people can keep in mind when creating for the web.

Content and Audience

Lots of considerations go into making websites accessible, and I needed to choose which ones to focus on for this presentation. Here I found three sub-challenges: How much background knowledge should I assume? Should I break up the presentation into two, one for developers and one for designers? And which accessibility tips would make the most impact if people were to keep them in mind?

Background Knowledge and Audience

I decided to tailor the presentation to an audience that’s new to accessibility but highly comfortable using the web and has some experience creating for it. This was for the Digital Transformation Team, so some members definitely knew a lot of what I talked about. Nonetheless, I felt it was more important not to leave anybody out and to try to give everyone a common foundation.

Which Content?

I tried to choose tips and advice that would be useful for anyone creating for the web, although I did have a brief section to introduce best practices for writing accessible HTML. The tips I chose were a combination of ones that are easy to implement (e.g., writing good link text and alt text for images) and ones that go a long way but are relatively easy to think about (e.g., colour contrast and making pages navigable for people who use a keyboard but no mouse).

Here’s a summary of some of my top tips and advice:

• Make sure everything your website offers can be accessed or performed by someone using a keyboard and no mouse. Not only is this how some users use the web, but it’s a great start towards making one’s site robust with respect to supporting various assistive technology. It’s also relatively easy to test for. Learn more about keyboard accessibility.
• Make all information machine-readable. Why? Because assistive technologies are machines. This is a way I like to think about many topics like providing text alternatives for non-text media (such as alt text for images, closed captions for videos, and transcripts for podcasts), writing meaningful link text, making sure that no information is conveyed solely by colour (e.g., form errors), labelling all inputs, and writing good semantic HTML.
• Provide sufficient colour contrast.
• Provide controls for content that begins playing or moving automatically (such as videos or sounds that auto-play or image carousels that cycle automatically).
• Make interfaces and text easy to use and understand.

Learnings

Practice Makes Perfect

I’m a bit shy and not generally the greatest public speaker, so I knew there was no way I’d be able to just wing this. I was tempted to simply spend the morning of the workshop practicing, but I know that spaced repetition is a much more effective way to build up skill. I therefore made up a spaced practice schedule for the week leading up to the workshop. I’m pleased with the result, since I felt quite comfortable giving the presentation when it came time to do so.

There is Interest and Enthusiasm About this Topic

At the beginning, I invited anybody who had questions or comments to speak up during the presentation. Since we’re working remotely due to the pandemic, I was giving the presentation virtually. Being in full-screen presenter mode in PowerPoint felt like I was talking into the void. Nobody was saying anything, and I couldn’t see anybody’s faces. Later, when I was done the slides, I realized that there was lots of lively discussion going on in the chat. There was also lots of voice discussion after the slides were done. People were having fun sharing their reactions and connections to the content, people they knew who had needs not commonly met by websites, examples of particularly good or bad design, and more.

Some people treat web accessibility as an afterthought and others groan about it being extra work or getting in the way of their creativity. Luckily, these aren’t the only options. I think the enthusiastic response to the workshop shows that people are more interested in this topic than one might expect. The more that people are talking about making the Web accessible, the better, and I’m happy I could help foster some of this conversation.

Have a digital tool you'd like to make more accessible for users? Reach out to our Inclusive User Research team for help!

Comment concevoir et développer pour l’accessibilité du Web : Un résumé d’atelier

Bonjour, je m’appelle Ian. Je suis le développeur au sein de la cinquième cohorte de collaborateurs de Code for Canada dont la mission consiste à améliorer la gouvernance numérique. Mes collègues, Malik (gestionnaire de produit) et Gillian (conceptrice de l’expérience utilisateur), et moi collaborons avec la Régie de l’énergie du Canada afin de bonifier les outils utilisés par la population canadienne pour participer aux audiences concernant de nouveaux projets énergétiques assujettis à la réglementation fédérale.

Plus d’information dans un article précédent.

Au cours des premières rencontres avec l’équipe de la transformation numérique de la Régie, j’ai remarqué que le sujet de l’accessibilité du Web suscite beaucoup d’intérêt. Il se trouve que je connais un peu ce sujet et j’ai pensé qu’il serait bon de mettre en avant cet intérêt et de lancer le dialogue. Notre but en tant que collaborateurs de Code for Canada consiste entre autres à promouvoir le renforcement de la capacité numérique au sein de notre organisation hôte. J’ai pensé que la tenue d’une conférence-midi sur le sujet pourrait être un bon moyen d’encourager les gens à réfléchir davantage à l’accessibilité.

Continuez de lire pour en savoir plus sur les défis et apprentissages, et obtenir des conseils sur l’accessibilité du Web!

Défis

Structure

J’ai déjà organisé un cours en ligne sur l’accessibilité du Web dans le cadre d’une activité de bénévolat, mais il était plus long et plus détaillé. Mon premier défi a consisté à déterminer comment structurer la conférence d’une demi-heure de manière à maximiser l’apprentissage.

J’ai choisi de commencer par décrire les besoins de certaines personnes liés à leurs capacités physiques et cognitives, ainsi que les différents usages qu’elles pourraient faire du Web. J’ai pensé qu’il serait utile de commencer par présenter les raisons de la création d’un site Web accessible. J’ai terminé la présentation en donnant de l’information sur l’évaluation du niveau d’accessibilité d’un site Web, mais avant cela, j’ai donné quelques conseils que les gens peuvent garder à l’esprit lorsqu’ils créent pour le Web.

Contenu et auditoire

De nombreux facteurs entrent en ligne de compte pour rendre les sites Web accessibles, et je devais choisir ceux sur lesquels je me concentrerais durant cette présentation. Les trois sous-défis qui se posaient étaient les suivants : Quel était le niveau de connaissances préalables de mon auditoire? Devrais-je diviser la présentation en deux parties, une pour les développeurs et l’autre pour les concepteurs? Et quels conseils sur l’accessibilité seraient les plus utiles aux participants?

Connaissances préalables et auditoire

J’ai décidé d’adapter la présentation à un auditoire qui ne connaît pas grand-chose à l’accessibilité, mais qui est très à l’aise avec le Web et qui possède une certaine expérience en création de contenu pour le Web. Comme la présentation était destinée à l’équipe de la transformation numérique, certains membres connaissaient assurément bon nombre des notions dont j’ai parlé. Néanmoins, j’estimais qu’il était plus important de ne laisser personne de côté et d’essayer de donner à tous les participants une base commune.

Et le contenu?

J’ai essayé de formuler des conseils qui seraient utiles à toutes les personnes créant du contenu pour le Web, mais une brève section traitait des pratiques exemplaires liées au HTML accessible. J’ai formulé des conseils faciles à mettre en œuvre (p. ex., rédiger un bon texte de lien et texte optionnel pour les images) et d’autres qui sont très utiles tout en étant évidentes (p. ex., contraste des couleurs et faciliter la navigation des personnes qui utilisent un clavier plutôt qu’une souris).

Voici certains de mes principaux conseils :

• Assurez-vous que tout ce qui est offert sur votre site Web peut être consulté ou exécuté par une personne qui utilise un clavier plutôt qu’une souris. Certains utilisateurs utilisent le Web uniquement de cette façon, et il s’agit d’un excellent point de départ pour permettre à un site de soutenir différentes technologies d’assistance (en anglais seulement). C’est aussi relativement facile à vérifier. Renseignez-vous sur l’accessibilité du clavier (en anglais seulement).
• Faites en sorte que toute l’information soit lisible par machine. Pourquoi? Parce que les technologies d’assistance sont des machines. C’est une façon pour moi d’aborder de nombreux sujets.
• Fournir des équivalents texte pour les médias non textuels, comme du texte pour les images (en anglais seulement), des sous-titres pour les vidéos et des transcriptions pour les balados.
• Rédiger un lien de texte représentatif (en anglais seulement).
• S’assurer qu’aucun renseignement n’est transmis uniquement au moyen de la couleur (p. ex., erreurs de forme).
• Étiquer tous les intrants.
• Utiliser le HTML sémantique.
• Assurez-vous que le contraste des couleurs est adéquat (en anglais seulement).

• Fournissez des commandes pour le contenu qui commence à jouer ou à bouger automatiquement (comme les vidéos ou les sons qui jouent automatiquement ou les carrousels d’image qui se déplacent automatiquement).
• Assurez-vous que les interfaces et le texte sont faciles à utiliser et à comprendre.

Apprentissages

Le secret, c’est de s’exercer

Je suis un peu timide et je ne suis généralement pas le meilleur orateur. Je savais donc qu’il était impossible que je puisse simplement improviser. J’étais tenté de simplement passer la matinée de la conférence à m’exercer, mais je sais que les répétitions espacées sont un moyen beaucoup plus efficace d’acquérir des compétences. J’ai donc établi un calendrier d’exercices espacés pour la semaine précédant la conférence. Je suis satisfait du résultat, car j’étais tout à fait à l’aise de faire la présentation le moment venu.

Intérêt et enthousiasme à l’égard de ce sujet

Au début, j’ai invité tous les participants qui avaient des questions ou des commentaires à s’exprimer pendant la présentation. Puisque nous travaillons à distance en raison de la pandémie, j’ai fait la présentation virtuellement. En mode présentation PowerPoint plein écran, j’avais l’impression de parler dans le vide. Aucun participant ne parlait et je ne voyais personne. Plus tard, quand j’ai terminé la présentation des diapositives, j’ai réalisé qu’il y avait une discussion animée dans l’espace de clavardage. Une discussion a aussi eu lieu après la présentation des diapositives. Les participants s’amusaient à partager leurs réactions et à faire des liens avec le contenu, mentionnant des personnes qu’ils connaissaient et qui avaient des besoins qui n’étaient généralement pas satisfaits par les sites Web, donnant des exemples de conception particulièrement bonne ou mauvaise, et plus encore.

Certaines personnes considèrent l’accessibilité du Web comme une considération secondaire, tandis que d’autres se plaignent qu’elle leur cause un surplus de travail ou nuit à leur créativité. Heureusement, ce ne sont pas les seules options. Je pense que l’accueil positif réservé à la conférence montre que les gens s’intéressent davantage à ce sujet qu’on pourrait s’y attendre. Plus les gens parlent de rendre le Web accessible, mieux c’est, et je suis heureux d’avoir pu aider à favoriser ce dialogue.