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 Use attribute on images and describe their contents alt 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 . title In other cases, . aria-label 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 attribute. title If something is clickable but is not a native browser link or button, use . role="button" 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. tag should have a attribute. html lang 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 Originally published here.

Different

2022 - HackerNoon Contributor of the Year - Cicd

Check out my blog!

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Software Team Lead

Too Long; Didn't Read

 Add passwordless user experiences to your app

HackerNoon Mobile

The Website Accessibility Checklist

Too Long; Didn't Read

Companies Mentioned

@horosin

RELATED STORIES