Insights

Web Accessibility Standards and Why They Are Important

A blurred picture of some people in an office

Contents

  1. Making the web accessible to all
  2. Defining disability
  3. Accessibility standards
  4. Why web accessibility is important
  5. How to make websites accessible
  6. Accessibility testing tools

Making the Web Accessible to All

In the UK alone some 11 million people suffer from a disability. Nearly 2 million of these are blind, and 40,000 are 25 years old or younger. www.disabilitysport.org.uk

Of course, not all disabilities make it difficult for people to use the web, but what is important is that anyone creating digital tools and online content should understand how their audience accesses their interfaces and information.

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

Defining Disability

It is a common misconception that accessibility is all about those with limited vision, but there are a broad range of disabilities and situations where they apply. Making a website or mobile app accessible means making sure it can be used by as many people as possible.

This includes those with:

  • blindness or impaired vision
  • deafness or impaired hearing
  • motor difficulties
  • cognitive impairments or learning disabilities

Disability is further sub divided into ‘Modes’.

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.

‘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 an internet connection is too slow, or when a website is not usable on a smart phone or via an App (many Apps have restricted capabilities).

Accessibility Standards

The Web Content Accessibility Guidelines (WCAG 2.1) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organisation for the Internet.

WCAG 2.1 guidelines layout how digital services and tools should be made accessible to all, including users with impairments to their:

  • vision – those who are severely sight impaired (blind), sight impaired (partially sighted) or colour-blind
  • hearing – those who are deaf or hard of hearing
  • mobility – those who find it difficult to use an input device, like a keyboard or mouse
  • thinking and understanding – those with dyslexia, autism or learning difficulties

In the UK there is a legal requirement for all public sector websites to meet these guidelines. The full name of the new regulations is The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. https://www.legislation.gov.uk/uksi/2018/952/introduction/made

Why Web Accessibility is Important

Today the ‘Web’ has become an indispensable resource that covers just about every aspect of our lives. To gain full access to many areas, including healthcare, education, employment, government services, online purchasing, entertainment, and more, you need to be able to access the web – so it’s vital that websites are accessible to everyone.

An accessible web can help people with disabilities participate more actively, 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 shop, or who cannot read standard printed material.

Business benefits of an accessible website

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

Businesses and website owners should take note.

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

  • A 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
  • A business can enhance its brand by ensuring that its site is truly accessible to all.

“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

The WAI have 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/.

How to Make Websites Accessible

At Rouge we fully understand what is required to make a website or web app fully accessible. Here are some of the main topics:

  1. Title tag – describe what the page is about
  2. Language – for screen readers
  3. Keyboard navigation – no mouse
  4. Text – size, contrast and colour
  5. Focus – keyboard tabbed page elements
  6. Forms – labels, tabindex and focus
  7. Links – text and focus
  8. Headings – use and nesting
  9. Images – alt / description text
  10. Tables – descriptive captions
  11. Videos – close captions and subtitles
  12. Javascript – unobtrusive and non-js alternatives
  13. ARIA – interfacing wth assistive technologies

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. 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.

Language 

Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation. html lang=”en”

Keyboard Navigation

To ensure accessibility, you need to allow users to navigate the site using just the keyboard. Navigation, forms and other critical interactive elements should be tested thoroughly.

Add skip links directly into the code after the <body> to will allow audio browser users and those navigation with keyboards only to skip to the main menu and content without having to go through all of the navigation links.

Text – size contrast and colour

Make sure text is large enough to read and has enough contrast against its background. Colour combinations are important and specific colour blindness testing must be done. There are several free online tools for contrast and colour testing. See below for options.

Focus

Focus determines where keyboard events go in the page at any given moment. For instance, if you focus a text input field and begin typing, the input field receives the keyboard events and displays the characters you type. While it has focus, it will also receive pasted input from the clipboard.

Focus must be visible and can be tested by tabbing through the webpage and checking that all links and interactive elements have a border when active.

Forms

Making online forms accessible can be tricky and special attention needs to be paid:

  • Can the user tab between fields logically with a keyboard?
  • Do all fields have a label?
  • Are the labels close to the input fields?
  • Is the focused element visible?
  • Can the form be easily accessed on a mobile – no zooming-out needed?
  • Can the form be filled in without the use of a mouse?

This example has the mouse disabled: http://udacity.github.io/ud891/lesson2-focus/01-basic-form/

Links

Link text should be descriptive and logical. For example: ‘download case study’, not ‘Click here’. Does the link have a focus state? See Focus above.

Headings 

Headings are structured HTML elements that describe section headings and titles. They are defined with tags that range from <h1> to <h6>, with <h1> being the most important. Users and search engines alike use headings to make sense of content structure. There should ideally be only one <h1> per page with the other heading tags nested within the more important tags above it. Like so:

<h1> main heading </h1>
<h2> sub heading 1</h2>
<h3> sub, sub heading 1</h3>
<h2> sub heading 2</h2>
<h3> sub, sub heading 2</h3>

Images and the 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. The main use of Alt tags 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 Descriptive Tags in any Tables

Captions and 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.

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.

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

JavaScript

The primary purpose of the page should not be restricted by the use of JavaScript, meaning that if JavaScript, if turned off, the HTML alone will still allow the user to gain access to the information or functionality intended.

  • Is the JavaScript unobtrusive? (avoiding inline scripting)
  • Have non-JavaScript alternatives been provided?

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.

Be aware that although these ‘automatic’ testing tool are useful, a level of manual checking and testing should always be done.

Some of our favourites include:

  • Accessibility Insights for Web – This does full site checks and provides you with a human assessment to follow in order to manually test/review things that cannot be automated.
  • Web.dev – This is an update to the old Google page speed insights. It uses Lighthouse which is in the Audit tab in Chrome developer tools.

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. Dynomapper – DYNO 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 Platform – The 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 site.
  4. Accessibility Checker – Accessibility 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 Checklist – Accessibility 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.

And finally…

We hope that this article about the importance of making websites accessible is helpful. Please do contact us if you’d like us to review your current website or discuss helping you make your next website compliant with current accessibility guidelines.

Oops! Please rotate your device for the best experience