In all web project, we need to make sure all our content is accessible. Everyone does responsive build so the content display nicely on all device sizes and shape, but there is more we need to do at all time. Here is my little check list.
Navigate the web page using only your keyboard
While working with the News, I had an interactive article where I didn’t think about keyboard navigation. It was spotted by a colleague just before we pushed it live, and I had to implement a lot of changes at the last minute to make sure users could navigation without using the mouse. Since then, I don’t forget to check and think from the beginning about “keyboard only” navigation.
Think: tab key, arrows, enter and space key.
Style your CSS :focus element (border, shadow, color, etc)
Use button tags instead of divs. Use a tag for real links (anchors and external)
Test with a real screen reader
We all know about writing for screen readers, having all the copy as inline copy, using the correct semantic but we rarely test it as a real user with visual disability.
You can do real tests, get a browser add-on such as this screen reader chrome.google.com/webstore/detail/screen-reader/
Don’t forget this little invisible skip to content link. All the image “alt” descriptions are not only important for SEO, but also for people.
Think about colour contrast
This should be considered earlier in the design stage rather than development, but it’s important to make sure all copy is readable for everyone.
I still see from time to time agency content that wouldn’t pass those tests. Designers choose subtle design touch for aesthetic decisions, but those won’t always pass the WCAG guidance.
There are different tools for this. Something more official is https://webaim.org/resources/contrastchecker/
Bonus point: speed – think slow internet
I often work without the fastest internet. I always think about how you can enhance the user feel when a page loads. There is nothing more frustrating than looking at an unanimated screen waiting for something to happen. Loaders (even fake loaders / simple animations) always help.
Minimize assets at all times. Here are my 3 free favorite web tools for
svg: https://jakearchibald.github.io/svgomg/
png + jpg: https://tinypng.com/third-party
mp4 video: https://ezgif.com/resize-video
Any comments about the above? Ping me a note (don’t if it’s for sponsored content / having your link in this article ;)