UX Design Guidelines for Website Accessibility

Website accessibility for a user

The first web accessibility standards were published in May, 1999, and despite being published over 20 years ago, there are millions of websites that simply aren’t accessible – and it isn’t just users who are losing out.

The W3C (The World Wide Web Consortium) is the main international standards organisation for the internet and it created the “Web Content Accessibility Guidelines” 2.1 (WCAG 2.1), which aim to make web and app content more accessible to people with disabilities, which includes people with:

  • impaired vision – those who have impaired vision (either partially or totally), or those who are colour-blind
  • impaired hearing – those who are deaf or hard of hearing
  • motor difficulties – those who find it difficult to use an input device, like a keyboard or mouse
  • cognitive impairments – those with learning difficulties, such as dyslexia or autism

The WCAG are categorised into three levels of conformance to meet the needs of different groups and different situations: A (lowest), AA (middle), and AAA (highest). The WCAG 2.1 at the A level does not achieve broad accessibility, so Level AA has been adopted as the global standard for web accessibility.

According to the World Bank, 15% of the world’s population experiences some form of disability and it’s surprising to know that with many websites, it’s still a forgotten element for both design and development.

Why should you care?

Besides the fact it has been a legal requirement since the Equality Act 2010…

When it comes to general design, things are heavily weighted towards aesthetics and appearance, rather than accessibility and usability for every type of person who visits your website. Plus, there’s a myth that making a website accessible is difficult, expensive and completely changes your website functionality and interface.

This isn’t always the case.

Features in the UX Design Guidelines for Website Accessibility, such as text and colour alterations, can only be enabled by the user so it won’t affect your overall interface appearance for those who doesn’t enable the feature. Providing alternative text descriptions for images won’t have a noticeable effect on the user interface. In fact, accessibility compliance is beneficial for your SEO (Search Engine Optimisation)!

From a website’s SEO perspective, an accessible website will help you get better rankings. Search engines use crawl bots to scan through your webpages, and much like a visually impaired visitor using a screen reader, these crawl bots read plain text.

Therefore, it is important to provide alternative text for images and plan your content architecture.

Additionally, if you make the effort to ensure your website or app is fully accessible, you will not only build a positive reputation for your business, but you will create an mage of acknowledgment for users with impairments. You may even gain new acquisitions from these users by helping them feel valued as an online user.

How you can comply

There are a few simple guidelines for Website Accessibility that you can make on-page to ensure your content is suitable:

Video Captions

It is recommended that you always use subtitles for videos, podcasts and other audio elements as these will not only help users when they are in a location where they must keep the sound off or low, but it also helps with SEO (Google cannot read videos, but they can read the transcript).

Ensure your captions are properly written and reviewed to provide the 11 million hard of hearing users in the UK with the best experience.

Forms

Clearly defined boundaries for form fields are important for users with mobility impairments and those with cognitive disabilities. Knowing the location and size of the clickable box is important for people using a standard or adaptive pointing device.

Additionally, labels are important as they tell the user the purpose of the field, maintain their usefulness when focus is placed inside of the field and remain even after completing the field. Placeholder text is a poor replacement for a visual label as once the user starts typing, it goes away. Additionally, some replacement text does not even tell the user what data they’re meant to be inputting.

Title and Header Tags

Content writers will often use different headers simply because of their styling, or they might decide titles should be quirky to seem interesting and gain traffic. Please remember that the words within the tags are also being used by Google crawl bots to ‘understand’ what the page is about; therefore, they should be meaningful and properly structured.

Most screen reader software works similarly to Google; reading the titles and headers to visually impaired users so they can understand what the page relates to. A list of headers in the wrong order, or a page title which doesn’t sound relevant to the content would frustrate anyone, imagine the effect that then has on someone who relies on listening to the page.

To help fix this, simply use a H1 tag for your main title, H2 for section titles then the other headers (H3, H4, H5 & H6) in order of importance. Make sure your title tags are relevant to your content.

Image Alt Tags

Alt tags (sometimes called alt attributes, alt descriptions, or alt text) is also accessed by screen readers to “read” the picture. You can, therefore, use this field to describe an image and provide context to users who would miss the visuals if there was no tag. This is also great to have in case the image doesn’t load.

Alt tags provide SEO benefits by giving search engines more information to crawl. To help your alt tags comply, ensure they are descriptive and include your targeted keywords (as long as it actually makes sense).

Automated Accessibility

“Web accessibility is a set of rules, behaviours, code standards and design guidelines, that are meant to allow people with disabilities to effectively use websites” – accessiBe.

BLT Digital Agency are partners with accessiBe: the first and only Artificial Intelligence-powered solution that is revolutionising the industry by making web accessibility simple, automatic, immediate, and affordable.

Their guidelines for Website Accessibility were developed side by side with people with disabilities and leading experts in accessibility and assistive technology, we have provided a few, but not all, of the methods accessiBe conducts to help you comply with the Web Content Accessibility Guidelines.

Accessibility Interface

accessiBe’s solution replaces the old-fashioned method of compromising your site’s design, in favour of accessibility.

Accessibe Interface

Font handling

Users can increase and decrease font size, change its type face to enhance the readability best suited to them, adjust spacing, text alignment, line spacing height, along with more options.

Colour handling

Users can select various colour contrast profiles such as light, dark, inverted, and monochrome. Additionally, users can swap colour schemes of titles, texts, and backgrounds with over 7 colours.

Accessibe Dark Contrast

Animations

Users with epilepsy can stop all running animations at the click of a button. This includes videos, GIFs and CSS flashing transitions.

Content highlighting

Users can emphasize crucial elements, such as links and titles. They can also highlight focused or hovered elements along with the ability to change the cursor’s colour and sizing to make it more noticeable when navigating.

Content Highlighting

Audio muting

Users with hearing devices may experience headaches or other issues due to automatic audio playing. This option allows users to mute the entire website instantly.

Cognitive disorders

accessiBe utilises any search engine that is linked to Wikipedia and Wiktionary, allowing people with cognitive disorders to decipher meanings of phrases, initials, or slang instantly without the need to navigate away from your page to research the definition.

AI Application

accessiBe’s innovative AI runs in the background of your website and optimizes the accessibility level of every 24 hours to remediate your website’s HTML accessibility issues, as well as the site’s functionality and behaviour to cater to all external devices to provide users with a seamless experience.

Screen Reader

accessiBe’s web accessibility AI analyses your website’s components from top to bottom to providing screen-readers with meaningful data, such as offering accurate form labels, descriptions for actionable icons (social media icons, search icons, cart icons, etc.); validation guidance for form inputs; element roles such as buttons, menus, and model dialogues (popups).

Their AI scans all the website’s images and provides an accurate, meaningful image-object-recognition-based description as an ALT (Alternate Text) tag.

Please note that accessiBe won’t override your ALT tags, titles, or any other manual accessibility work that has been done. They take into consideration that if you’ve adjusted them yourself, it’s for a reason.

Keyboard Navigation

accessiBe AI can adjust the website’s HTML, as well as adding various behaviours using JavaScript code, to ensure the website is fully operable with a keyboard.

For many users, accessiBe won’t change anything as the accessibility functions will only be activated when turned on by the user via the interface (or by a screen-reader if the user is blind), as an overlay to your website.

Please note that accessiBe won’t affect your design, UI, or performance. The entire process is automated and in the background.

Let’s summarise

With today’s technology, it’s completely possible to create a trendy, interactive, engaging, and accessible website; therefore, web accessibility should no longer be seen as a burden to your online business. Anyway, there are loads of ugly, non-accessible websites out there…

We take accessibility seriously, because we know how frustrating it is to visit a broken website. We love great user experiences which is why we always follow Guidelines for Website Accessibility to ensure our design and developments allows your website to be used (and enjoyed) by everyone.

If you feel your website is not complying with WCAG 2.1, or you want to improve your current accessibility methods, get in touch! 🤘