All too often, we find ourselves as makers overlooking and undervaluing an essential aspect of the web: accessibility. We spend a lot of time and effort focused on building out features and functionality, but can everyone use those features?
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. –Tim Berners-Lee
Web accessibility isn't about checking some boxes, and it's not something that can be fully learned in a weekend workshop. Accessibility is a skill that is developed with time, experience, and empathy. It's about thinking outside your own experiences to craft solutions that work for everyone. Accessibility isn’t binary, it exists on a spectrum and we want our products to be on the “more accessible than not” end.
We all have to start somewhere on our learning journey, so my aim is to help you get going with some great resources.
Back to basics
Before even addressing accessibility basics, it’s a good idea to reacquaint yourself with proper semantic HTML. Regardless of what framework you’re in, writing good HTML is important (there’s a reason all those tags exist). What are landmarks and what is the benefit of using them? What can you replace your 4,000 <div>‘s with to be more explicit? You’ll often find that semantic HTML makes for more organized and readable code in the long run.
Study up
Just as you once approached learning to code in the first place, a great way to learn some accessibility basics is by finding resources in whatever medium you learn best. Here are some great resources that helped me:
- Accessibility for Everyone book by Laura Kalbag
- Design for Real Life book by Anil Dash
- Inclusive Components book by Heydon Pickering
- Accessibility for Web Design course on Lynda by Derek Featherstone
- A11ycasts with Rob Dodson on YouTube
- Google's Web Fundamentals guide on Accessibility
- Web Accessibility course on Udactiy by Google
- MDN Accessibility docs by Mozilla
- Accessibility Fundamentals by W3C
- Web Content Accessibility Guidelines (WCAG) 2.1
You might also find it useful to see some applied accessibility in more digestible contexts. I'd suggest searching for "accessible" on codepen.io and playing with some of the examples there. In the same way you've learned programming techniques from looking at other's solutions, you'll find it equally valuable to see various approaches to web accessibility.
Accessibility tooling
Once you have some of the basics of accessibility under your belt, you'll want to grab some handy tools that make your job easier and help build healthy habits. This is not meant to be exhaustive, but these are some tools I use on a day-to-day basis that I've found super helpful:
- Sim Daltonism - Mac app that overlays anything on your desktop to give you various color blindness perspectives (this is my favorite app)
- Stark - contrast checker and color blind simulator for Sketch, Figma and Xd
- Funkify - extension to experience the web through the lens of users with different abilities and disabilities
- Hemingway App - for assessing grade level readability of your copy and content
- High Contrast extension by Google to help simulate how your app/site responds to Windows High Contrast Mode
- Accessibility Insights for Web - extension by Microsoft with both manual and automated accessibility checks that generates a detailed report (perfect for aiding in an internal audit)
- Chrome DevTools (checking color contrast) - DevTools has a way to check color contrast of an element against its background, even supplying a WCAG rating
- Throttle the network - in DevTools, you can throttle the network to see how others in emerging countries or remote areas may experience your product
- VoiceOver - the built-in screenreader for Mac will help you more clearly understand the importance of semantic HTML
- NVDA - a free screenreader for PC (alternative to JAWS)
- Color contrast checker by WebAIM - a great way to assess contrast ratios and play with values
- Lighthouse by Google - automated tool for improving the quality of web pages (including accessibility)
- Firefox Accessibility Inspector - Jen Simmons walks you through some basics of using Firefox's built-in tools
Tl;dr
Building things that consider everyone is our responsibility and should be taken seriously. Familiarize yourself with the basics of web accessibility and apply it in your everyday design and development. As with any skill, you'll get better with practice and experience - soon finding yourself building with an accessibility mindset.
Top comments (0)