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

Ian Cappellani

January 28, 2021

0 AT8 Q Wm H Mo Wql SP29

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.

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.