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

1. Use alt attribute on images and describe their contents

2. Can be auto generated.

3. Will help SEO.

4. Will improve your website on slow network connections.

5. All icons should have descriptions (especially the image ones and in links)

6. You can use title.

7. In other cases aria-label.

8. 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 title attribute.

9. If something is clickable but is not a native browser link or button, use role="button".

10. Make sure all inputs are labeled and you can "tab" through them.

11. Color contrast

    1. Make sure colors you use for text and backgrounds have good contrast.

    2. You can use Web Accessibility Color Contrast Checker - Meet WCAG Conformance (accessibleweb.com).

    3. Aim for AA or AAA rating.

12. html tag should have a lang attribute.

Read more

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 X! x.com/horosin_