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.

The Website Accessibility Checklist

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Agile Development: What Is a Product Owner?

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

6 Tips to Host a Successful Virtual Networking Event

Agile Development: What Is a Product Owner?

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

6 Tips to Host a Successful Virtual Networking Event

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps