In this Web Skills module on accessibility you will learn what accessibility means, the tools people use to navigate the web, and how you can make your website more accessible for your users.

Accessiblity menu

Facts

  • There are over 11 million people with a limiting long term illness, impairment or disability in Great Britain.
  • Nearly 2 million people in UK has a sight problem.
  • One in 12 men and one in 200 women have some form of colour blindness.
  • About 2% of the population in the UK have learning disabilities.
  • 10% of the UK population is thought to have dyslexia to some degree.
  • 13% of the population have literacy problems.
  • 21% of the UK population is aged 60 or over.

Legal standards

Worldwide standards

World Wide Web Consortium (W3C) created Web Content Accessibility Guidelines

Legally required in the UK

The Equality Act 2010 makes it illegal to discriminate against people with disabilities this applies to anyone providing a service; public, private and voluntary sectors. (Websites are considered to be one of the ‘services to the public’.)

What happens if you ignore accessibility?

“A disabled person can make a claim against you if your website makes it impossible or unreasonably difficult to access information and services."

"If you have not made ‘reasonable adjustments’ and cannot show that this failure is justified, then you may be liable under the Act, and may have to pay compensation and be ordered by a court to change your site.”

RNIB 2005

What is accessibility?

It is not just about disability, it is about universality!

  • It means making your website accessible to all internet users.
  • It is about the inclusion and participation of people with disabilities using the web.
  • There are lots of different factors that affect the way in which people navigate websites.
  • Browser technology is also an important consideration  - each browser displays information differently.

Factors that affect web use

  • Visual impairment: poor eyesight, colour blindness.
  • Motor/Mobility: Difficulty using hands, Parkinson's Disease.
  • Auditory: Deafness or hard of hearing.
  • Seizures: Caused by visual strobe or flashing effects.
  • Cognitive: Developmental/learning problems.

How different the world appears

Visual impairment

Below you can see how the world looks to someone with a visual impairment. You can see more examples at Colour Vision Simulator Examples

Colour Vision Simulator Examples

Imperial's website looks different through the eyes of someone with colour blindness, the colours appear greyed out:

Imperial's study page - with colour blind ilter on. Normal Imperial Study page

Autistic Spectrum Disorder

All pictures, text and icons displayed by most computers are made up from pixels. Most people never notice the pixels as their brains attempt to make sense of whatever is on screen. People with autism may be observing a display of pixels that make very little sense to them. This will be much more pronounced in pictures rather than with text.

Simulations can be used to see how the world appears to people with different types of disability.

Man on bike - as viewed by someone with Autism
Man on bike - as viewed by someone with Autism
Man on a bike seen through 20/20 vision
Man on a bike - picture viewed with 20/20 vision

Accessibility tools

Visually impaired users

Screen readers
  • software which can read out either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difficulties).
  • read out everything that is happening on the computer (used by blind and vision impaired users).
Braille terminals
  • These have a refreshable Braille display which renders text as Braille characters (usually raising pegs through holes in a flat surface) and either a QWERTY or Braille keyboard.

Screen magnification software enlarges what is displayed on the computer monitor, making it easier to read for vision impaired users.

Keyboard users

Some people use their keyb

Visually impaired users

Screen readers
  • software which can read out either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difficulties).
  • read out everything that is happening on the computer (used by blind and vision impaired users).
Braille terminals
  • These have a refreshable Braille display which renders text as Braille characters (usually raising pegs through holes in a flat surface) and either a QWERTY or Braille keyboard.

Screen magnification software enlarges what is displayed on the computer monitor, making it easier to read for vision impaired users.

Keyboard users

Some people use their keyboard, rather than a mouse, to navigate the web.

Non-keyboard users

Speech recognition software
  • can accept spoken commands to the computer, or turn dictation into grammatically correct text.
  • useful for those who have difficulty using a mouse or a keyboard.

Keyboard overlays can make typing easier and more accurate for those who have motor control difficulties. oard, rather than a mouse, to navigate the web.

Non-keyboard users

Speech recognition software
  • can accept spoken commands to the computer, or turn dictation into grammatically correct text.
  • useful for those who have difficulty using a mouse or a keyboard.
Keyboard overlays

can make typing easier and more accurate for those who have motor control difficulties.

How to make your web pages more accessible

What the College has put in place to help you

T4 Site Manager gives Imperial the opportunity of creating a more accessible experience for our users and has achieved W3C “AA” conformance.

  • Current web templates were developed with assistance from the College’s Accessibility Officer to ensure that our pages are as accessible as possible.
  • The colours used in the design and the font size are some of the elements considered during this process.
  • The templates have also been reviewed by an external agency, Userite, and they arranged a panel of disabled users to test the site.
  • If you use the standard editor tools – headings, text, image uploading – your pages will be largely accessible.
  • An accessibility reporting tool is available within T4:

Screen grab of T4 reporting tool

Page structure

Break up a long web page into logical subsections with headings makes it easier to get to your location of interest.

Consistent layouts - your pages will be much easier to navigate if elements are in the same place on every page.

Avoid using tables as a layout method use blocks instead:

Example of headings used to break up a web page Use headings correctly

  • Heading tags allow screen reader users to jump to the sections they’re interested in.
  • Headings outline the structure of the web page.

Headings should run as below, the Imperial website is set up to do this for you. Your Heading options will be determined by where your content type sits in the structure.

  • Heading 2 - New section
  • Heading 3 - Sub heading
  • Heading 4 - Sub sub heading
  • Heading 5 - Sub sub sub heading
  • Heading 6 - Sub sub sub sub heading
  • Don’t use headings to highlight text or paragraphs.

Keep content simple

  • Check all spelling.
  • Specify the definition of each abbreviation or acronym where it first occurs.
  • Use clear, simple language for all content.
  • Make sure all of the section titles are descriptive.
  • Do not use headings to format large sections of text – headings should not really go beyond one line on the page.

Using multimedia

Images

  • Ensure each image is accompanied by relevant alt-text that describes the content of the image - The College's CMS image crop tool will not allow you to upload an image without an alt text.
  • Speech synthesis software will read out these descriptions as it works its way through the page.  Clear text will enable people using this software to understand what the image depicts.
  • Alt-text does not need to state it is an image – it should simply describe what the picture depicts.
  • For example the Alt text for this image would be 'Student and parent carrying bedding':

Student and parent carrying bedding

  • Try not to use images in place of text.
  • If you have to embed complex diagrams, charts and processes include:
  • a short alt text to describe what the image is of, e.g. “Graph of student numbers since 2000”.
  • Where images are used for headers make heading clear in alt text.
  • If you have images rotating on a page, you should ideally be able to stop them moving.

(Find out how to add images to your website)

Video/audio

  • Ensure videos do not automatically play when the page loads.
  • Do not use animated content that flashes or changes very quickly.
  • Be ready to create or offer a transcript if specifically asked for.

(Find out how to add video to your website).

Do your links make sense out of context?

  • Don’t forget to make each of your links unique otherwise you’ll confuse your site’s visitors.
  • A page full of click here links isn’t going to assist screen readers.
  • Visitors relying on speech synthesised technology will hear a list of the links a page contains, thus, avoid use of vague links, such as click here, as the visitor will have no idea what the link is for.
  • Make sure all links are contextual and unique. Find out more about writing links from web experts Nielsen Norman Group.

Indicate what you are linking to

  • Only link to documents if you have to.
  • If a link leads to something different than HTML files, such as a PDF file, then indicate this next to the link  e.g. Web Skills [pdf].
  • Some software used by many visually impaired people is incompatible with Adobe Acrobat Reader so Access Adobe converts PDF files into HTML.

How long are the URLs on your page?

  • Try not to use really long URLs as some speech synthesised software will read the URL aloud
  • Ensure your URLs relate closely to heading content users will find there
  • You can use the Output URI box in the CMS T4 Site Manager to reduce the size of your URL. (In Modify section).

Accessibility top tips

  1. Use headings correctly: logical and sequential (mostly done for you in T4 CMS).
  2. Plan clear and simple structure and content.
  3. Images: add  alt-text to include a meaningful text alternative.
  4. Multimedia: Be aware you may need to provide transcripts of audio and video.
  5. Links: Use unique descriptive link text that makes sense when read out of context. For example, avoid click here.
  6. Have a consistent page organisation.
  7. Check your work: Use different browsers, screen resolutions, and operating systems. Check as many alternatives as possible, and ask others to do the same for you.
  8. Accessibility covers a lot of ground beyond just disabilities. By structuring your web pages with thought (images and text, meaningful alt tags) the experience will be better for all visitors:
    • Remember clean, concise site navigation with descriptive links that identify where they are taking you.
    • There are those who just prefer browsers other than just Internet Explorer or Firefox.
    • SEO – search engines like semantic, clean text. Poor or non-existent titles or header tags will be detrimental to your pages being found.

Need more help?