An introduction to web accessibility
Updated 24 October 2022
Learn how design can help in web accessibility and the basic factors to consider.
What is web accessibility?
Web accessibility is a measure to ensure that ALL people, including those with disabilities, permanent or temporary, are able to access, understand and use your website.
1 in 5 Australians live with some sort of disability. You can not always see disabilities or how big of an impact they make on a person. Some categories include vision impairment, hearing loss, motor disabilities or cognitive disabilities but there are also situational impairments you need to plan for with accessibility. With strong accessibility principles in place, your website or app can still reach the scores of people who are facing these temporary or situational issues.
Since there are many types of disabilities, there are a wealth of factors to consider when ensuring your digital work is accessible. Fortunately, there are many resources available and an international standard we can check our work against.
Accessibility is a legal requirement!
In Australia – and many other countries – it’s now a legal requirement that your website or app meets accessibility standards. In a landmark case, a famous pizza chain was sued by a blind man after he was unable to order food on their website or mobile app, despite using screen-reading software. This was a huge wake-up call globally with more and more businesses realising that they must comply or risk offending their customers and copping a large fine.
Get better Google ranking.
Google recently released a new set of best practices, outlining that they will now be ‘optimising for a more delightful web’. This means they will 'de-rank' search results for websites without good UX (user experience) and accessibility considerations.
Intuitive, user-friendly web design and accessibility is now more important to your business than ever.
)
POUR – The principles of accessibility
The Web Content Accessibility Guidelines (WCAG) are a set of guidelines that have been set out to make designing accessible content clear and easy. In these guidelines accessibility is organised around these four principles – also shortened to POUR – which lay the foundation that is necessary for anyone to access the web with the best possible experience.
Perceivable
This is all about designing information and user interfaces in ways that a user can perceive. Technically speaking this can be adhered to by using AA accessible colours and appropriate font sizes for ease of reading. This gives people who have difficulty with one or more of their senses the best chance of perceiving a website, even if this is with assistive technology.
Operable
People must be able to efficiently operate a website. Designed components such as buttons, forms and navigation must operate in a way users expect. People with motor or visual impairments may prefer to use a keyboard to navigate over a mouse, meaning focus states must be designed to aid in this navigation.
Understandable
This can be implemented through design and content. Design can make a website easy to understand by using similar or common patterns across the whole site. Content provides consistent and easy to understand information across the site.
Robust
Websites must be robust enough to work seamlessly with outside technologies such as screen readers and other assistive technologies. If these technologies can’t access your site, neither can some of your users.
What are the different WCAG levels?
There are 3 levels of accessibility within the WCAG – A, AA and AAA. Each of these levels are guidelines which must be met to consider a website accessible, with A being the bare minimum, AA being an acceptable level and AAA being optimal. These levels serve as a great guide so website owners know when they are (or aren’t) ticking the boxes required for accessibility.
So, what's the difference between A, AA and AAA accessibility?
WCAG level A is minimal compliance, notable A requirements include:
Ability to navigate with a keyboard
Video captions
Meaning is not conveyed through shape/size/colour alone
AA is acceptable compliance, notable AA requirements include:
Colour contrast in most instances is at least 4.5:1 (Figma has a plugin called Stark, which we use at Honest Fox to ensure colours are accessible)
Images have alt text
Navigation elements are consistent throughout the whole site
Form fields have accurate labels
Headings are used in logical order
AAA is optimal compliance, notable AAA requirements include:
Sign language interpretation for audio/video content
Colour contrast is 7:1 in most instances
Timing is not an essential part of any activity on the site
How you can check and improve your website accessibility
When it comes to accessibility on a website, you can go as large or as small as you want. Here are 8 accessibility tips you can check so your site meets basic accessibility guidelines:
Page titles
You know the little tabs on top of your browser window that show you all the pages you have open? What’s written on these little tabs can be super helpful to anyone that uses a screen reader (they also show up on google when people search!), as well as for SEO purposes. These are called page titles. Make sure these page title descriptions are accurate, brief and unique for each page.Alt text
These are small descriptions that are attached to an image in code and they serve as an alternative way to communicate an image to users with visual impairments through the use of a screen reader. These are especially important when an image is useful for conveying information. If the image is just for decorative purposes then it's not as important, e.g. logos.Headings
Check all your web pages have at least one heading at the beginning of each page and that there is a sort of hierarchy (bigger headings at the top of the page, smaller headings down the page). People who use a keyboard to navigate a page or a screen reader benefit from this as it is easier for assistive technologies to navigate a page with a clear hierarchy.Colour contrast
The contrasting colours of text on background can make your site inaccessible to people with visual impairments. Dark text on a light background and vice versa is normally safe, but to be certain you can use a colour contrast checker like colourcontrast.cc to be certain.Resizing text
A simple one, if you zoom in on your website (on a Mac use command + or on Windows use control +) just check to see that your text gets larger and is still readable. Some sites can have overlapping text here which would be a fail.Navigating with a keyboard
If you land on a page, start pressing the tab button on your keyboard. An accessible site should be easy to navigate by simply pressing the tab to travel from button to button, then pressing enter to select an action. A key part that most sites miss is having what's called a ‘focus’ state, this is a simple state that just highlights where you are on a page when you’re not using a mouse.Forms, labels and errors
Again, using our tab button, we should be able to navigate through every form on the site with ease. Another important feature of forms is having useful error states. When someone fills out a long form and there is one little error, make it obvious what the error is and how they can fix it.Video/audio alternatives
Information in podcasts or other audio can be lost to people with hearing impairments. If the information is important having transcripts or closed captions available is a good solution. Subsequently visual information is not accessible to people with visual impairments, unless it is provided with audio assistance.
With the growing importance of accessibility and the many facets to consider, it’s important you choose a strategic digital partner who fully understands it and knows how to seamlessly implement it into your website or app.
Lastly, an important stat: 71% of people with a disability leave a website immediately if it's not accessible. This shows that ensuring all of your digital assets are accessible is not just the law or a social obligation – it also makes great business sense!
Let us help you to level up or implement accessibility processes in your business.
References
)