Five articles on using ARIA

ARIA (accessible rich internet applications), is a way of programmatically adding roles, states and values to a web control that is not part of the HTML standard controls. It is used by assistive technology to provide feedback about a non-standard control. It can also be used to give additional information such as a page section that may only be visually indicated like the banner, navigation or main page section.

These five articles look at different uses of ARIA and help explain there purpose in accessibility.

1. WAI-ARIA Overview

This is the W3C WAI official site on ARIA, where the standards are documented. It may not be the easiest thing to read but it is the most accurate.

2. How to use ARIA: An introduction

This is the first part of a series on learning to use ARIA in your rich internet applications. It covers what ARIA can be used for and why.

3. ARIA Slider, Part 1

This article explains how to use ARIA to help create an accessible slider web control. It is divided into three parts. Note, the need for attention to how the script interacts with the user has a large baring on the level of accessibility.

4. Accessible drag and drop with multiple items

This article goes over how to code an accessible drag and drop feature of a web application using ARIA to help with accessibility. Note, ARIA is only part of the solution and care is required in the way the script handles user interaction, for example it needs both keyboard and mouse controls.

5. WAI-ARIA FAQ

This is the W3C frequently asked questions on ARIA and addresses many of the common questions developers and content authors have about ARIA and its uses.

Get started with WCAG2.0

WCAG (Web Consortium Accessibility Guidelines), were first published in late 2008. These are a revised set of guidelines from the original WCAG published guidelines and aim to address the issue of the rapid changes in technology by focusing on people instead of technology.

Were to start with WCAG2.0

The first thing to note is that they are guidelines not standards. So they are designed to help guide you and are not there to restrict you or be treated as tick boxes.

Where as W3C code standards are exactly that, standards, which should be followed to ensure future compatibility with web browsers. Failing to comply with W3C code standards is likely to result in incompatibility issues across old and new browsers a like.

Although within the UK public sector, it is a requirement that all web services meet the WCAG2.0 level AA guidelines as a minimum standard. This is a good level to aim for and is achievable, However, it may not address all accessibility issues that people may face.

Principles used in WCAG2.0

The WCAG2.0 guidelines use four principles, known as POUR (Perceivable, Operable, Understandable and Robust). Lets take a look at each of these in turn.

WCAG2.0 Perceivable principle

This principle is to ensure that people of all abilities can recognise and take in all the information given on your web page. Plus be able to make out the various sections and controls that they can use. So this will include the way you structure your content, the kind of controls you use as well as the colour and design.

WCAG2.0 operable principle

This principle is about how people use and interact with your website. People must be able to operate all controls on your web page, regardless of what device or assistive technology they may use. So this will include areas of device independence and an appreciation of assistive technology and the different ways people may interact with your website.

In today’s vast range of web enabled devices, it will include everything from touch screens, voice control, Braille or other specialised keyboard as well as your regular keyboard and mouse.

CAG2.0 Understandable principle

This principle is about making sure that your information and the way to use your website is easy and not beyond anyone’s ability. The article Accessibility, it’s in a KIS can help you with this principle.

WCAG2.0 Robust principle

This last principle is about future proofing by ensuring your website code conforms to coding standards and that it can work with assistive technologies. This will include things like cross browser support, mobile responsiveness and again device independence. It will also include code maintenance and removal of deprecated code as well as progressive enhancement or graceful degradation.

Useful resources

A Little Accessibility Guide to Device Independence

When asking people about web accessibility and device independence, many will say its about giving keyboard access. However, its a little more then that. Here we will help you understand more about this accessibility term.

What is Device Independence?

A device can be anything that gives someone a way to use your website. This includes regular desktop computers, touch screen tablets or smart phones, games consoles and internet ready TVs. It also includes assistive technology like voice activation, eye trackers and other specialist keyboards, Braille keyboards and displays, screen readers and magnifiers. So to be really device independent, your website will need to work across all of these different kinds of internet ready products.

Plus you have to understand how people use these different internet devices to be able to develop your website in a way that will not prevent or make difficult for anyone using their internet product of choice.

Cross Browser Support

One of the first steps towards device independence would be making your website work equally well in all the popular browsers. This task is an on-going challenge as new browser updates are released and peoples choice changes. It is worth noting assistive technology is often behind and may not support the latest browser versions.

There are some best practices that can help you like following the W3C code standards, progressive enhanced design or graceful degradation and separating style from content. These all relate to web development and unless you develop your own website, will be the responsibility of the developers you use.

If you hire someone to build your website, you can ask them about browser support, if the use progressive enhanced design or separate style from content.

If you’d like to read more about progressive enhancement and graceful degradation, take a look at the article Graceful degradation versus progressive enhancement on the W3C WIKI.

Responsive Design

This is another developer term given to the design concept of allowing the page layout to flow to best suit the display it is being viewed on. Developers and designers use various techniques from scaling images and adjusting the number of columns to showing or hiding content to give a better experience for people no matter if they are using a small mobile phone or slightly larger tablet or the latest wide screen HD TV.

Again for many of us, this responsibility will be with who ever we hire to design and develop our website. Although having a basic understanding, allows us to ask our developer, have they included responsive design.

Assistive Technology and How People use It

This is one of the more difficult areas to address as most web developers will have little or no experience of specialist assistive technology. There are some guidelines in WCAG2.0 designed to help developers but often without knowing how people use these assistive technologies, it is difficult to get it right.

Some developers will hire accessibility specialists to help them through this process. By working with their designers and developers, performing many tests and following the accessibility advice given. They can produce much more accessible websites.

One point to remember is that it is often much easier and costs less, if accessibility specialists are involved from the beginning of a website project. As this can prevent the need to retro-fix issues and instead help designers and developers build accessibly from the ground up.

There are many different types of assistive technology and people may use them in different ways, on different devices. I have listed a few popular technologies below and my next article will start going through these in more detail.

  • Screen Readers or otherwise known as TTS (Text To Speech)
  • Screen Magnifiers or specialised monitors and stands
  • Braille Keyboards and Displays, sometimes referred to as refreshable Braille
  • Eye trackers, clickers and other specialist keyboards that are designed to help people with very limited mobility
  • Colour contrast software, often to help people with dyslexia
  • Touch screens, now commonly found in mainstream products, often used for people with coordination difficulties
  • Voice activation sometimes called dictation software

Have Your Say

  • Have you ever heard of the term device independence before?
  • Have you thought about device independence in this way before?

I would love to hear your views on device independence and your thoughts on my explanation of this accessibility subject.

Accessibility and Usability: The first steps

Often I have been asked about the differences between accessibility and usability or which of them is more important. The truth is they tend to be used interchangeably and are equally important.

How I View the Terms Accessibility and Usability

My own view is accessibility will tend to refer to people having access to something. Where as usability is more about people being able to use something. As an example if a building has a flight of stairs leading to the door, people with mobility issues are going to have difficulty accessing the door. However, if the door was made of heavy stone and required great force to open it, many people will not be able to open it despite being able to access the door.

In the world of web accessibility, sometimes abbreviated to A11y, the term accessibility is broadly used for both access issues and usability issues. The term usability is generally used to define the ease of using any web interaction. Things like getting around a site or finding relevant information. In both cases it is about people interacting with your website through a wide range of web enabled devices.

WCAG2.0 and Accessibility

The WAI (Web Access Initiative), part of the W3C (World Wide Web Consortium), have produced WCAG2.0 (Web Consortium Access Guidelines). These are there to help web designers, web developers and web content authors produce accessible websites. However, it is not an easy read and without knowing a little about the people the guidelines are designed to help, it can be quite overwhelming.

So to help make those first steps, we will talk a little about people. After all, your website is potentially the most accessible communication media you have available to you.

Knowing your Audience

Firstly accessibility and usability effects everyone not just people who may have a physical impairment. If something is difficult or frustrating to use, most people will give up and look else where. If your website only works on one browser with specific add-ons installed at a particular screen resolution, it will limit the number of people who can use your site.

Secondly never assume, if your site is selling sports cars don’t assume that just because a visually impaired person can not drive one, that they are not going to buy one. People buy gifts, collectables and may appreciate all kind of things.

It is true many people with impairments can gain the most from accessible websites. It can be their life-line into equality and communication networks. A few examples may include elderly people who are not very mobile or live in remote locations or people who have a physical impairment such as hearing loss or visual impairment. It is worth remembering many people may have multiple impairments such as sight and hearing loss and these can be at varying degrees. There are other impairments that can effect many people like dyslexia or ADHD, these people are often effected by things like the use of colour or time sensitive tasks.

Understanding Disability Groups

I have broadly categorised disabilities into five groups below. Each category has a link to an article on Webaim, where you can read more about the disability and its effect with the web.

By understanding these broad groups of disabilities and the assistive technology people use to access the web, you can better appreciate the WCAG2.0 guidelines and why they exist.

Have your say

Tell us how you view the terms accessibility and usability, has it been a subject of controversy?