![Cover image for [On-Demand Talk] Demystifying Web Accessibility Contributor](https://community.codenewbie.org/images/xJY1oqiVl7KlgTzl5id4PB9ZavFTwlfyV53lqB5lIiM/rs:fill:1000:420/g:sm/mb:500000/ar:1/aHR0cHM6Ly9jb21t/dW5pdHkuY29kZW5l/d2JpZS5vcmcvcmVt/b3RlaW1hZ2VzL3Vw/bG9hZHMvYXJ0aWNs/ZXMvY2thcnB1MHBu/Nzhja2d1dGo3Z3ou/cG5n)
About this talk
Right after I started my first job, the client I was working for had to implement web accessibility as a legal requirement, which was a pretty big deal as it concerned a large legacy codebase, many different stakeholders and most people on the team didn’t have much experience with the topic.
Since everything was new to me, I didn’t mind much about what I would learn first - but I was very excited about learning something that benefited a diverse community of people.
I was lucky enough to have a bunch of amazing mentors and I would like to share some of the things I learned along the way with you - hope they help you on your journey.
Takeaways
- The basics of Web Accessibility
- Why it’s important and who benefits from it
- Basic terminology regarding Web Accessibility
- Where and how to get started with implementation
More specifically, we will look at three things you can do today to make your application a little more accessible, including:
- Semantic HTML
- Color Contrast
- Keyboard Accessibility
If there is only one thing you take away from my talk, however, it would be that in the case of web accessibility, 10% is better than nothing. It’s an ongoing journey of improvement - but it’s important to start somewhere :)
Slides
>> Click here to download slides
🌈 Comment below and ask me questions — I might just answer them during my live speaker discussion!
About Josefine Schaefer
Josefine is a frontend engineer based in Hamburg, Germany. She describes herself as "ready to take over the world by storm" on good days and "wondering when she will be exposed as the imposter she is" on bad ones.
This on-demand talk is part of CodeLand 2021 — a virtual conference brought to you by CodeNewbie & DEV on September 23 & 24, 2021.
Top comments (45)
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!
Are there any certifications for accessibility?
Also, are there resources that help determine whether animations are used in an accessible way?
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).
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.
Awesome! See you in the workshop 😄
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.
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!
I love Sara Soueidan's video course: practical-accessibility.today
Thanks! I'll check it out :)
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.
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.
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
moritzgiessmann.de/accessibility-c...
Hi! Reminder that if you have any questions for @josefineschaefer to drop them here! We'll address these questions in the live speaker discussion. 📣
I love Josefine's advice of turning off CSS. This is such a great way to learn how machines "see" your site.
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
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?
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 :)
Google "w3c contrast checker" and use the one you like.
Noted-- thank you!
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.
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!
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 :)
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!
nice one 👏🏼. Always good to have a little refresh of what we can do as dev to help make the web more inclusive.
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!
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.
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!
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 :)