The How-To Guide To Accessible Web Design

What is Accessible Web Design?

In the simplest terms, accessible web design is about addressing the issue of creating Websites that are accessible and usable for users, regardless of how a user accesses the Internet or their physical ability.

Which image above is more readable to you?

My guess is image 2, because of its background and foreground contrast ratio.

Accessible web design is not rocket science, nor is it an exact science. Rather, it’s a thought process and being aware of basic yet often overlooked things when developing a website. It’s about being aware of that fact that people with different physical abilities might visit your site seeking some information, and they should be able to get the information they are looking for.

As a website developer or even as a business owner, you must always ask yourself: “Can everyone out there, including those with disabilities, use my site?Can someone who is not able to use a mouse navigate to a particular section of my site? Can my grandmother read this text?”

Why does it matter to you?

If we go by different research data available on the Internet, we will find that around 20% to 30% of Internet users have some sort of disability. That’s a huge chunk, isn’t it?

Have a look at this W3C WAI article to read more about different case studies: https://www.w3.org/WAI/bcase/resources#statecom.

Making a website accessible has a lot of added advantages. For example:

• Improved SEO
  When you want to make your site accessible, you make certain changes and follow certain guidelines (such as providing meaningful alternate text for images and using a proper and clear heading structure) to make your site available to a broader range of users. So, by improving your site accessibility you also increase the page ranking of your website.
• Improved User Experience
  in the process of making your site accessible, you design an interface which is operable and consistent, which improves overall user experience.

Have you tried using your favorite website without a mouse? Can you navigate from one section to another with just your keyboard? Try using Google without a mouse. You can use a combination of Tab/Shift+Tab and Arrow keys to navigate and then use the ENTER key when you need to click on something. When you are on a result, it should look something like this:

You can see the pointer icon at the start of line, indicating where you are currently. This is a perfect example of Accessible Web Design. You don’t need a mouse to use Google Search. Believe me – give it a try and you’ll be astonished how easy it is.

• Improved Mobile User Experience: While building a web application to be fully accessible, you get an application/website that works really well for smartphones without much extra effort.

Other than benefits listed above, here are a couple more reasons why should care:

• If you are operating in developed countries, such as the US, you might have legal obligation to make your services available to everyone without any discrimination.
• There is an UN convention on “Rights of Persons with Disability” which says that a website should be accessible to all people: https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/article-9-accessibility.html

So, making a website accessible is a win-win for every business owner. The average user gets an improved user experience, users with disabilities can now be part of your website, and as a business owner you get a site that is accessible and useable to all users so you also fulfil any legal obligation that you might have. Do not take legal obligations lightly, Sydney Olympics Website had to shell out $20,000 due to poor accessibility, here is a case study for the same: https://www.w3.org/WAI/bcase/socog-case-study

How to design with Accessibility in mind?

In a few words “It doesn’t take a lot to get started.” Just stick to the basics and be aware of a few general accessibility practices and guidelines.

Web Accessibility should not be an afterthought; instead, it should be made part of your standard development practices. Make your development and QA teams aware of commonly used Web Accessibility guidelines: WCAG 2.0 (https://www.w3.org/TR/WCAG20/) and US Govt. Section 508 (https://www.section508.gov/) are 2 very common guidelines for compliance. Also check to see if there are any other guidelines you should follow based on location depending upon where your business operates.

We cannot talk enough about all web accessibility guidelines in one article. However, there are some simple steps you can take to achieve this:

• Prepare a Developer checklist for to-do’s mapped to Web Accessibility standards
• Ensure that your HTML passes W3C validation tests. Many people will argue on this, but, when you make your page W3C valid, you also follow lot of Web Accessibility guidelines, such as:
  • W3C requires every <img> tag to have the alt=”” attribute in order validate it, and WCAG guidelines states that “Non-text elements must have text alternative that describe its purpose”
  • W3C requires every ID to be unique. This can be useful when you want to provide some accessibility information unique to aN ID
• Every valid HTML document must have the <title> tag as the title tag is used by Screen Readers in an as is manner
• Provide text alternative for non-text elements, such as: images, embedded objects, audio/video content, etc.
• Have a meaningful heading structure in place for every page
• Make sure you maintain a healthy contrast ratio
• Make sure that your site does not depend on JavaScript alone to function
• Never use colour or image alone to convey information
• Make sure that your web content is accessible by Keyboard, including your navigation menus and form elements
• Provide users with the option to bypass blocks of your site, such as “Skip To Navigation” or “Skip to Main content” links
• Give users the option to control moving content (especially if it lasts more than 5 sec)
• Provide text transcription for Audio and Video contents
• Forms should be designed with accessibility in mind, associate labels with fields

<label for=”email”>Email:</label> <input id=”email” type=”text” />

• Web application/site design should be: consistent, operable and robust
• Use fonts wisely because some fonts are by design more readable than others
• Design Forms and other web elements in such a way that screen readers know what they are
• Avoid using components/code that only works with specific types of interactions, such as displaying a menu on mouseover:

<a id=”ServiceMenu” onmouseover=”showServicesMenu();”>Services</a>

• Build your Page Elements with Web Accessibility in mind (Name, role, value)
• Test your application with actual screen readers

There are a lot of small checkpoints that can help you make a big impact on web accessibility and discussing all of them are not feasible in one blog post alone. As an Accessibility-aware Development team, you should always have the WCAG quick reference guide (https://www.w3.org/WAI/WCAG20/quickref/ ) handy.

Tools for accessibility testing

There are a variety of tools available for you as a website owner/developer/tester to test and verify the accessibility of your website. A discussion of these tools is beyond the scope of this article, but Neha Tomar has written a beautiful article on the 3Pillar Blog titled “Accessibility Testing Tools and Techniques” that I would recommend for anyone interested in learning more on the subject.

You can go through Neha’s blog post to understand about tools and techniques for Accessibility Testing.

Conclusion

Accessible Web Design is not just about making websites accessible to people with disabilities. It’s about making your site more usable for all users and improving the overall health of your site. A site that is accessible is more consistent across different devices and screen sizes when compared to websites that are not accessible. Accessible Web Design also has a business point of view associated with it, and as a business owner, it helps you make sure that your application is usable and accessible to all users reaching it.