Web Accessibility Standards and Why They Are Important

Blurry image of a library - accessibility
What a website not built to be accessible could look like to a person with disabilities

Making the Web Accessible to All

It is a sad fact that in the UK alone some 11 million people suffer from a disability (http://www.disabilitysport.org.uk/facts-and-figures-about-disabled-people-in-the-uk.html). Nearly 2 million of these are blind (40,000 are 25 years old or younger).

Of course, not all disabilities make it difficult for people to use the web, but what is important is that anyone creating websites should bear in mind the needs of all concerned.

The Wikipedia  definition is  – “Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites on the World Wide Web, by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.”

https://en.wikipedia.org/wiki/Web_accessibility

We should also bear in mind that following the guidelines also ensures that people who are not disabled, but suffering from a temporary condition, or the problems associated with aging, such as poor eyesight or co-ordination, are able to use and assimilate the information that the site contains.

Defining Disability

One definition of disability is:-

”A disability is any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions).”

Disability is further sub divided into ‘Modes’.

They are:-

Permanent Disability: This is when someone is completely disabled. Example: blind and, or deaf.

Temporary Disability: Where a physical or mental disability hinders you discharging your responsibilities for a short period of time.

Besides this a web user could also suffer from ‘Situation Disability’. This term is applied when a user is not able to carry out tasks due to a situation they find themselves in. Examples of this are when the internet connection is too slow, or when the website is not useable on a smart phone or via an App (many Apps have restricted capabilities).

Why Web Accessibility is Important

Today the ‘Web’ has become a part of everyday life and is an increasingly important resource that covers just about every aspect of our lives. To gain full access to many areas, including health care, education, employment, government services , online purchasing, entertainment, and more, you need to be able to access the web. It is therefore vital that websites are accessible to everyone. The added benefit to society is that an accessible Web can help people with disabilities participate more actively thus improving the life experience for all.

Putting aside the greater good, there is also the fact that the internet offers one of the easiest ways to communicate and do business with people who suffer from a disability. Examples of this are people who cannot physically get to a store, or who cannot read standard printed material.

There are further benefits too. If you follow the rules to make a web site more accessible, you will also be following the best practices associated with mobile web design (eg speed), usability (i.e.  ensuring it is easy to use) and SEO (Search Engine Optimisation).

Basically an accessible website provides those people with disabilities access to information whilst also allowing them to interact in a way that would, simply be otherwise impossible.

In fact there is an entire section of a website devoted to the subject of making the web more accessible and the reasons why this is important for all businesses, See: https://www.w3.org/WAI/business-case/.

The three most important issues are, from a business perspective:-

  • A business can enhance its brand by ensuring that its site is truly accessible to all, especially when the changes are announced and promoted on Social Media
  • The business has the potential of reaching a whole new section of customers, who may well have been totally overlooked by the competition
  • By making a website accessible, the chances of facing legal action or being prosecuted are minimised

“Many organisations are waking up to the fact that embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.”

Paul Smyth, Head of Digital Accessibility, Barclays

 

How to Make Web Accessible

At Rouge we fully understand what is required to make a web site fully accessible. Some of these are detailed below:-

Let’s start at the top, the highly important Title Tag

Browsers don’t normally show the text in the (HTML) title tag in the actual text on the page. Instead it is located at the very top of the Browser in a tab. Whilst it is vital to use this correctly for SEO, the words within the tag being used by Google to ‘understand’ what the page is all about, it is also very important in Accessibility terms too, as it is helpful for those using screen readers. So make sure every important page on your website’s pages has a good descriptive title that tells visitors what the subject matter of a page covers.

 

Use Descriptive Tags in any Tables

Captions (https://www.quackit.com/html_5/tags/html_caption_tag.cfm) and Scope (https://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html#attr-th-scope) attributes can be used to help anyone using a screen reader to understand what that data the table or section contains.

<table>

<caption>This Table is About Widgets</caption>

<tr>

<th>Colour</th>

<th>Size</th>

<th scope=”col”>Colour</th>

<th scope=”col”>Length</th>

</tr>

<tr>

<td>Red</td>

<td>20cm</td>

</tr>

</table>

 

By adding the “scope” element as shown in your tables, screen readers won’t simply rattle off a series of table cells without giving the required context.

Make sure you use Default HTML Tags

If you want your site to be accessible, (remember to only use default html tags), use buttons for buttons, not anchors for buttons. You can of course make anchors work the same way as buttons, but this is NOT recommended.

The reason for keeping to the default tags is that screen readers follow a particular method to read the elements on a web page and if they come across something they don’t understand they can’t tell the user what the need to know..

 

Use of Alt-tags

The alt-tag or alternative (alt) html attribute has a long history. The first time it was used was to allow users to switch off the downloading of images in the days of very slow (1200bps) download speeds. Today, users have access to much faster download speeds and rarely stop the downloading of images, thus their main use today is for Accessibility and SEO (the latter because it helps Google understand what the image is). In HTML, it looks like this:

<img src =”image-location” alt=”what the image is about”>

Remember to use helpful descriptions, after all if you are relying on this to tell a blind person what a page is about, using “Screen Reader” as the alt text will not be much help. It is far better to use “How a screen reader helps people with visual impairment problems”.

 

Use Subtitles (Closed Captions) for Videos and Podcasts / Audio Media

Even if you are not concerned about making your site accessible, it is recommended you always use subtitles for videos as these will not only help users when they are in a location where they have to keep the sound off or low, it will also help with SEO (Google can’t read videos, but they can read the transcript)

Doing the same for podcasts and other audio elements will help in the same way.

Thus using captions on all your media elements will help all users, not only disabled users, plus it will also help your business to climb the rankings in the Search Engines.

 

Keyboard Navigation

To ensure accessibility, you need to allow users to navigate the site using just the keyboard.  One thing to be cautious of here is using animated navigation buttons as dropdowns if you can’t also use them with a screen reader.

 

ARIA
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

“Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.  It supplements HTML so that interactions and widgets commonly used in applications can be passed to Assistive Technologies when there is not otherwise a mechanism. For example, ARIA enables accessible navigation landmarks in HTML4, JavaScript widgets, form hints and error messages, live content updates, and more.”

For example,  ARIA makes navigation landmarks accessible, along with JavaScript widgets, form hints and error messages, plus much more.

 

Web Accessibility Tools

The best way to check if your site is accessible is to use some of the many tools freely available on the web today.

25 are listed on this site https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-accessibility-testing-tools-for-websites

The top 5 are:-

  1. DynomapperDYNO Mapper is a sitemap generator that checks the web accessibility of websites and online applications. DYNO Mapper also includes content inventory and audit, as well as daily keyword tracking. Results are displayed within visual sitemaps to allow for easy and efficient project discovery and planning.
  2. A11Y Compliance PlatformThe A11Y Compliance Platform is offered through the Bureau of Internet Accessibility. The platform gives tools, reports and services to help companies and organizations maintain and defend the web site’s accessibility and integrity. The standards and guidelines that are used in this platform include Web Content Accessibility Guidelines, Section 508 and the Americans with Disabilities Act (ADA).
  3. AATT (Automated Accessibility Testing Tool)AATT (Automated Accessibility Testing Tool) is a product offered by PayPal. This platform provides an accessibility API as well as other custom web applications for HTML CodeSniffer. Version 1.0.0 was released in April 2015. The program assists by creating reports of evaluation results. It automatically checks single web pages, as well as groups of web pages or sites
  4. Accessibility CheckerAccessibility Checker, created by CKSource, is a software program that allows you to inspect the accessibility level of content that is created in CKEditor. The software was released on March 20, 2015, and is known as an innovative solution for web accessibility. When accessibility issues are spotted, the product allows you to solve those issues immediately as they are found. The product is user-friendly in that it assists by providing users with step-by-step accessibility evaluation guidance.
  5. Accessibility ChecklistAccessibility Checklist, provided through Elsevier, offers a free and easy way to review the most recent and relevant web accessibility guidelines. The checklist was released on March 20, 2015 and covers guidelines WCAG 2.0—W3C Web Content Accessibility Guidelines 2.0, Section 508 and U.S. federal procurement standards. The checklist gives a simplified language framework, and the user interface is easy to navigate. Users can filter the guidelines by topic, and these topics include keyboard, images and forms. Another filter option includes filtering by standard levels, including A, AA, or AAA.

 

We hope that this article about the importance of making websites accessible is helpful, and please do contact us for more help or assistance in making your website (or your next) compliant with current accessibility guidelines

 

Stuart Taylor

Stuart Taylor is the Technical Director here at Rouge Media.

View Stuart's bio >

  • linkedin-icon

Related Content