Web Design Accessibility

INTRODUCTION

You have built that beautiful User Interface for your website, but is it accessible? What is Web Design Accessibility and why should it be put into consideration when creating a User Interface.

Before digging further, who is this article intended for? If you fall in any of these categories, then the article is for you.

• Web development newbie coding HTML and CSS
• Web designer or developer ignorant of this factor

MEANING OF WEB DESIGN ACCESSIBILITY

Web design or website accessibility is simply making your website usable by as many persons as possible including people with some kind of disabilities (visually impaired, people with auditory impairment etc).

Technically, when we talk about web accessibility, we are referring to a web design that allow people of all kind to understand, navigate and interact with the Web.

Currently, most websites have accessibility problems which make them difficult to use, especially for people with disabilities.

WHY IS WEB DESIGN ACCESSIBILITY IMPORTANT?

By making your website accessible, you achieve creating a good User Experience for all your potential users including people with disabilities as mentioned earlier.

It also ensures everyone has equal access to your website. More importantly, by creating accessible designs for your website, you get to expand the user base.

Optimizing for Accessibility is a win for SEO; despite being separate disciplines, web accessibility and SEO are mutually beneficial because the better your site serves all users, the better it will serve search engines too. This can be a great way to make business websites grow, increase brand awareness and so much more.

SOME FACTORS YOU SHOULD CONSIDER TO MAKE YOUR WEB DESIGN ACCESSIBLE

1. Make sure pages are displayed correctly in all web browsers.
2. Your website must be accessible to screen readers. A screen reader is a technology that assists people who are visually impaired to transmit texts to speech. The correct use of HTML semantics can aid a screen reader's effectiveness.
3. Your website must have keyboard functionalities, that is, ensure contents can be accessed by the keyboard alone.
4. Follow the HTML semantics as much as possible. HTML is a markup language, meaning that it is not only plain text, but text marked up with meaning known as Semantics. HTML has so many tags with their own unique and inherent meaning and these tags must be used properly to enable accessibility.
5. Images should include equivalent alternative texts. This is to enable screen readers to read the alt texts making those who are visually impaired have an idea of what the image is all about. This also helps those who turn off images (in areas with low bandwidth for example).
6. Use closed captions for videos to provide aid for people with hearing impairment.
7. Use headings correctly to organize the structure of your content. In some cases, screen readers use heading structure to navigate content. The heading tags in HTML not only determine the sizes of headers but are also useful when navigating contents in HTML, the heading tags should be followed according to the importance and not only because of its size, even when the most important heading need to be small, you still don't give it <h6>, instead, give it <h1>then you can reduce the size with CSS.
8. Give your links unique and descriptive names. This also aids screen readers.
9. Ensure readability between background colors and texts. Make sure texts colors can be easily differentiated from background colors.
10. Design your forms for accessibility. To achieve form accessibility, you should put the following into consideration.

• Placeholder texts should be used for examples.
• Fieldsets and legends should be used to group inputs.
• All inputs should have associated labels.
• Formatting expectations should be displayed. e.g

Good Example:

Bad Example:

• Changing colors should not only be an indicator for feedbacks in forms, you should consider text feedback alongside too.
• Required fields should be identified.

CONCLUSION

This article contains only the introductory factors that can determine if a website is accessible. You can read the official Accessibility Guidelines for Web Content (WCAG) here.

REFERENCE

• freecodecamp.org/html-best-practices
• webaccess.berkeley.edu/tips/web-accessibility
• www.interaction-design.org/literature/article/3-reasons-why-accessible-design-is-good-for-all

Don't forget to share and give a thumbs up👍 if you found this article helpful.