CodeNewbie Community 🌱

Cover image for [On-Demand Talk] Demystifying Web Accessibility Contributor

[On-Demand Talk] Demystifying Web Accessibility Contributor

josefineschaefer on September 23, 2021

About this talk Right after I started my first job, the client I was working for had to implement web accessibility as a legal requi...
Collapse
 
ellativity profile image
Ella (she/her/elle)

Thanks for joining us here in the discussion for @josefineschaefer 's CodeLand 2021 talk!

We would love to know what questions you'd like Josefine to answer in the Speaker Panel later on today: do you have any questions about a11y or WCAG? What about your own implementation? Josefine would love to hear from you!

Collapse
 
jrrohrer profile image
Jessie Rohrer

Are there any certifications for accessibility?
Also, are there resources that help determine whether animations are used in an accessible way?

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Hi @jrrohrer - the International Association of Accessibility Professionals (IAAP) offer well-recognised certifications in accessibility! Let me know if you want to chat about them - I recently completed the CPACC (Certified Professional in Accessibility Core Competencies) and I'm now preparing for the WAS (Web Accessibility Specialist).

Thread Thread
 
jrrohrer profile image
Jessie Rohrer

Thanks for that info and the offer to chat :) I am signed up for today's workshop on accessibility, and will definitely reach out if I have questions.

Thread Thread
 
s_aitchison profile image
Suzanne Aitchison

Awesome! See you in the workshop 😄

Collapse
 
josefineschaefer profile image
josefineschaefer

You mean certifications for your own qualifications, right? :)
For example Udacity offers a free Web Accessibility course by Google and there are also certifications for trainings by Deque University, for example.

Thread Thread
 
jrrohrer profile image
Jessie Rohrer

Yes! I am working through a bootcamp right now, and there hasn't been a lot of information on accessibility beyond using semantic HTML. I am interested in pursuing accessibility, but wasn't sure if there was a recognized certification or further programming I could check out. Thanks for your response!

Collapse
 
yalematta profile image
Layale Matta • Edited

I love Sara Soueidan's video course: practical-accessibility.today

Thread Thread
 
jrrohrer profile image
Jessie Rohrer

Thanks! I'll check it out :)

Collapse
 
glennchon profile image
Glenn

Whats everyone's favorite accessibility reference websites? As someone that doesn't use any accessibility tools, I have no idea what is considered good and I think it'd be great to have a list of sites I can go check out.

Collapse
 
itsasine profile image
Kayla

In the beginning slides, there was a reference to the Microsoft Inclusive Toolkit. It's my favorite! And it covers the mix of different types of a11y to consider.

Collapse
 
josefineschaefer profile image
josefineschaefer

If you have a concrete topic in might, it can be useful to checkout the guidelines on WCAG (w3.org/TR/WCAG21/) - that's where you can be sure you comply with the rules.
In terms of tools, here is also an extensive list: w3.org/WAI/ER/tools/
And shout out to Stefan Judis who put together a great list of further reading and many interesting resources about accessibility: https://www.stefanjudis.com/useful-accessibility-resources/?utm_source=stefanjudis&utm_medium=email

Collapse
 
jhermann profile image
Jürgen Hermann
Collapse
 
amneet profile image
amneet-b

Hi! Reminder that if you have any questions for @josefineschaefer to drop them here! We'll address these questions in the live speaker discussion. 📣

Collapse
 
jeremyf profile image
Jeremy Friesen

I love Josefine's advice of turning off CSS. This is such a great way to learn how machines "see" your site.

Collapse
 
callumreid profile image
callumreid

I am wondering if there are any packages that go about the job of checking if contrast issues are being coded into CSS? Maybe something that notifies you when you approach points at or near too little contrast

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

It won't notify you automatically, but Lighthouse Reports will catch contrast issues.

There's also an abundance of Chrome Extensions out there to check (maybe one of them will alert you automatically) - I like this one.

There may be a VS Code extension that can check your CSS for you?

Collapse
 
josefineschaefer profile image
josefineschaefer

That would be really cool - I personally haven't used any yet, but please let me know if you find one! I always check in the browser with a color contrast checker. There are also ones that let you use a color picker and check for different font sizes, which might be handy :)

Collapse
 
jhermann profile image
Jürgen Hermann

Google "w3c contrast checker" and use the one you like.

Collapse
 
callumreid profile image
callumreid

Noted-- thank you!

Collapse
 
fizzybuzzybeezy profile image
fizzybuzzybeezy

Thank you for this talk Josephine. Macular degeneration runs in my family and I've often wondered how to help them navigate the web for socializing, shopping, and entertainment. There are some solutions, but not enough.

Collapse
 
fizzybuzzybeezy profile image
fizzybuzzybeezy • Edited

Also, great point on contrast. On my personal backgrounds, I like to use #2a2a2a which translate to R42 G42 B42. I call this hitchhiker gray in honor of "Hitchhikers's Guide to the Galaxy" and it's answer to the meaning of life, the universe and everything being (confusingly) 42. Anyway, I pair this with fonts in pastels. It's just a mnemonic that's worked for me. Fun and helpful topics! -- Updated to remove trivia biases!

Collapse
 
josefineschaefer profile image
josefineschaefer

That sounds like a good color combo! Things like ensuring content is zoomable to 200% is also important if you are looking to help people with visual impairments :)

Thread Thread
 
fizzybuzzybeezy profile image
fizzybuzzybeezy

Good point. I'll keep the zoom-ability factor in mind! My elderly aunt loves her books on tape, but if she could read again (somehow) or even play games, that would be amazing. Thank you!

Collapse
 
xelaflash profile image
AlexG

nice one 👏🏼. Always good to have a little refresh of what we can do as dev to help make the web more inclusive.

Collapse
 
kaj profile image
Kajah

I really like that you mention that these accessibility considerations are really beneficial for anyone who uses technology. Thank you for covering this important subject!

Collapse
 
darylnauman profile image
Daryl Nauman

Thanks for this great talk and sharing actionable steps we can take to improve our sites (plus resources to use). It was a lightbulb moment for me to hear about how coding for accessibility can also help a broader range of the population beyond those we might normally think about when working to make our sites more accessible.

Collapse
 
dcipher87 profile image
Khigha Ubisi

Yay! Thank you Josefine. As someone who is new to code, this talk was very useful. Semantic HTML is a habit I will implement immediately in my learning. You explained the importance of accessibility very well. It's a good skill to have in your toolbox because you never know where your career may take you. It's best to be prepared than have this sneak up on you like a spot test. Websites for the most part exist in the public domain and we need to ensure the public can access and benefit from them!

Collapse
 
josefineschaefer profile image
josefineschaefer

Absolutely! It's great that you are trying to make this a habit early on in your learning journey, than it will later come naturally to you :)

Collapse
 
raedyping profile image
Raedy Ping

That was such an excellent overview -- thank you

A few things I learned: you can improve accessibility without having to learn anything new:
Use lower brightness colors
Use higher contrast between text and background -- minimum ratio of 4.5:1
"Web Accessibility Simulator"

Collapse
 
twosavoie profile image
Lisa Savoie

Thanks so much for your talk! Any recommendations for tools that I can use and recommend to students. I use WAVE Chrome extension, WebAIM, and ColorHexa but any other tools on how to check for keyboard accessibility would be great. Thanks!

Collapse
 
josefineschaefer profile image
josefineschaefer

Thanks for your question! Wave & WebAIM are already great places to start. For keyboard accessibility, it might be a good idea to visualise the tab order (like with taba11y) or with the Accessibility Tab in the Firefox Devtools.
You can find a list of further evaluation tools here: w3.org/WAI/ER/tools/ :)

Collapse
 
noviicee profile image
Novice

Hi Josaphine! Looking forward to this talk.

Collapse
 
noviicee profile image
Novice

Amazing one. Thank you!

Collapse
 
srivera12 profile image
Sarah Rivera

Thank you - this is a great and important topic.

Collapse
 
tracycss profile image
Jane Tracy 👩‍💻

Amazing talk accessibility is really important as we start the journey.
One resource that helps me is Wave extention.

Collapse
 
ckn00b profile image
Christian New

These are amazing resources and fantastic advice. I'll definitely be sharing this with my coworkers. Thank you @josefineschaefer !

Collapse
 
sarahb3agle profile image
Sarah

Thank you Josefine! I appreciate all the resources and information for improving web accessibility.

Collapse
 
tristanntn profile image
Tristan

Thanks so much- I believe in inclusion of all, so accessibility is a very important link in making the internet accessibility for all.

Collapse
 
austinxduong profile image
austinxduong

I love this and especially the design and colors. My cousin has down syndrome so I have a soft spot for accessibility 🤗

Collapse
 
sbstn profile image
sbstn98

Thanks for this nice and inspiring talk about web #accesibility at the #codeland2021 Conference! i dealt with the topic some time ago, now it has moved back into my focus :)

Collapse
 
vivianemartini profile image
Viviane Martini

thank you for sharing! excellent content!

Collapse
 
jhermann profile image
Jürgen Hermann

Font choices are missing. People think "tall and thin light grey on dark grey is sooooo cool". Well, it's not.

Read lexend.com/ for the science on why fonts matter!

Collapse
 
clearlythuydoan profile image
Thuy Doan

As someone who is also very passionate about equity on the web and accessibility, I loved that you gave a talk about this at Codeland 2021. I should get going on accessibility talks myself!

Collapse
 
jhermann profile image
Jürgen Hermann

Tools... Try your web page with darkreader.org/, and whether your color choices work when inverted and spread to a proper contrast ratio.