What is web accessibility?

The inter­net is an essen­tial part of our lives, allow­ing us to con­nect, work, learn, and play in ways that were once unimag­in­able. Unfor­tu­nate­ly, not every­one can ful­ly enjoy the inter­net’s ben­e­fits due to web acces­si­bil­i­ty barriers.

Accord­ing to the World Health Organ­i­sa­tion, an esti­mat­ed 15% of the world’s pop­u­la­tion lives with some form of dis­abil­i­ty, many of whom find it dif­fi­cult or impos­si­ble to use websites.

So, what can be done about this issue? Enter web acces­si­bil­i­ty!

Web acces­si­bil­i­ty is the prac­tice of design­ing and devel­op­ing web­sites and web appli­ca­tions in a way that allows them to be used by every­one, includ­ing peo­ple with disabilities.

Opti­mis­ing your web­site’s acces­si­bil­i­ty means that peo­ple with dis­abil­i­ties can nav­i­gate, under­stand, and inter­act with its con­tent in ways that work for them. Specif­i­cal­ly, it involves imple­ment­ing cer­tain changes that assist peo­ple with hear­ing, motor, visu­al, or cog­ni­tive impairments.

This arti­cle will pro­vide an overview of web acces­si­bil­i­ty, includ­ing what you can do to adhere to the Web Con­tent Acces­si­bil­i­ty Guide­lines (WCAG). We will also dis­cuss com­mon web acces­si­bil­i­ty bar­ri­ers and pro­vide prac­ti­cal tips to help you cre­ate a more acces­si­ble website.

Why is web accessibility important?

Aside from the moral oblig­a­tion to make web­sites acces­si­ble for all, there’s an impor­tant legal aspect that busi­ness­es need to consider:

Inac­ces­si­ble web­sites can get into legal trou­ble due to the Equal­i­ty Act 2010 in the UK, the Amer­i­cans with Dis­abil­i­ties Act in the US, and acces­si­bil­i­ty laws and reg­u­la­tions in countries

world­wide. So, opti­mis­ing your web­site’s acces­si­bil­i­ty is a good way to pro­tect it from law­suits and non-com­pli­ance claims.

More­over, web acces­si­bil­i­ty sim­ply makes good busi­ness sense. An acces­si­ble web­site can nur­ture a greater num­ber of vis­i­tors and there­fore increase engage­ment, user sat­is­fac­tion, con­ver­sions, and more. This is espe­cial­ly true if your web­site was­n’t acces­si­ble before – just imag­ine the increase in peo­ple that will now be able to use your website!

Adapt­ing ele­ments of your web­site does­n’t have to be expen­sive. In fact, you can reclaim up to $5000 in tax relief if you’ve cre­at­ed an inclu­sive web­site in the US.

When think­ing about opti­mis­ing web­sites, SEO comes to mind – and it does apply to web acces­si­bil­i­ty. Thanks to search engines’ pref­er­ence for acces­si­ble sites, your web­site’s reach will increase as you improve its accessibility.

Final­ly, web acces­si­bil­i­ty can be fast to imple­ment. With our AI-dri­ven ser­vice, pur­pleac­cess, we can sup­port your web­site’s changes with inte­gra­tions in as quick as two minutes.

UK disability statistics

If a busi­ness’s web­site isn’t acces­si­ble, it’s seri­ous­ly miss­ing out on a large demo­graph­ic. To put this in per­spec­tive, con­sid­er the fol­low­ing statistics:

• In 2021, 22% of the UK pop­u­la­tion had a disability.
• About 4.5% of the UK pop­u­la­tion are colour blind.
• More than 2 mil­lion peo­ple are liv­ing with sight loss in the UK.
• In the UK, one in five peo­ple have mild to severe hear­ing loss.

Web accessibility isn’t just for people with disabilities

Though acces­si­bil­i­ty ele­ments are often built for peo­ple with dis­abil­i­ties in mind, they’re also used by peo­ple who are tem­porar­i­ly injured or in sit­u­a­tions where full use of inter­net fea­tures is pro­hib­it­ed. For instance:

• Non-dis­abled users in qui­et libraries might make use of cap­tions (orig­i­nal­ly intend­ed for peo­ple with hear­ing impair­ments) if they for­get to bring their headphones.
• Non-dis­abled peo­ple may use key­board nav­i­ga­tion if they have a tem­po­rary hand strain that affects their abil­i­ty to use a mouse (orig­i­nal­ly intend­ed for peo­ple with motor impairments).

Remem­ber­ing this is impor­tant because the num­ber of users helped by improved web acces­si­bil­i­ty will be greater than you can ever know. Sure, we can know how many peo­ple in the UK have a hear­ing impair­ment, but we can’t know how many for­get their headphones.

There­fore, we can be sure that opti­mis­ing your web­site’s acces­si­bil­i­ty will have an unprece­dent­ed effect on user engage­ment. So, where do you start?

Understanding Web Content Accessibility Guidelines (WCAG)

For busi­ness­es to improve their web­sites’ acces­si­bil­i­ty lev­el, they can fol­low the WCAG:

The Web Con­tent Acces­si­bil­i­ty Guide­lines (WCAG) were devel­oped by the World Wide Web Con­sor­tium (W3C) to improve the acces­si­bil­i­ty of the World Wide Web for peo­ple with dis­abil­i­ties. These are the most wide­ly used and accept­ed guide­lines for web accessibility.

WCAG has three lev­els of com­pli­ance: A, AA, and AAA.

• Lev­el A includes the most basic and essen­tial require­ments for web accessibility.
• Lev­el AAA includes the most advanced and com­pre­hen­sive requirements.
• Lev­el AA is the rec­om­mend­ed lev­el of com­pli­ance, as it bal­ances well between the basic and advanced requirements.

WCAG guide­lines are cat­e­gorised into four principles:

• Per­ceiv­able
• Oper­a­ble
• Under­stand­able
• Robust

These prin­ci­ples (some­times called ‘POUR’) pro­vide a frame­work for busi­ness­es want­i­ng to cre­ate web con­tent acces­si­ble to all users. Each prin­ci­ple includes spe­cif­ic guide­lines and cri­te­ria that define the require­ments for accessibility:

Perceivable

This prin­ci­ple requires that web con­tent is pre­sent­ed in a way that can be per­ceived by all users, includ­ing those with sen­so­ry dis­abil­i­ties. This includes pro­vid­ing alter­na­tives for non-text con­tent, such as images and videos, and ensur­ing that text is read­able and easy to understand.

Operable

This prin­ci­ple requires that web con­tent is oper­a­ble by all users, includ­ing those with phys­i­cal dis­abil­i­ties. This includes pro­vid­ing key­board nav­i­ga­tion, clear and con­sis­tent nav­i­ga­tion, and con­trols that are easy to operate.

Understandable

This prin­ci­ple requires that web con­tent is under­stand­able by all users, includ­ing those with cog­ni­tive dis­abil­i­ties. This includes using clear and sim­ple lan­guage, pro­vid­ing instruc­tions and feed­back, and ensur­ing the con­tent is predictable.

Robust

This prin­ci­ple requires that web con­tent be robust enough to be inter­pret­ed by var­i­ous devices, browsers, and User Agents such as assis­tive tech­nolo­gies. (For instance, ensur­ing the site’s markup lan­guage has com­plete start and end tags will help pre­vent dis­play errors.)

Common Barriers to Web Accessibility

Many web­sites still have obsta­cles that make it dif­fi­cult or impos­si­ble for peo­ple with dis­abil­i­ties to access their con­tent. These must be iden­ti­fied if a web­site is going to suc­cess­ful­ly embark on a jour­ney towards com­plete acces­si­bil­i­ty. Here are some of the most com­mon bar­ri­ers to web accessibility:

Lack of alternative text for non-text content

Alter­na­tive text (alt text) describes non-text con­tent such as images, videos, and audio. Alt text is essen­tial for peo­ple who are blind or visu­al­ly impaired to under­stand the con­tent. With­out alt text, they may miss impor­tant infor­ma­tion or be unable to nav­i­gate the web­site and leave as a result.

Inaccessible forms

Forms are a com­mon fea­ture of web­sites, but they can pose a sig­nif­i­cant bar­ri­er to acces­si­bil­i­ty if they are not designed correctly.

For exam­ple, if the form fields are not labelled cor­rect­ly, users with screen read­ers may be unable to com­plete them. Sim­i­lar­ly, if the form requires users to use a mouse, users who rely on a key­board or oth­er assis­tive tech­nol­o­gy may be unable to com­plete it.

Poor colour contrast

Colour con­trast is essen­tial for peo­ple with low vision or colour blind­ness to read and under­stand the con­tent. If the colour con­trast is poor, the text may be unread­able, and the con­tent may be dif­fi­cult to navigate.

Inaccessible multimedia

Mul­ti­me­dia, such as videos and audio, can be chal­leng­ing for peo­ple with dis­abil­i­ties to access if they are not designed correctly.

For exam­ple, if the videos do not have cap­tions or tran­scripts, peo­ple who are deaf or hard of hear­ing may be unable to access the con­tent. Addi­tion­al­ly, peo­ple who are blind or partially

sight­ed will need how-to videos to be audi­bly described – not just visu­al­ly demonstrated.

Inaccessible navigation

Nav­i­ga­tion is a crit­i­cal aspect of web­site design. If it’s not clear or con­sis­tent, users may have dif­fi­cul­ty find­ing or read­ing the con­tent they need. Sim­i­lar­ly, if the nav­i­ga­tion is not key­board acces­si­ble, users who rely on a key­board or assis­tive tech­nolo­gies may be unable to nav­i­gate the web­site in the way that they want to.

How can you make your website accessible?

Is your web­site guilty of hav­ing any of the acces­si­bil­i­ty bar­ri­ers above?

If so, it’s time to make some changes. Here’s how you can adapt your web­site to make it more accessible:

Tips for creating accessible websites

Use clear and sim­ple language

Using clear and sim­ple lan­guage is essen­tial for mak­ing web con­tent under­stand­able for all users, includ­ing those with cog­ni­tive dis­abil­i­ties. Avoid using jar­gon or tech­ni­cal terms that may be dif­fi­cult to understand.

Pro­vide alter­na­tive text for non-text content

As men­tioned ear­li­er, pro­vid­ing alter­na­tive text for non-text con­tent such as images, videos, and audio is crit­i­cal for mak­ing web con­tent acces­si­ble to peo­ple who are blind or visu­al­ly impaired. This may include audi­ble voiceovers along­side how-to videos, or cap­tions that can be picked up by screen readers.

Allow for font adaptations

Some users might need to enlarge fonts if they’re visu­al­ly impaired, as they might strug­gle to read small text. It’s great if you could offer an alter­na­tive style sheet that allows users to enlarge fonts with­out break­ing the lay­outs of your web pages. This applies to all text – CTAs, impor­tant com­pa­ny infor­ma­tion, or pro­mo­tion­al content.

Ensure colour con­trast is sufficient

Suf­fi­cient (high) colour con­trast between text and back­grounds is essen­tial for mak­ing con­tent read­able for peo­ple with visu­al impair­ments or colour blind­ness. Thin fonts may also pose prob­lems, so opt for bold­ness and depth of colour.

Use descrip­tive link text and URLs

Using descrip­tive anchor text that accu­rate­ly describes the con­tent that the link leads to is essen­tial for mak­ing web con­tent under­stand­able for all users, includ­ing those who rely on screen read­ers. This also applies to URLs, which can be prob­lem­at­ic if vague. For instance:

Low read­abil­i­ty: www.example.co.uk/join-us

High read­abil­i­ty: www.example.co.uk/work-for-us

Pro­vide cap­tions and tran­scripts for mul­ti­me­dia content

Pro­vid­ing cap­tions and tran­scripts for mul­ti­me­dia con­tent such as videos and audio files is crit­i­cal for mak­ing the con­tent acces­si­ble to peo­ple who are deaf or hard of hearing.

Make nav­i­ga­tion accessible

Pro­vide clear and con­sis­tent nav­i­ga­tion and ensure it’s key­board-acces­si­ble and com­pat­i­ble with assis­tive tech­nolo­gies. You’ll need to con­sid­er all the inter­ac­tive ele­ments of your site, including:

• CTAs
• URLs
• Anchor text
• Forms
• Dia­logue boxes
• Drop-down menus
• Wid­gets and icons

Use acces­si­ble web design and devel­op­ment practices

Using acces­si­ble web design and devel­op­ment prac­tices, such as using seman­tic HTML and cor­rect­ly struc­tured con­tent, is essen­tial for mak­ing web con­tent acces­si­ble to peo­ple who rely on assis­tive technology.

For instance, place­hold­er text pos­es a sig­nif­i­cant prob­lem for visu­al­ly impaired users want­i­ng to com­plete online forms. This is because place­hold­er text can often be grey (low con­trast) and skipped over by screen read­ers (since it’s non-label text). Web design deci­sions like these can cause a user to bounce off your site – so they’re cru­cial to consider.

These are just a few exam­ples of the many best prac­tices for cre­at­ing acces­si­ble web­sites. To learn more about the WCAG, read this exten­sive checklist.

purpleaccess

If you’d like to devel­op your web­site’s acces­si­bil­i­ty and ensure it’s empow­er­ing all your users, you’ll love our new pur­pleac­cess service.

Here at pur­ple­plan­et, we offer a range of dig­i­tal ser­vices. Our new AI-led acces­si­bil­i­ty ser­vice is designed to help your web­site be scal­able while empow­er­ing every user that vis­its your pages.

If you get on board with pur­pleac­cess, you and your cus­tomers can expect the fol­low­ing acces­si­bil­i­ty features:

• Web­site inspection
• VPAT stan­dards review
• Media acces­si­bil­i­ty
• File acces­si­bil­i­ty
• Back-end audit
• Usabil­i­ty testing

We’ll also help you cater to every­one vis­it­ing your site with our cus­tomis­able acces­si­bil­i­ty inter­face. Users can choose between pro­files that each offer adjust­ments to spe­cif­ic needs. For instance:

• Allow users to adjust font sizes, colour con­trasts, and text han­dling so that on-screen ele­ments are eas­i­er to read, what­ev­er impair­ments they may have.
• Offer dic­tio­nary def­i­n­i­tions for chal­leng­ing words or phras­es through search engine integration.
• Give users the choice of dis­abling audio, video, mov­ing, and oth­er dis­tract­ing elements.
• Allow users to high­light impor­tant site ele­ments so they can focus on spe­cif­ic parts of your web­site’s content.

Get in touch