Web Accessibility

Introduction

November 03rd, 2022

Have you ever wondered what Web Accessibility means, and how you can evaluate a Web Page easily on its Accessibility Feature. In this blog, we can use few simple checks to evaluate the Accessibility of a Web Page. Web accessibility implies that websites/tools are designed and developed in such a way that people with disabilities can use them. It means they can understand, navigate and interact with the Web and are also able to contribute to the Web. "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee, W3C Director and inventor of the World Wide Web. The Web was fundamentally designed for all people, irrespective of the hardware / software, location, language, or ability. The accessibility barriers to Web Pages can easily be overcome through web technologies. The question is – how to make the Web Accessible?

Essential Components for Web Accessibility

Web Accessibility depends on various components that have to work together. These components are:

• Content which is information on a Web Page such as text, images, and sound. Also includes code that defines structure. 

• Web Browsers

• Assistive technologies such as screen readers, alternate keyboards, and scanning software 

• User’s knowledge and experience 

• Developers - people who code, including people with disabilities who contribute to content 

• Authoring Tool or Software that creates websites 

• Evaluation Tools or Web accessibility evaluation tools, HTML validators, CSS validators, etc. 

The relationship between them is shown below:

These components don't work alone; there's interdependency between them. For example, Authoring Tools (Software) help to promote alternate text on Web Pages. Evaluation Tools can help to detect if the alternative text exists. While WAI Guidelines (WCAG2) provide guidelines to implement alternative text for accessibility.

Guidelines and Standards

 The World Wide Web Consortium (W3C)'s Web Accessibility Initiative (WAI) develops web accessibility standards for the different components:

• Authoring Tool Accessibility Guidelines (ATAG) are used to address Authoring Tools. These Guidelines help make the authoring tools or Software themselves become accessible.
• Web Content Accessibility Guidelines (WCAG2) are used to address web content used by developers, authoring, and evaluation tools.
• User Agent Accessibility Guidelines (UAAG) are used to address web browsers and media players, including some aspects of assistive technologies.

Evaluating Web Accessibility

There are some easy Initial checks that we can use to check a few aspects of Web Accessibility. This is not a comprehensible evaluation; however, it gives an overall idea about Website Accessibility. You can do it yourself or use tools and various browser extensions that are free to download. A few examples can be seen below:

1) PAGE TITLE

This is shown on the Windows Tab when multiple tabs are opened or in the Windows Title Bar of some Browsers. You can look at the Page Title or use it with the Screen Reader. Ideally, the page title should briefly describe the content of the Page. For example:

2) IMAGE TEXT ALTERNATIVE (“Alt text’)

This is used by people who cannot see the text and use Screen Readers to understand the purpose of the picture. Alt Text is not seen on Web Page. Instead, it is embedded in the Markup Language like this:

<img src="Image.png" alt="The text that describes the functional nature of Image">).

The ‘Alt Text’ should be functional in nature and should describe the function of the picture and not necessarily describe the Picture itself. For example, the Search icon should show ‘Alt Text’ as Search and not magnifying Glass. To test this, verify that every Image has alt with alternative text that is based on the context. If the image conveys useful information about the web page, it needs Alt Text. If the Image is just a decorative piece with no useful information about the Web Page, then the alt parameter should be null (alt="").  To test it, open the Web Page you want to examine, then right-click the image you want to see the ‘Alt Text’ for. On a Chrome Browser, select ‘Inspect’ from the options, then a Windowpane with HTML will appear. Find the HTML Tag which has the text for “Alt=”. This will be the Alt Text Description.

3) RESIZE TEXT

For a few people, it is difficult to read the small print, hence they need to enlarge the Web Content to see it better. Most browsers allow users to change the text size for better readability. If the pages are not designed properly, changing the text size can be difficult. Columns and sections can overlap and the text can become too long or not seen completely.

To test it, increase the Text Size to 200%. The ‘Alt Text’ should also become bigger. The text should not disappear or be cut off.  All Text, Forms, and Fields should be visible, and the user should not scroll horizontally to read the text.

Conclusion

By now, you should know what Web Accessibility is and how you can use simple steps to check the overall accessibility of a Web Page. These checks are simple and can be used with any Browser. Also, these tips can help in developing Web Pages too so that everyone has access to the Web.

For more information on Web Accessibility, please use the following reference to start your journey:

Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C

Web Accessibility Evaluation Tools List (w3.org)

Website Accessibility Checklist (15 Things You Can Improve) | websitesetup.org

https://webaccessibility.org/