An introduction to Web Accessibility

Motivation

In Europe, the Web Accessibility Directive requires all public sector websites and mobile apps to meet WCAG 2.1 AA by September 23, 2020. The directive applies to public sector bodies in all European Union (EU) member states, and the deadline for compliance was September 23, 2020. But it is also relevant for most private organizations, even it it is not legally required yet. Howerver, as of June 28, 2025 the European Accessibility Act will require accessibility also for certain websites run by private organizations. ^{1 2 3}

With this blog post, you learn why and how to make your web application compliant.

The WCAG 2.1 AA criteria include guidelines for making web content perceivable, operable, understandable, and robust for users with disabilities. This includes providing alternative text for images, using descriptive links, and ensuring that text is easy to read with sufficient contrast, among other things.

By complying with the Web Accessibility Directive, websites, and mobile apps in Europe are ensuring that people with disabilities have equal access to information and services provided by the government. It is worth noting that while the directive only applies to public sector websites and mobile apps, it is encouraged for all websites and mobile apps to be designed with accessibility in mind. This can benefit not only people with disabilities but also anyone who may face challenges in accessing digital content.

In addition to its legal and ethical implications, web accessibility can also benefit SEO. By making websites more accessible, they become easier to navigate and use, which can result in a better user experience and increased engagement. This can lead to higher search engine rankings and more traffic to the website.

In conclusion, web accessibility is an essential aspect of web design that ensures that everyone, including people with disabilities, can access and use websites on the internet. By designing websites with accessibility in mind, we can create a more inclusive and equitable online environment that not only benefits people with disabilities but also improves SEO and user experience.

Quantifying the demand

While it is simply the law for the public sector to comply with accessibility, it is paramount to know how a private business is impacted by not being accessible enough.

Unfortunately, it is not reliably possible to measure the use of screen-readers or most other assistive technology that might be used.

This is because some assistive technologies interact with web content on the operating system level so that analytics tools like Google Analytics won’t notice the usage. Good examples are the iOS or macOS functions like VoiceOver or Zoom.

With that in mind, it is still possible to retrieve valuable information out of usage behavior such as keyboard-only usage or activating a high contrast mode that the website may provide.

As an example: to track those activities, you can create custom events in Google Analytics. Here’s an example of how you can create a custom event to track keyboard usage:

// Track keyboard usage with Google Analytics
document.addEventListener('keydown', function(event) {
  if (event.keyCode === 9) { // Tab key
    ga('send', 'event', 'Keyboard', 'Tab');
  } 
});

This code listens for the keydown event and checks if the pressed key is the Tab key. If it is, it sends a custom event to Google Analytics with the category Keyboard and the action Tab.

As we will learn later in this article, keyboard accessibility is not easy to implement so it is a good idea to have some data to justify the budget to eliminate the barrier for those people affected.

You can modify this code to track other events that might indicate the need for assistive technology, for example activation of accessibility features of the website that are already implemented.

For more information on tracking events with Google Analytics, see the Google Analytics documentation.

In addition to gathering usage data, it is also helpful to consider other sources like the number of people that are using assistive technologies. According to the World Health Organization (WHO), about 2.5 Billion people worldwide need assistive technologies.⁴

This number includes all forms of disability, but when you think about it, every form of disability can cause at least inconveniences accessing websites. For example, while using a cane or a walker, the person would only be able to use one hand or the voice for interacting with a mobile browser.

According to the CDC, 27% of the adults in the United States have some disability.

• 12.8% have cognitive issues, which means they have problems concentrating, remembering, or making decisions.
• 6.1% Have deafness or serious difficulty hearing
• 4.8% Are suffering from blindness or serious difficulty seeing.

Among the 12.1% of people with mobility issues are assumably users that have difficulties using a mouse or a touchscreen and would either need to use a keyboard or their voice.⁵

Besides people with disabilities, screen readers are also used by people with low literacy levels, non-native speakers, and people who prefer to listen to content instead of reading. Roughly 12 percent of screen-reader users don’t have a disability.⁶

Some more statistics:

• https://www.who.int/news-room/fact-sheets/detail/deafness-and-hearing-loss
• https://monsido.com/blog/accessibility-statistics

Screen-readers

Screen readers are assistive technologies that read aloud the content of a webpage for visually impaired users. To optimize a website for screen readers, it is essential to ensure all content is accessible through keyboard navigation, with clear and concise labels for links and buttons. It is also important to provide alternative text for images, as well as headings and landmarks, to help users navigate the page’s structure. Additionally, it is vital to ensure that the website is designed with high contrast and clear typography to make it easier for users with low vision to read. Overall, designing for screen readers is an essential aspect of web accessibility that can greatly improve the experience of visually impaired users.

The below table lists some popular screen reader applications and the platforms they are available on, as well as some of their pros and cons

Semantic Webdesign

Semantic web design is an approach to web design that focuses on creating structured, meaningful content that humans and machines can easily understand. It involves using HTML markup and other technologies to provide context and meaning to web content. By doing so, websites can become more accessible to people with disabilities, as well as more easily understood by search engines and other web technologies. The goal of semantic web design is to create a more inclusive and efficient web by making content more structured and meaningful.

Examples

<h3>News</h3>
<div>
    <div>
        <h4>Breaking News</h4>
        <p>New York City has declared a state of emergency due to a severe winter storm.</p>
    </div>
    <div>
        <h4>Local News</h4>
        <p>The city council has approved a new housing development in the downtown area.</p>
    </div>
</div>

<section aria-labelledby="news-heading">
    <h3 id="news-heading">News</h3>
    <article>
        <h4>Breaking News</h4>
        <p>New York City has declared a state of emergency due to a severe winter storm.</p>
    </article>
    <article>
        <h4>Local News</h4>
        <p>The city council has approved a new housing development in the downtown area.</p>
    </article>
</section>

The improved markup uses semantic elements to structure the content. The news section is wrapped in a section element, and each news article is wrapped in an “article” element. Each “article” has its heading and content, making it more accessible to users with disabilities and search engines. Additionally, the section has a heading that describes the content of the “section”, making it easier to understand and navigate. By using semantic elements, the content becomes more structured and meaningful, making it easier for both humans and machines to understand.

Keyboard Accessibility

Adding keyboard accessibility to a website can present several technical challenges. For example, keyboard-only users need a way to navigate through the website and interact with different elements using only the keyboard. This requires the website to have a logical and intuitive tab order and for all interactive elements to be keyboard focusable and have appropriate keyboard events. Additionally, keyboard-only users may need to skip over non-interactive elements, such as decorative images and headings, to get to the main content of a webpage. This can be achieved using techniques such as skip links and ARIA landmarks. Finally, websites must ensure that keyboard focus is always visible so users can easily see which element is currently focused. Overall, adding keyboard accessibility to a website requires careful planning and attention to detail to ensure all users, including keyboard-only users, can access and use the website effectively.

In most cases, it is required to write some JavaScript to make content keyboard accessible that would only be accessible by hovering over with the mouse. It is also vital to ensure a proper tab order or provide the possibility to navigate via arrow keys.

The following section introduces a good resource for patterns to implement good accessibility.

ARIA Authoring Practices Guide (APG)

The ARIA Authoring Practices Guide (APG) is a resource for developers to learn how to make web content more accessible using ARIA. It provides guidance on how to use ARIA to improve the accessibility of web content for users with disabilities, focusing on helping developers understand when and how to use ARIA roles, states, and properties. The guide provides code examples and best practices for using ARIA in different contexts, such as forms, menus, and widgets. The APG is a valuable resource for developers who are looking to improve the accessibility of their web content and create a more inclusive online environment.

For more information, visit: https://www.w3.org/WAI/ARIA/apg/

The following code pen gives an example of how to implement a website navigation with keyboard accessibility in mind: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/

Cognitive Accessibility

Cognitive accessibility is an essential aspect that ensures that people with cognitive disabilities, such as attention deficit disorder (ADD) or dyslexia, can access and use websites online. The following guidelines can help in designing and implementing a website that is more accessible to people with cognitive disabilities:

Keep it simple

Simplicity is key to making a website more accessible to people with cognitive disabilities. This means keeping the design and layout of the website as simple as possible. Avoid using too many colors, patterns, or graphics, as they can be distracting and overwhelming. Use a clear and easy-to-read font, with sufficient contrast between the text and the background.

Use clear language

Using clear and simple language is essential for making a website more accessible to people with cognitive disabilities. Avoid using technical jargon or complex vocabulary, and use short sentences and paragraphs whenever possible. Use simple and descriptive headings and subheadings to help users navigate the content.

Provide clear and concise instructions

Providing clear and concise instructions is essential for making a website more accessible to people with cognitive disabilities. Use simple language and provide step-by-step instructions whenever possible. Use pictures or diagrams to illustrate complex concepts or workflows, and avoid using long and complicated forms.

Use familiar interface patterns

Using familiar interface patterns is essential for making a website more accessible to people with cognitive disabilities. Use common navigation patterns, such as menus and breadcrumbs, to help users navigate the website. Use consistent and predictable user interface elements, such as buttons and links, to help users understand how to interact with the website.

Provide feedback and guidance

Providing feedback and guidance is essential for making a website more accessible to people with cognitive disabilities. Use clear and concise error messages to help users understand when they have made a mistake. Provide feedback when an action is completed, such as submitting a form, to help users understand that they have accomplished their goal.

By following these guidelines, we can create a more inclusive and equitable online environment that benefits not only people with cognitive disabilities but also improves SEO and user experience.

Guidance from the W3C

Designing websites and creating content for cognitive accessibility is a complex demanding task, fortunately the W3C provides guidance on that matter:

https://www.w3.org/WAI/WCAG2/supplemental/#cognitiveaccessibilityguidance

Project-management and Architectural concerns

While reading this article, especially the sections about Semantic Webdesign and Keyboard Accessibility, the reader might ask how designing and implementing accessibility has to be integrated into good project management and good software architecture.

Especially ensuring a good semantic HTML requires attention right from the beginning and throughout the user interface design phase. It is paramount to implement enough feedback cycles and ensure sufficient enablement of the Web Designer, so that the Markup fulfills the requirement before it goes into further implementation phases like implementing templates for a Content Management System (CMS). It is actually best to implement the HTML first without any CSS and JavaScript (unless it is required for Keyboard Accessinility) and ensure accessibility is given. When working on the Corporate Design requirements it is important to frequently verify accessibility and make sure that color schemes are providing enough contrast to ensure that also color blind people will be able to use the website.

To ensure Cognitive Accessibility it is necessary to design a sufficient content model and editorial workflow. Content needs to be compiled in an easy to consume way. For text, tools like Chat-GPT might be a help. In some cases content creators might want to create separate versions, for impaired and for unimpaired consumers.

To leverage the full potential of semantic markup and let the Webbrowser help for providing good accessibility it is wise to render the HTML statically. Static, flat HTML-File-based frontends are superior not only for accessible Web Design. That stands in contrast to frontends querying content via API, through JavaScript like some Single Paga Applications (SPA). Content that does not change often or is not unique to the request or user should be pregenerated.

While current CSS Frameworks provide some accessibility features, it might be helpful to use the APG as a starting point. An overview of the current status of CSS frameworks can be found with the following blog post: https://www.lambdatest.com/blog/best-css-frameworks/

After knowing the UI requirements a sorrow research for a matching CSS framework helps to accelerate the implementation.

Conclusion

Web accessibility is a vital aspect of web design that ensures that everyone, including people with disabilities, can access and use websites on the internet. By designing websites with accessibility in mind, we can create a more inclusive and equitable online environment that not only benefits people with disabilities but also improves SEO and user experience. While it is simply the law for the public sector to comply with accessibility, it is essential for private organizations to consider accessibility as well. This is not only for ethical and legal reasons but also for the benefits it provides to all users. With the Web Accessibility Directive in Europe requiring public sector websites and mobile apps to meet WCAG 2.1 AA, it is time for all websites and mobile apps to be designed with accessibility in mind. It is advised to pay attention on accessibility right from the start of an initial launch, redesign or relaunch. There are not only technical challenges to address but also the enablement of editors or a sufficient content model so that the content is compiled to be understood easily - even for cognitively impared people. Designing websites for accessibility opens the potential to reach a large amount of new customers and make the world more inclusive.