Accessibility Toolkit: Understanding WCAG once and for all!

A presentation at Inclusive Design 24 in September 2020 in by Marcelo Sales

Slide 1

Slide 1

Accessibility Toolkit

Initial slide containing an image of the cards…

Slide 2

Slide 2

Sorry for my bad english...

Sorry for my bad english…

Hello people, I will start my presentation by apologizing to everyone. I will do it in Portuguese, because I don’t trust my English unless it is for reading, in fact, not even for reading… I tried to leave the slides in English to make it easier for everyone to understand. I hope you used the correct terms … :) If everything goes wrong, blame it on Google Translate! :D

Ok, let’s go!

Slide 3

Slide 3

Who is Marcelo Sales?

Designer developing digital products for 20 years. Invited professor of Accessibility in courses at ESPM, FAAP and Belas Artes and Accessibility Instructor at Mergo User Experience and FIAP MBA “UX Design & Strategy” (recognized institutions in Brazil). Member of the W3C Brasil Web Accessibility Specialists Group. At Itaú (the largest private sector bank in Brazil) since 2008, currently on the Design Ops team in CX working with UX and 100% focus on accessibility.

Personal site: http://marcelosales.work

Slide 4

Slide 4

Why create a toolkit accessibility?

one minute… before talking about it…

Slide 5

Slide 5

What is WCAG?

Slide 6

Slide 6

WCAG

WCAG

Slide 7

Slide 7

Web Content Accessibility Guidelines

Content is focus!

Ref.: “I just want to note that it’s Web CONTENT Accessibility Guidelines, not Web PAGES Accessibility Guidelines.” - John Foliot - Apr 28, 2017 (twitter)

Slide 8

Slide 8

search for WCAG on Google in Portuguese… more than 8 million results.

Slide 9

Slide 9

search for WCAG on Google in English… more than 15 million results.

Slide 10

Slide 10

when accessing any of the documents, a world of information opens…

Slide 11

Slide 11

at first, everything is beautiful… expressions like “omg” and “wow” are normal.

Slide 12

Slide 12

then… how much information do I have to study… :( - expressions like “shit” and “wtf” are normal.

Slide 13

Slide 13

Why create a toolkit accessibility?

Slide 14

Slide 14

Why study WCAG it takes time, sometimes boring, it’s complicated…

Slide 15

Slide 15

But that thought contributes especially with two things…

  1. failure to understand the guidelines (and consequently)
  2. the complete failure to adopt the guidelines

Slide 16

Slide 16

Challenges and research opportunities in accessibility and digital inclusion in Brazil Talita Pagani’s article brings reflections on the theme published on Feb 26, 2018

Challenge 1: Adoption of accessibility recommendations on websites and scientific publications

Is there, in fact, a difficulty in understanding accessibility recommendations, even with adaptation to the Brazilian context?

ref: http://mwpt.com.br/desafios-e-oportunidades-de-pesquisa-em-acessibilidade-e-inclusao-digital-no-brasil/

Slide 17

Slide 17

Yes!

Yes! There is a great difficulty for everyone involved in digital products, in understanding the guidelines.

Slide 18

Slide 18

The first idea for the toolkit...

Slide 19

Slide 19

and it all started with a card sorting...

Slide 20

Slide 20

Itaú designers applying a card sorting exercise in 2017…

Slide 21

Slide 21

Has a toolkit for everything...

Slide 22

Slide 22

Those who work with design thinking methods know that there are toolkits for almost everything… so I went to find out if there was any WCAG … in this case, like IDEO.

Slide 23

Slide 23

or like the US Government Method Cards…

Slide 24

Slide 24

maybe Mozilla’s…

Slide 25

Slide 25

e tem também o da Microsoft, sobre inclusão…

Slide 26

Slide 26

maybe Hyper Island…

Slide 27

Slide 27

and there are also those from the Method Kit that have a toolkit for everything literally…

Slide 28

Slide 28

even for bathrooms…

Slide 29

Slide 29

I mean, for ALMOST everything… Missing one with WCAG!

Slide 30

Slide 30

Creation process...

Slide 31

Slide 31

Toolkit MVP…

Slide 32

Slide 32

annotations and card layout…

Slide 33

Slide 33

Printing test and proofreading…

Slide 34

Slide 34

some cards have gone through up to 6 revisions…

Slide 35

Slide 35

Construction prototype...

Slide 36

Slide 36

Inkjet printing…

Slide 37

Slide 37

cut and paste…

Slide 38

Slide 38

packaging…

Slide 39

Slide 39

assembled packaging…

Slide 40

Slide 40

standards validation…

Slide 41

Slide 41

instructions…

Slide 42

Slide 42

final set…

Slide 43

Slide 43

the most important… make it available for free by creative commons (*feel free to use, translate, edit, customize and redistribute)

Slide 44

Slide 44

Considerations about inclusive design...

Slide 45

Slide 45

coloblind friendly mode for the cards… and Comparison between Arial and Tiresias Infofont…

  • after all, what is the letter?
  • loud and clear, commander!

Simply proving how Arial is a horrible font! :)

Tiresias Infofont Characters easily identifiable on canvas or in prints, small or large.

Slide 46

Slide 46

online version...

guia-wcag.com wcag-guide.com (soon)

Slide 47

Slide 47

English version available next week…

This is a PWA!

Slide 48

Slide 48

Feedback and repercussions...

Slide 49

Slide 49

The published article generated a series of positive comments … Original article published on Mar 07, 2018 http://bit.ly/acessibilidade-toolkit

Slide 50

Slide 50

more comments … Original article published on Mar 07, 2018 http://bit.ly/acessibilidade-toolkit

Slide 51

Slide 51

The toolkit started to be used as reference in several presentations

  • photo of Felipe Barreto presenting at UX Conf Redux in Porto Alegre

Slide 52

Slide 52

And people and companies started printing and sharing…

Slide 53

Slide 53

good example of customization

Slide 54

Slide 54

good example of customization

Slide 55

Slide 55

And W3C Brasil supported the project by distributing it in an exclusive version at the Web.BR 2018 event…

*thanks to Reinaldo Ferraz, for that… :)

Slide 56

Slide 56

Next steps...

Slide 57

Slide 57

Next steps…

  • Launch a crowdfunding for the printed version…
  • Create new card organization filters…
  • Launch the English version (in some days)…
  • Search partners to launch in other languages…
  • Improve my english! :D

Slide 58

Slide 58

Thank you!

This presentation is available here: http://bit.ly/a11y-toolkit-id24

  • http://guia-wcag.com
  • http://wcag-guide.com
  • http://acessibilidadetoolkit.com

Instagram and Twitter: @msales LinkedIn linkedin.com/in/msales78