Optimizing Websites for People with Disabilities – How to Make Them Inclusive for Everyone?

8min.

Comments:0

Optimizing Websites for People with Disabilities – How to Make Them Inclusive for Everyone?d-tags
21 November 2024
Awareness of the importance of inclusivity is growing also in online spaces and UX design. Yet, many websites still aren’t optimized well enough to be accessible for users with disabilities.

8min.

Comments:0

People with disabilities as internet users

A Pew Research survey found that just 62% of adults with disabilities owned a desktop or laptop, compared to 81% of those without disabilities. Additionally, only 72% of people with disabilities had smartphones, while 88% of people without disabilities did. People with disabilities were also three times more likely to report never going online and were less likely to use the internet daily.

In 2021, the non-profit organization WebAIM (Web Accessibility in Mind) conducted a review of the homepages of the top one million websites. They found that 97.4% of these pages didn’t meet one or more criteria from the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA, the widely recognized standard for accessibility. On average, each page contained 51.4 accessibility errors.

Despite increased awareness of UX, many websites are still not fully tailored to meet the needs of users with disabilities. Most developers tend to create content for “ideal” or “typical” users, often overlooking the challenges faced by people with permanent, temporary, or situational disabilities.

If you want your website to be fully functional and UX-friendly, you need to make it accessible and truly inclusive. This article is here to guide you on how to make your website accessible for people with disabilities. The first step is to understand who they are and how they use the internet.

How do people with disabilities use the web?

For instance, blind users often rely on desktop browsers like Webbie, which read site code aloud. Some browsers, like Firefox, also provide tools that make navigating the web easier for them.

It’s worth noting that blind users face difficulties when content is embedded in graphics, sliders, or scripts that their browsers cannot interpret. People with low vision, including those with color blindness, protanopia, tritanopia, and other visual impairments, often encounter challenges such as low contrast, cluttered visuals, or layouts that are hard to navigate.

And this is just scratching the surface. Many of us don’t fully grasp the challenges others face. Our communities also include neurodivergent individuals, people with cognitive impairments, epilepsy, and those with heightened sensitivity to sound. Designing your page with these users in mind is essential. And if you’re wondering – yes, it’s absolutely possible to create accessible websites that look amazing and perform even better.

Organizations like the World Wide Web Consortium (W3C) are leading the charge in accessibility and have published the Web Content Accessibility Guidelines (WCAG) to make the task easier.

So, what can developers and SEO specialists do to make websites more accessible and inclusive?

Adapting websites to meet the needs of people with disabilities – WCAG 2.2

The WCAG 2.2, or Web Content Accessibility Guidelines, offer detailed guidance on how to make websites accessible to everyone, including users with disabilities. These guidelines were created by the Web Accessibility Initiative, a W3C project, and hold the status of an international ISO standard. They outline the key considerations that need to be addressed when building a website, setting the foundation for specific optimizations. Let’s explore some practical examples of these optimizations below.

The WCAG 2.2 principles

principles of accessibility - Perceivable, Operable, Understandable, Robust

The four core principles of accessibility under WCAG are summarized by the acronym POUR: Perceivable, Operable, Understandable, and Robust.

To fulfill the Perceivable principle, information and interface elements must be presented in ways that users can perceive. Operable means that interface and navigation elements must be functional – each element should have a defined role and purpose, triggering specific actions or serving a particular function. Understandable is straightforward: content should be easy to grasp, and the interface should be intuitive to use. Finally, for a website or app to be truly robust, it must be accurately, substantively, and technically prepared to ensure it’s properly interpreted by both users and assistive technologies.

In a nutshell, WCAG 2.2 principles push designers and developers to take deliberate, practical steps to create websites and applications with clear functions, simple and effective solutions, and purposeful designs that meet the needs of all users.

How does WCAG 2.2 differ from WCAG 2.0?

WCAG 2.2 is a more comprehensive and up-to-date set of guidelines for web accessibility compared to WCAG 2.0.

New criteria

WCAG 2.2 introduces nine additional success criteria, including:

  • Real-time content accessibility, covering live captions for video streams and live chat functions.
  • Enhanced support for users with cognitive disabilities, focusing on simplifying language and navigation.
  • Accessibility for users with auditory sensitivity, such as options to mute automatically playing sounds. WCAG 2.2 also updates some criteria from WCAG 2.0 to account for new technologies and trends.

Compliance levels

WCAG 2.2 introduces three levels of compliance: A, AA, and AAA. These levels indicate the extent to which a website meets the success criteria of WCAG.

Other changes

  • New techniques – WCAG 2.2 includes new techniques that assist in meeting the success criteria.
  • Enhanced documentation – the documentation for WCAG 2.2 has been improved to provide clearer guidance.

Adapting a website to WCAG 2.2 will ensure it’s accessible to a broader audience, including individuals with disabilities.

Optimization activities to perform on your page, all in line with WCAG 2.2

Below, we’ll discuss five key aspects to enhance your website, making it more accessible for individuals with disabilities, especially those who are blind or visually impaired. Each aspect includes several elements that play a vital role in achieving optimal accessibility.

Clear code understandable for browsers

It turns out that maintaining clear and correct source code is essential not only for search engine crawlers but also for assistive technologies used by individuals who are blind, as these technologies read the code in a linear fashion. What elements should you focus on in this context?

Ensure that the order of elements on the page is logical and accurately reflects the sequence as recorded in the code.

Above is an example of how to structure a table correctly in the code. A browser designed for individuals who are blind will read the value immediately after the label. In a flawed version, the code would describe the label column first, followed by the values, while the visual layout would be adjusted using CSS.

Additionally, it’s essential to build the website so that users can navigate it using only the keyboard. This requires that all links be functional without the need for a mouse. Each <a> tag must include an href attribute, which is often overlooked when onclick events are used for links. To ensure the site is accessible, it’s important to present the links in the following way:

oneclick correct

Instead of:

oneclick incorrect

You can find an example of the correct way to structure a table in the code above. A browser designed for individuals who are blind will read the value right after the label. In an incorrect version, the code would first describe the label column, followed by the values, while the visual layout would be altered using CSS.

Correct website structure

A well-structured website includes elements like a title, meta description, H1 header, H2 and H3 headers, and semantic text formatting – these elements are well-known to SEO specialists and are regularly optimized.

  • The page title is the first thing read by browsers for blind users, just like it is for Google bots. It should clearly convey what the page is about, its purpose, and the intended audience. This title will also appear when users save the page for offline reading.
  • To meet the needs of users with disabilities, headers should help clarify the hierarchy of the page and should never be used randomly for decorative purposes. To change text size, you should always use CSS, not varying header tags.
  • <strong> tags are useful for highlighting keywords, but overusing them can be problematic. Google may see excessive use as a form of manipulation, and it can also interfere with how screen readers interpret the content. Additionally, they shouldn’t wrap text that’s already within a header.
  • For better readability, it’s important to avoid overusing <span> tags and to minimize excessive localized text formatting.

Clear page layout

A readable layout is crucial for ensuring a positive user experience, especially for individuals with visual impairments.

To help users with disabilities navigate the site effectively, ensure it features a clear, organized menu with a well-defined category structure. Although using ALL CAPS might seem like a good way to make category names stand out, it actually doesn’t improve visibility. Words formatted like sentences are read faster because they have more distinguishing elements. For this reason, it’s better to avoid all-caps in the menu. Also, ensure there’s enough spacing between menu items, a strong contrast between the text and background, and a balanced font weight – not too light, but not too heavy.

  • The font used on the website should be easy to read and it should include all the characters used in the respective language. Choosing a font for web design is a broad topic that can’t be fully covered here, but the basic criteria for a good web font include: it should be sans-serif, have low contrast (where the thickness of the letters is fairly uniform), and a large x-height. Examples of such readable fonts include Lato, Roboto, and Arial. Below is an example of Roboto, a very web-friendly font.
  • It’s best not to go overboard with the color variety on the site. However, it’s important to ensure there is a strong contrast between applied shades, while also avoiding combinations that may be problematic for those with color blindness. For instance, they might confuse red with green or blue with black.

spectrum 1

The rainbow spectrum as seen by someone who confuses red with green (suffering from color blindness).

spectrum 2

The rainbow spectrum as seen by someone who confuses green with red.

spectrum 3

The rainbow spectrum as seen by someone who cannot distinguish blue.

  • To make it easier for users with screen readers to navigate forms, it’s important to clearly label error messages. These messages should appear before the input field so that users can hear them first and then correct any mistakes they made.

Intuitive website navigation

You can make it easier for users to navigate your site by keeping a few key points in mind:

  • For individuals with visual impairments, helpful elements include a site map, an internal search bar, and links to related subpages. Thoughtfully planned internal linking not only boosts your site’s SEO but also enhances overall navigation.
  • Breadcrumbs are another useful feature, as they show users the path they took to reach a particular subpage. We’ve discussed breadcrumbs in detail on our blog, so be sure to check the article out.
  • Make sure that graphical elements with similar functions – like arrows and expandable descriptions – have a consistent design and aren’t used for different purposes. This helps users know exactly what to expect when they click on an icon.

Appropriate alternative descriptions

When optimizing web pages, we often focus on keyword-rich alt attributes to improve search engine visibility. However, for individuals with visual impairments, alternative descriptions are crucial for understanding the content of images. It’s important to remember that these descriptions should include not only keywords but also relevant context and details about the image.

Alternative website versions

Of course, it’s not always possible to meet all the graphic requirements mentioned above. In such cases, it’s helpful to offer buttons on the page that let users customize the design to their needs, e.g., adjust font size or contrast (e.g., black-and-white or black-and-yellow).

classic version of site

black and yellow version of site

Two versions of the http://www.gupkrakow.pl website.

Websites for people with disabilities – how to check if your site is accessible enough?

You can check your website’s accessibility in several ways:

  • Consult a specialist – a professional can analyze the site using a WCAG checklist.
  • With help of a diverse group of users with disabilities.
  • Using automated validators, such as validator.w3.org or wave.webaim.org.

Making websites accessible for people with disabilities – a quick recap

Many of the optimizations that improve a website’s accessibility for individuals with disabilities also enhance its overall search engine performance. Key areas to focus on include clean code, a well-structured site hierarchy, clear layout, and intuitive navigation. By refining these aspects, you’ll not only make your site more accessible for blind and visually impaired users but also improve its visibility in general.

If you’re still wondering how to make your website accessible to everyone, contact us – we’ll be more than happy to help!

Author
Ola Drewniak SEO Content Team
Author
Ola Drewniak

Content Specialist

An editor by profession. She has been working in marketing for the past 5 years — first in the social media teams of Krakow publishing houses, then in SEO and copywriting, until she finally decided to excel in content marketing and combine her organizational skills with her extraordinary linguistic sense of style. She works on content projects at Delante, conducting content audits, arranging content plans, and creating content for the most demanding clients. Privately, a cat behaviorist, future dog trainer, and a lover of tattoos and RPG games.

Author
Marta Grybel - SEO Team
Author
Marta Grybel

Junior SEO Specialist

Author
Ola Drewniak SEO Content Team
Author
Ola Drewniak

Content Specialist

An editor by profession. She has been working in marketing for the past 5 years — first in the social media teams of Krakow publishing houses, then in SEO and copywriting, until she finally decided to excel in content marketing and combine her organizational skills with her extraordinary linguistic sense of style. She works on content projects at Delante, conducting content audits, arranging content plans, and creating content for the most demanding clients. Privately, a cat behaviorist, future dog trainer, and a lover of tattoos and RPG games.

Author
Marta Grybel - SEO Team
Author
Marta Grybel

Junior SEO Specialist

SEO SEM Agency

Get a
Free Quote

Awards

Award - Deloitte 2021 Award - European eCommerce Awards 2022 Award - European Search Awards 2022 Award - Global Agency Awards 2022 Award - IPMA Award - US Search Awards 2021