Making websites more accessible — quick wins
Cheatsheet to make your web app more accessible with little effort
2 min read
What and why?
Accessibility means the design of products in a way that they can be used by people with disabilities. Many projects neglect this issue as any additional effort is seen as an unnecessary cost. However, taking into account differences in how (well and different) we perceive things like color, text, etc., this lack of attention dramatically shrinks your user base. Did you know that 8% of men are color blind?
I like to make at least basic accessibility rules a soft requirement of my public-facing projects. You can perform small steps to make your web application more usable by everyone with little effort. Some of the requirements are probably already taken into account in your frontend visual library like bootstrap, some are not.
Some of these points also improve regular user experience, boost your SEO and help index your website.
Web accessibility essential checklist
altattribute on images and describe their contents
- Can be auto generated.
- Will help SEO.
- Will improve your website on slow network connections.
All icons should have descriptions (especially the image ones and in links)
- You can use
- In other cases
- You can use
- All links, even when they are images, icons or empty boxes, should have titles. This helps every user, by showing in their browser on hover. Use
- If something is clickable but is not a native browser link or button, use
- Make sure all inputs are labeled and you can "tab" through them.
- Color contrast
- Make sure colors you use for text and backgrounds have good contrast.
- You can use Web Accessibility Color Contrast Checker - Meet WCAG Conformance (accessibleweb.com).
- Aim for AA or AAA rating.
htmltag should have a
Accessibility standard used around the world and used as a requirement is usually WCAG 2.0/2.1. Have a look at this overview if you like. WCAG 2.1 at a Glance
Here's a free color blind test, many people don't realize they don't see colors like others for decades colorblindnesstest.org.
More detailed "what, why and how" - W3C.
Let's talk on twitter before Elon destroys it! twitter.com/horosinov
Did you find this article valuable?
Support Karol Horosin Blog by becoming a sponsor. Any amount is appreciated!