How to Design and Develop for Web Accessibility: A Workshop Summary
![Ian Cappellani](https://cfc-dev.loafingshed.ca/uploads/_96x96_crop_center-center_none/Ian.png)
Ian Cappellani
January 28, 2021
![0 AT8 Q Wm H Mo Wql SP29](/imager/uploads/48092/0_AT8QWmHMoWqlSP29_78c4d319f3dddd6b3c29a1fcb1c5dc01.jpg)
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.