Website Accessibility - beyond the guidelines

Thanks to technology, we can achieve more in a day than ever before – both in our professional and personal lives. We can access everything we need at the touch of a button and at the centre of all of this is the internet. But what if you have functional needs? Each year, the WebAIM Million project conducts an accessibility evaluation of the home pages of the top 1 million websites. On average, they detect 50 errors per page.  Imagine the frustration for a user who has specific functional needs in using a website which isn’t designed for them. Functional needs can be varied and can consist of:

• Auditory: This can range from mild hearing loss to substantial hearing loss.
• Cognitive, learning and neurological: This may impact how well people hear, move, see, speak and understand information.
• Physical: This can include motor disabilities and mean that the user has limited movement.
• Speech: This can mean that a user has difficulty producing recognisable speech.
• Visual: This ranges from mild vision loss to blindness and also includes colour blindness and sensitivity to bright colours.

• Low contrast text – making it really difficult to read for users with visual impairments or cognitive, learning and neurological challenges.
• Missing alternative text for images - visually impaired users rely on screen reading software to read out an image's alternative text description. Without this, they are missing out on large chunks of information that are brought to life through images.
• Empty links - an empty link is a link without text that explains what will happen if the user selects the link.  The text isn’t visible, but will be picked up by a screen reader. Links are often calls to action, or the next step in a navigational journey, so should be accessible to everyone who uses the website.
• Missing form input labels - labels describe the purpose of a form field to help a user understand its purpose - relying purely on visual clues doesn't work for all users.
• Empty buttons - similar to empty links, this is a button that contains no text content - there may be an icon or image, but a screen reader can't read this so a user with visually impairments will miss out on key parts of the website.

Website accessibility is about considering the range of functional needs that people have and designing websites and web tools to cater for these.

We’re committed to developing websites that everyone can use and are working on 5 key areas.

Inclusive design is all about removing bias and assumptions among different user groups to ensure that every user can engage with a website fully. There isn’t a one-size-fits-all all approach.

How do we do this? We break design down into two components. The first is 'Accessibility' which acknowledges the different functional needs we’ve already highlighted and aims to remove barriers to entry they may cause. The other component is creating the 'User Experience Design (UX)' which is where we engage with our clients and their audiences to provide us with real-world data. This data is distilled into themes and ideas and used to inform the design decisions we make.

To design in an accessible way, we consider:

• Physical impairments related to vision, hearing, or dexterity.
• Mental impairments that impact cognition or speech.
• Situational limitations that prevent the user from fully engaging with the product.
• Technical constraints like hardware, internet connectivity, and computer literacy.
• Language and geographic barriers.
• Demographic differences like age, race, and gender.
• Socio economic differences.

And then we apply the 7 principles of inclusive design:

1. Flexibility - one size doesn’t fit all.
2. Simplicity - reduce distraction and clutter to help create a more intuitive experience.
3. Consistency - a sense of flow and cohesion between the pages.
4. Perception - having diverse content such as a mix of text, videos and images.
5. Equity - every user should be able to complete the same tasks with ease.
6. Prevention - minimising the risk of human error through effective design.
7. Accommodation - ensuring that users enjoy the experience of the site through a well-designed layout.

A user must be able to navigate the website just using the keyboard. If you try this, you'll find that you have a very different experience of moving around a website! It’s vital that a user who needs to navigate a site using the keyboard should clearly see where they are on a page, they shouldn't get stuck anywhere and should be able to navigate all the content on the site including web forms.

The menu is the main wayfinding tool of any website and should be usable for everyone. This can be a particular challenge for users who can't use a mouse and rely on a keyboard – as per point number 2, they should be able to navigate up and down through menu items, using the keyboard, open up submenus and close them again with ease.

Users should be provided with different ways to find content - a menu is important but not enough on its own.  We strive to give users links, use highlights/features to direct them to the next stage of their user journey and provide a really good search function.

This is important for all users, but particularly for those who face some challenges using websites and web tools. The simple rule is…keep things simple!

The way that content is written and presented is key to making sure that a website is easy to use and to understand. Text should be clear and images should have descriptive alternative text. If an image contains information, e.g. a chart, that information needs to be explained in text. Video should have captions and/or a transcript. If the video doesn't have accompanying audio, there should be an audio description. Audio content should have a transcript. PDFs and other documents must also be accessible. They need to be structured properly with headings, have descriptions for images, charts and tables and have sufficient contrast between text and backgrounds.

To make your website accessible, you need a good underlying system and components of the site set-up with accessibility in mind. There is a lot of technical complexity and detailed guidelines to follow. There are 95 success criteria in the Accessibility Standard so it's important to have a platform that can be updated as requirements change and a technical partner who can help guide you and ensure that you are compliant.

We were delighted to put our accessibility skills to the test when we worked on a new website for Cambridge University.  This site is easy to navigate for users with functional needs. The site itself is an information hub for students with accessibility and disability needs - to ensure that they have everything they need to feel included in all aspects of university life. Take a look!

Being able to use a website effectively is an important requirement as our lives are ever more reliant on the web.  For website owners, accessibility should not be viewed as is a one-off exercise.  Ensuring that everyone can access your website is an ongoing consideration as new content is added, parts of the site are re-designed and new functionality is introduced. How accessible is your website?

We are Olamalu, Drupal experts and experienced web developers. We’re a friendly and down-to-earth team based in West Oxfordshire, who work together to achieve brilliant outcomes. We’ve been developing websites and designing tailor-made tech solutions for a huge range of different challenges for over 10 years.