What is Web Accessibility and why is it important

What is Web Accessibility and why is it important

Web accessibility refers to the practice of designing and developing websites and web applications in a way that ensures they are accessible to all users, including those with disabilities.

Studies show that at any given time 25% of the global population has a permanent, temporary or situational disability.

The goal of web accessibility is to provide an inclusive and equal experience for everyone, regardless of their abilities or disabilities.

Several guidelines and standards have been established to promote web accessibility. One of the most widely adopted standards is the Web Content Accessibility Guidelines (WCAG) developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).

In web design we think about 4 different categories of disability:

  • Visual: blindness or heavy sightedness
  • Auditory: deafness or hard of hearing
  • Motor limitation: full paralysis to minor or limited motor function
  • Cognitive: ADHD, dyslexia or autistic spectrum disorder

Key aspects of web accessibility include

Perceivability: Information and user interface components must be presented in a way that can be perceived by all users, regardless of their abilities. This includes providing text alternatives for non-text content, ensuring sufficient contrast for text, and offering alternatives for multimedia.

Operability: All users should be able to interact with and navigate the website. This involves designing navigation and interactive elements that can be operated with various input methods, such as a keyboard, mouse, or assistive technologies.

Understandability: Information and operation of the user interface must be clear and straightforward. This includes providing legible text, offering consistent navigation, and avoiding content that may cause confusion.

Robustness: Websites should be designed to work well with current and future technologies, including assistive technologies. This involves using code that is compatible with different browsers and ensuring that the website remains accessible as technology evolves.

Factors to consider when building a website

To give you a better understanding we have outlined the most important factors to consider when building a site with web accessibility in mind.

Site language

Assistive technologies like screen readers are not interacting with the text and images on the screen, (as we see it) they are interacting through the text in the HTML code.

The HTML tag “lang” sets the language of the site. This is how the speech engine knows how to read out your website copy.

For example, it is quite possible if the website is written in English and the HTML language tag is set to ES for Spanish that the screen reader will read the English with Spanish pronunciation.

Headlines

Headings have semantic meaning, indicating the importance and hierarchy of content. They should always be sequential in descending order. For example H1, H2, H3 etc.

They also contribute to the structural organisation of content on a webpage. They create a hierarchy that helps users, especially those using screen readers understand the relationships between different sections of content.

Headlines also provide a navigational aid for users, allowing them to quickly jump to specific sections of content. This is particularly useful for individuals who use screen readers or the keyboard for navigation.

Text

All text should be written in sentence case. The minimum font size should be 16px. Text links should always be supported by some sort of formatting or textual symbolic element such as an underline. Using a different colour is not enough.

Paragraphs should not be too long and it is also worth avoiding justified text, this can be hard to read due to the uneven letter spacing.

Colour Contrasts

The contrast ratio is a measure of the luminance (brightness) difference between text and its background colour. The minimum recommended contrast ratio for normal text is 4.5:1.

In design, contrast ratio refers to the difference in visual properties between two elements, often in terms of colour, brightness, or luminance.

We also need to ensure a clear distinction between foreground (text or images) and background colours. Any text or image should be easily distinguishable against its background to facilitate readability.

When using colours avoid combinations that may cause difficulties for users with colour vision deficiencies. For example, red and green combinations can be problematic for individuals with red-green colorblindness.

Navigation

Besides the main navigation the website should have at least one more method of navigation. This could be a footer menu or a search bar.

The user also needs to be able to move through the navigation items using the keyboard arrows and tab key. Websites with a large navigation should also have an option to “Skip to Main Content” link. This is an ordinary link, usually before the main navigation menu at the top, linking to the main content on the web page.

Web Forms

Ideally form fields should have a permanent field title above the form field. It’s best practice to use clear and descriptive labels for each form field.

Labels should be associated with their corresponding input fields using HTML tags like "label". Form labels describe the purpose and function of form elements.

The form fields should be organised logically and in a meaningful order.

Image Alt Tags

Image alt tags provide written descriptions of images, enabling individuals who use screen readers or have other visual impairments to understand the content and purpose of the images on a webpage.

When a screen reader encounters an image it reads the alt text aloud, providing context and information about the image.

Alt tags should describe the content or function of an image. This is crucial for conveying the intended message, especially when images are used to illustrate important information such as navigation.

Accessibility Statement

The Accessibility Statement is a page on the website that declares the website owner's commitment to making their site accessible to all users, including those with disabilities.

This page should be accessible via a link from all pages, ideally from the global footer.

Conclusion

Web accessibility is crucial for several reasons:

  • Inclusivity: Web accessibility ensures that people of all abilities, including those with disabilities, can access and interact with digital content.
  • Social responsibility: Web accessibility aligns with ethical principles and reflects a commitment to providing equitable access to information and services.
  • User experience: Accessible websites provide a better user experience for everyone, not just those with disabilities.
  • Search engine optimisation: Implementing web accessibility practices can positively impact search rankings.
  • Assistive Technologies: Many users rely on assistive technologies such as screen readers, braille displays and voice recognition software.
  • Future-Proofing: Web accessibility is forward-thinking website design.
  • Brand Reputation: Web accessibility shows that your organisation values diversity, inclusivity and the well-being of all users.