Have you ever thought that you had a decent grasp on a subject, started digging around, barely scratched the surface and then realized you don't know your ass from your elbow when it comes to the subject at hand? This isn't a "me neither' situation. This is me. Waving my hand high. I am ashamed to admit that as an aspiring front end developer I really don't know much about accessibility. To be fair to myself, not enough people know enough. But that's okay because starting today we are going to work through it and become better together. My goal is to start with a high level overview of accessibility, walk through some code challenges and tutorials of building my portfolio and drop some (hopefully) helpful resources that you can start using to make the web awesome for all. Sound good? Good.
Ok, so what is Accessibility then?
According to W3.org in a nutshell, the web is designed to work for everyone, regardless of hardware, software, language, location or ability. When the web is meeting this goal it is accessible to a diverse and large variety of individuals and all is well. When the web doesn't meet this goal, people in certain demographics are excluded and lack the ability to participate equally, and that my friends is when we have a problem.
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Basically, A11y is making sure everyone has equal access to the information we provide.
Who should practice Accessibility?
Everyone should. To which you would probably (rightfully) ask me why haven't I been implementing it myself? Well, I don't think I have a great answer, but my honest answer is simply put, ignorance. Most tutorials never make any mention of accessibility implementations, and when they do its maybe using Semantic HTML or adding vague image alt tags. Accessibility (or #A11y)is one of those topics that is portrayed as a niche developer skill, when in reality it is something we can all start implementing today to make the web a better place. There's tons of great information available, so no more excuses.
Who benefits from Accessibility?
Everyone. That's it. That's the answer. When most people think of accessibility they may think of technology such as screen readers or text to voice assistants which is just one population of people who need accessible products. We also want to include people who may have temporary disabilities- which can be things such as recovering from a recent illness or injury which can affect physical function.
Accessibility doesn't just include disabilities, we also want to consider situational factors and find ways to make sure that end user can still utilize our product. Language barriers and assumption of literacy can inadvertently exclude certain individuals. I'm currently in Paris, France and while I don't speak French, using systems and interpreting signs is so much more easier when there are intuitive icons to assist the user with understanding content. We also want to develop with users in mind who may have slower internet connections, by not weighing down an application with heavy and unnecessary images.
Where can I learn more about Accessibility?
I hope this brief overview has piqued your interest and also encouraged you to learn more about incorporating accessibility into your designs and projects. This of course if not an all inclusive list as there are many resources available to learn more, but these are good starting points to learn the basics.
Learning Resources
Google Developers https://developers.google.com/web/fundamentals/accessibility/
University of California at Berkeley https://webaccess.berkeley.edu/resources/tips/web-accessibility
Mozilla/MDN
https://developer.mozilla.org/en-US/docs/Web/Accessibility
W3C.org
https://www.w3.org/WAI/fundamentals/accessibility-intro/
The A11y Project
http://a11yproject.com/
Design Tools
Adobe
https://www.adobe.com/accessibility.html
Color Safe Accessible Color Palettes
http://colorsafe.co/
Auditing Tools
A11y Checker HTML checker
https://github.com/Muhnad/a11y-checker
A11y Color Contrast Accessibility Validator
https://color.a11y.com/?wc3
WAVE Web Accessibility Evaluation Tool
https://wave.webaim.org/
Thanks for reading, and I hope you join me for my future A11y posts. If you have any resources or best practices I'd love to hear about them so please leave them in the comments below!
Top comments (0)