Web Accessibility

In a nutshell, web content accessibility means making sure that our applications are understandable to the users;

— with disabilities/impairments — with low bandwidth connections — who are using older technologies — who temporarily cannot hear o in a noisy environment — who are brand new users and — who have language barriers

In order to do this, our applications and content should be accessible to screen readers, tabbable, and meet color contrast criteria.

There are many competitive advantages of adapting accessible content for businesses. For example, a company can increase its diversity and inclusion with accessible content and keep loyal customers for its brand. In addition, companies can improve their SEO results and extend their market reach. Also, in some countries adopting accessibility on web applications is a must, so the companies can minimize their legal risks by adopting some accessibility standards.

Web Accessibility standards are determined by W3C Web Accessibility Initiative and named as “The Web Content Accessibility Guidelines (WCAG)”. According to WCAG, the content should follow the italic text P — Perceivable: The info should be visible (text alternatives, time-based media alternatives) O — Operable: Interface forms, controls, and navigations are operable (“actions” should be working) U — Understandable: UI should be understandable, and content should be readable R — Robust: The users must be able to access the content as technologies advance. All content should remain accessible. So you might be asking “Where to start?” The true answer to this question is “Design”. The design should meet the needs of all users following the POUR principle.

There are a few things we can do to check or ensure our accessibility.

— Open Chrome > More tools > Developer Tools >Responsiveness > Explore different screen sizes and content readability — Go to https://webaim.org/resources/contrastchecker/ and check color contrast. Use simple colors with good contrast. The minimum contrast ratio should be 4.5:1 in general. Make sure to ensure criteria on [4] and [5] — Download the “color oracle tool” and see how different users with eye/color blindness and impairments see your application. — Make sure to change the color of the links when visited or hovered. — Check the typography and readability of your content. Check the shape, weight, scale, style, spacing, and alignment of the content. — Try to stick with 1–2 fonts in your application. Check https://fonts.google.com/ for choosing fonts. Here, Google has “ font family pairing recommendations” for you. Try using already available fonts which do not require downloading on different devices. This will help with application load time. — Spacing has 4 main categories including letter spacing, spacing following paragraphs, letter spacing, and word spacing. Follow this documentation https://www.w3.org/TR/WCAG21/#text-spacing for spacing.

Of course, there are a lot more ways to make your web application more accessible. Do research for more. This was just an introduction and I hope it was helpful for you all. For more web development content, follow me!

References: [1] https://www.w3.org/WAI/standards-guidelines/#wcag [2] https://www.w3.org/TR/WCAG21/ [3] https://webaim.org/standards/wcag/checklist [4] https://www.w3.org/TR/WCAG21/#contrast-minimum [5] https://www.w3.org/TR/WCAG21/#contrast-enhanced