On completion of this page you should be familiar with:
Web Accessibility means making the web accessible to as many people as possible. Just as it is wrong to exclude a person from access to public buildings because of a physical disability, it is equally wrong to exclude a person from the internet due to visual impairment or cognitive disorders[1].
For allowing people with disabilities access the web, a variety of software applications exist. These software applications are collectively known as assistive technology. The most common technologies are screen readers and refreshable braille displays.
There is a number of different disabilities that makes access to the web difficult. For some of those assistive technology is required. For other disabilities there is no such requirement; when creating your web page you simply use the objects provided by HTML5, but you use them as they are intended to be used. This idea is known as POSH - Plain Old Semantic Html.
As we go through this series of lessons we shall be building a web site of Maori myths and legends. On each page of this current site we shall learn a different means of building an accessible page. We shall then use the concepts that we have learnt to enhance our Maori legends collection.
By the time we finish the lessons we should have a website containing a collection of Maroi legends. That site would be accessible those with blindness, deafness, dyslexia, colour blindness, autism and attention deficit hyperactivity disorder.
Go to topThese include blindness, low-level vision and colour blindness. People are considered to be blind if, even when wearing corrective lenses, they still need some other means to enable them to perform activities that other people can do without those means. It is estimated that 2.4% of the general population fall within this category[2].
When it comes to scanning the contents of a web page sighted readers will look for large blocks of bold text of varying sizes which they interpret as headings of different levels. By this means they can determine the structure of the page. To them it does not matter how the text sizes for the different heading levels were achieved because the size alone can convey the structure to them.
Blind people also need structure for scanning a page. They cannot, however, see the different sizes of the text. Because of this they need assistive technology to get the same structural information.
To provide this information HTML provides a set of heading tags <h1>...<h6> where <h1> is the highest level and <h6> is the lowest level. When those heading tags are used in the correct order in a page, assistive technology can allow blind users to jump through the headings, thus giving them an overview of the page's contents. It also allows them to read paragraphs, use hyperlinks to jump to areas of the current page or to other pages and to fill in online forms.
Once we have a page so structured that a screen reader can analyse that structure and thereby access its data, it will help not only blind users but also users with other impairments.
People with low level vision may not need to use assistive technology. Instead they can use the zooming facilities on their machines or else increase the size of the text on their page.
For those who are colour blind a developer needs to be careful not to put the colours red and green close to each other. In fact it is better to avoid them completely in your design if you can.
Apart from red and green most other colours are allowed. You must ensure, however, that there is sufficient contrast between foreground and background colours. Later we shall be looking on how to test the colour contrast between text and its background.
Visit the WEBAim website for more information on the different types of visual impairments.
People with hearing impairments may miss out on web media that provides information through sound. This includes audio players and video soundtracks. There is no assistive technology to remedy this situation and therefore facilities need to be built into the web page itself. These include providing text alternative to audio player content and providing captions with video.
For those who are both deaf and blind transcripts of all information conveyed through video or sound would be required. Those transcripts would be used by a refreshable braille reader to deliver the content to the user's finger tips.
For more information on hearing impairments visit the WEBAim Auditory pages
This group consists of people with movement problems, especially hand movement. Impairments can vary from people who cannot use the mouse to those who need to use a head pointer. To cater for people in this group all of the page's functionality must be operable using the keyboard. Thus, once we have structured our page to make it accessible to the blind, we will be part ways towards making it accessible to those with mobility impairments.
The type of assistive technology used for mobility impairments depends on the individual impairment. Here we see a head wand for people with restricted hand movements.
For more information on mobility impairments and relevant assistive technology visit the WEBAim Mobility pages
This group includes people with learning difficulties such as dyslexia and attention deficit hyperactivity disorder. Dyslexia affects 20% of the population[3]. This makes it the most widespread of all the impairments. To make a web page accessible to people within this group, actually improves the page design in such a way as to make it more accessible to all users. This way all visitors to a page get a better user experience. Ways of making a web page more accessible to members of this group include:
For a comprehensive list of things that cause problems to dyslexics visit the UX Movement website. We will be making extensive use of the page's recommendations later in the course.
Most of our recommendation regarding people with dyslexia also apply to those autism[8] and those with ADHD[9]. This is especially true of text to speech using screen readers.
For a very extensive list of various disabilities, how those affect access to the web and how people cope with them, visit the WCAG page How People with Disabilities Use the Web
Go to topThe web started in the early 1990's. It soon became clear that people with the type of disabilities discussed above were either having difficulties using the new technology or were unable to use it.
In order to ameliorate this situation an organisation, the Web Accessibility Initiative (WAI) was formed. It published its first set of recommendations, WCAG 1.0, in 1999. A revised version, WCAG 2.0, was published in 2008 and the current version, WCAG 2.1, was published in 2018.
The aim of the WCAG's recommendations fall into four categories:
For each of their four categories they have three levels of increasing complexity: A, AA and AAA. In these lessons we will be mostly looking at level A.
Go to topWeb pages can be as simple as text embellished with images, or as complex as a three dimensional, multi-user, online game. It is very easy to make the first example fully accessible and it is impossible to do so with the second example. How far are we going here?
We are going to confine ourselves to WCAG Level A. At this level we shall build pages which will include text, hyperlinks, images, audio, video, forms and tables. On those pages we should be able to test all of the success criteria shown below.
Helping people with impairments access the internet is not necessarily a major issue. To cater for the blind no special software is required. If you are a competent user of HTML your knowledge of that markup language is all that is required. You must however use the components of HTML as they are intended to be used. By doing this you are creating a web page with proper structure that will be more understandable to sighted users as well as those who are blind. It will also be more maintainable. Using proper colour combinations and good text formatting gives all users a good experience. Creating web pages with accessibility in mind benefits everyone.
Go to top