What is web accessibility?

A wheelchair gazes ahead at a tunnel made out of a spider's web. The path through it is foggy and unclear.A wheelchair gazes ahead at a tunnel made out of a spider's web. The path through it is foggy and unclear.

You've probably noticed accommodations for disabled people in the real world, like ramps and accessible bathrooms.

On the web, disabled people also need accommodations.

Captions are one example of web accessibility. Deaf people need them to access videos.

Have you ever turned captions on because you're in a loud public space? Or to help with learning a language? Accessibility is the difference between disabled people being able to use something or not, but it isn't only for their benefit.

Accessible site = better user experience for everyone.

And it isn't all that complicated to learn or do :)

Types of disabilities

A muscular man standing confidently on a prosthetic leg

Physical

e.g.

  • Paralysis
  • Parkinsons
  • Limb difference
  • Cerebral palsy
  • Multiple sclerosis
  • Muscular dystrophy
A brain illumated in different shades of purple, pink and orange

Cognitive

e.g.

  • Dyslexia
  • ADHD
  • Autism
  • Discalculia
  • Learning disabilities
  • Down's syndrome
An ear

Auditory

e.g.

  • Deafness
  • Hard of hearing
  • Hypersensitivity to sound
  • Auditory processing disorders
An eye

Visual

e.g.

  • Partial sight loss
  • Severe sight loss
  • Colour blindness
  • Light sensitivity
Just for fun
Can you figure out what this spells in British Sign Language?
DEAF
Reveal the word
See the BSL alphabet
i
Non dominant points with the index finger. The dominant hand's index finger and thumb form a semi circle which is placed against the stuck up index finger; the other fingers are folded.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the index finger on the other hand.Non dominant is hand open, palm up. Dominant hand is pointing with the index finger to the thumb on the other hand.Both hands have the fingers folded apart from the indexes and middles which are straight. The dominant hand's fingers rest on top of the other hand's fingers.

The four principles

Because it's not always understood nor prioritised, web accessibility is often poor.

But it should be POUR: perceivable, operable, understandable and robust.

Can everyone perceive the information on the site, even if one of their senses is impaired?

e.g.

  • Do videos have captions?
  • Is everything on the page read aloud properly by screen readers to blind users?

Can everyone operate the site?

e.g.

  • Can you get to buttons by pressing tab?
  • When using speech recognition software, will saying 'click start' click a start button?

Can everyone understand the contents of the site?

e.g.

  • Is complicated language used unnecessarily?
  • Does the menu layout change unexpectedly between pages?

Robust: can everyone view the site, no matter what they're viewing it with?

e.g.

  • Does the site work on different browsers?
  • Does the site work on different types of phones?
Just for fun
Can you figure out what this spells in British Sign Language?
POUR
Reveal the word
See the BSL alphabet
i
Dominant hand has the fingers folded in, apart from the thumb and the index finger which form a circle by touching the finger tips together. The tips also touch the tip of the index finger on the non dominant hand, which is in a pointing position.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the ring finger on the other hand.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the pinky finger on the other hand.The non dominant hand is open, palms up. The dominant hand is pointing with the index finger, except the index finger is curled. It rests on the palm of the non dominant hand.

Who does it benefit?

Everyone!

Users with a:

  • disabilitye.g. paralysis or blindness
  • temporary impairment e.g. a broken limb
  • situational limitatione.g. being somewhere with poor lighting
  • desire to have enhanced user experiencese.g. using captions to practise a new language

Company ownerswho want their website to have:

  • a positive reputation
  • better SEO
  • a slick user experience
  • more users
Just for fun
Can you figure out what this spells in British Sign Language?
EVERYONE
Reveal the word
See the BSL alphabet
i
Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the index finger on the other hand.Non dominant hand is open, palms up. The dominant hand has the index and middle fingers outstretched, not touching each other. They're placed upon the non dominant hand facing downwards.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the index finger on the other hand.The non dominant hand is open, palms up. The dominant hand is pointing with the index finger, except the index finger is curled. It rests on the palm of the non dominant hand.The non dominant hand is open with the fingers together and thumb apart. The dominant hand is pointing with the index finger, which rests on the other hand, the tip pointing to the place where the base of the thumb and index finger meet.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the ring finger on the other hand.The non dominant hand is open, palms up. The dominant hand's pinky, ring finger and thumb are folded in. The other two fingers are pointed straight, rested face down on the non dominant palm.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the index finger on the other hand.

Money down the drain

In 2019, the Click-Away Pound survey looked into what it was like for disabled people in the UK to do online shopping.

Venn diagram of 2018 statistics in the UK. Population was 66.44 million. Of that population there were 48.13 million over sixteens with internet access. Of those over sixteens 10.07 million had a disability. Of those with a disability 7.15 million needed a website to be accessible to use it easily or use it at all.

48 million adults were using the internet.

7 million of them had a disability that meant they needed websites to be accessible to use them easily, or at all.

That's 15% of users!

UK online retailers missed out on roughly £17 billion that year because these people were leaving their sites without being able to make purchases.

Just for fun
Can you figure out what this spells in British Sign Language?
MONEY
Reveal the word
See the BSL alphabet
i
The non dominant hand is open, palms up. The dominant hand's pinky and thumb are folded in. The other three fingers are pointed straight, rested face down on the non dominant palm.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the ring finger on the other hand.The non dominant hand is open, palms up. The dominant hand's pinky, ring finger and thumb are folded in. The other two fingers are pointed straight, rested face down on the non dominant palm.Non dominant hand is open, palms up. Dominant hand is pointing with the index finger to the index finger on the other hand.The non dominant hand is open with the fingers together and thumb apart. The dominant hand is pointing with the index finger, which rests on the other hand, the tip pointing to the place where the base of the thumb and index finger meet.

The law

The web content accessibility guidelines (WCAG) are a list of checkpoints to grade how accessible a website is. The grades are level A, level AA and level AAA (the best).

In many countries, company websites have to be Level AA. If they're not, the company could run into legal troubles and be sued. If it's not the law where you live yet, there's a good chance it will be in coming years.

Just for fun
Can you figure out what this spells in British Sign Language?
LAW
Reveal the word
See the BSL alphabet
i
The non dominant hand is open, palms up. The dominant hand points with the index finger, which is rested face down on the other palm.Non dominant is hand open, palm up. Dominant hand is pointing with the index finger to the thumb on the other hand.Both hands are open, fingers outstretched. The hands are sort of clasped together, but with the fingers still straight.
set