TIETOJA TÄSTÄ JAKSOSTA
Today we're talking about how to get better at thinking about accessibility, and some of the quick and easy ways you can make your websites more accessible for more people without spending a jillion extra hours of work.
2:00: Don’t let the details overwhelm you. WCAG standards are important but think about the small things you can change to do better.
7:05: Screenreaders! Try out some browser extensions that simulate the experience to get a high-level understanding of how some of them work and what your site’s UX is like for screenreader users.
- Extensions for Chrome: ChromeVox and ReadAloud.
- Extensions for Firefox: HaTeMiLe, Fangs Screen Reader Emulator and Claws
8:40 🔥 TIP: Check the output of your DOM and make sure the content is logical when read from top to bottom.
10:10: Color blindness -- check out this #prettycool tool contrast ratio checker by Lea Verou, as well as the Toptal Color Blind Filter.
12:30: Avoid too much white text on a dark background.
13:20: Captions are key. Check your video/audio captions. If they are automated, you probably need to double check them and add additional context to make them as descriptive as possible. Content-relevent non-verbal audio especially.
15:25: Non-mouse users — tabbing! Check your source ordering (peep this oldie-but-goodie overview by Adrian Roselli), and pay attention to tabindex values for certain types of elements.
17:05: PLEASE Don’t kill focus element styles. Restyle them carefully, or device-selectively using a utility like What Input.
21:13 🔥 TIP: Preview your website without the stylesheets loaded. This will give you a quick, close visual representation of what a screenreader experience might feel like, and you can see quickly if the content is logically ordered, lists and headings are properly nested, etc.
23:20: Please for the love of all that is holy, use the correct headings for the content, not for the styles. If you aren’t sure how, take a few minutes and learn. You can peep my heading sass mixin to quickly restyle headings at GitHub.
Follow me on all the things @chancethedev. Twitter, Instagram, and chancethedev.com KTHX.
