Website Accessibility - The Importance of It

Website accessibility is not only where your site can be viewed, but how the content is presented to a user. When a user with a hearing or vision disability visits your site, are they going to be able to access and understand the content the same as any other user? While website accessibility primarily focuses on users with disabilities, it can benefit all your users, such as those using mobile devices as well as search engine crawlers. Making sure your website can accommodate all users will help improve your user base, the site’s users experience and increase SEO. In this article we will cover the basic guidelines and tools to help improve and assess your websites accessibility.

Proper Markup and Page Structure

Having proper markup and formatting for your web page can greatly improve its legibility for both the users and assistive technology to interpret the content, such as screen readers or web crawlers. This helps provide meaning and structure to your content, allowing users to more easily understand and navigate your content. The more semantic and structural information you can include in your content, the more it will help drive its meaning. When creating a page for your site, keep the following tips in mind:

Provide a clear and proper heading structure
Use standard HTML tags instead of CSS to format content
Define abbreviations and acronyms
Use HTML5 semantics tags when appropriate
Use ARIA in HTML as needed

Navigation and Access

Not all users that visit your site will do so on a computer with keyboard and mouse. It is important to make sure that any item a user will need to interact with is accessible. Users might be accessing your site using a multitude of different devices or some might not have the physical ability to use a standard mouse and keyboard. When building your website’s structure and pages it is important to:

Use the proper link and buttons tags to allow these items to be focused
Make sure there is a proper tab-index for focus items
Ensuring URLs are human readable and logical
Add titles to links that are descriptive, yet succinct
Provide a “Skip Link” to allow users with a screen reader to jump to the content

Media. Image, Video, Audio

Videos and audio are becoming a much more prevalent way to deliver content on your website. These media items within your content can be often lost on users with visual or hearing impairments. If the media is important to the overall page content, making sure that there is an alternative way to view this content is very important. Proper use of attributes within the media tags helps the assistive technologies understand the meaning behind the media and convey this to the users. When adding any media content to your site make sure the following is complete:

Add proper alternative text for important images
Provide transcripts and/or captions for video and audio

Testing Tools

Fangs Screen Reader Emulator – Fangs creates a text version of a page similar to how a screen reader would read it.
ChromeVox – A screen reader that is an extension to Chrome.
Accessibility Developer Tools – An extension that adds an Accessibility audit to Chrome Developer Tools.
WAVE – A web accessibility evaluation tool.
AChecker – Another web accessibility evaluation tool.
checkmycolours.com – Checks if a webpage has sufficient contrast for users that may have issues seeing colors.
contrast ratio – A tool that allows you to test different background and text colors for sufficient contrast.
Readability Index Calculator – Determines the general reading level of the given content.