Web Accessibility: The Internet accessible to everyone

In today’s digital age, ensuring that your website is accessible to all users, regardless of their abilities, is no longer just a best practice – it’s a must. Accessibility involves creating digital experiences that are accessible to everyone, including people with various disabilities.

This article will highlight:

• the importance of web accessibility,
• common pitfalls,
• and best practices, along with examples and code snippets that will help make your website more accessible.

Why is web accessibility important?

Meeting legal requirements is a key obligation for companies operating in many countries where regulations such as the ADA in the United States or the Equality Act in the United Kingdom mandate the necessity of ensuring digital accessibility.

Companies expand their target audience by creating websites accessible to a wide range of users, including people with disabilities. Additionally, search engines prefer websites focused on providing an excellent user experience, which translates to SEO benefits. Finally, ensuring equal opportunities for all users is a sign of respect for every individual.

What should you focus on?

All content and user interface elements should be presented in a way that is visible to users and screen readers. The interface must also be easy to operate and navigate without causing difficulties. It is also important that users can easily understand the content and how the website is used.

Best practices

Semantic HTML

Focus on using HTML elements that specify their purpose and content type. This helps search engines and browsers understand your website’s structure, and it supports assistive technologies in conveying this information to users. It also brings additional benefits, such as improved SEO by clearly defining the document structure and enhancing code readability for developers.

Example:

• Use <article> for content that can stand alone.
• Use <aside> for side content.
• Use <header> for the header of a section or page.

<header>
    <h1>Welcome to Our Blog</h1>
</header>
<article>
    <h2>Latest Post</h2>
    <p>This is the main content of the blog post...</p>
</article>
<aside>
    <h4>Most viewed posts</h4>
</aside>
<footer>
    <p>&copy; 2025 Blog Name</p>
</footer>

Alt attribute

Text alternatives are crucial for users who rely on screen readers. Every non-text element, such as an image or video, should have a text equivalent that conveys the same information as the visual content. This ensures content accessibility for visually impaired users and helps search engines index the content of images.

Example:

• For images – use the alt attribute to describe the image content.
• For complex images, such as charts, provide a description elsewhere in the text or as a figcaption.

<img src="chart.png" alt="Sales data from January to June 2024">
<figcaption>Fig. 1 - Bar chart showing sales data from January to June 2024</figcaption>

Keyboard accessibility

Keyboard accessibility ensures that users who cannot use a mouse can still navigate the website. This includes users with motor disabilities and more advanced users who conveniently navigate using the keyboard. It enhances usability for a wide range of users.

Example:

• Ensure all actions can be performed using keyboard keys (e.g., Tab, Enter).
• Use tabindex=”0″ to include elements in the natural tab order.

<button tabindex="0">Click me</button>

ARIA attributes

ARIA attributes enable developers to enhance accessibility for screen readers, especially for interactive elements that HTML does not natively recognize.

Example:

• Use role=”alert” to ensure that screen readers announce notifications.

<div role="alert" aria-live="assertive">Changes have been saved!</div>

You will find more examples of using ARIA later in this article.

Color Contrast

Proper color contrast is essential for ensuring text readability. Poor contrast or inappropriate use of colors can significantly impact users with color blindness, low vision, or color sensitivity. Additionally, it improves readability for all users, especially on mobile devices and in various lighting conditions.

Example:

• Use tools like the Contrast Checker from WebAIM to verify adequate contrast.

.content {
    color: #333; /* dark text */
    background-color: #fff; /* bright background */
}

Form elements

Form elements without labels are problematic for users relying on screen readers. Proper labeling of these elements is essential for usability and accessibility.

This ensures that users understand what information is required and helps prevent errors, reducing the number of mistakes when submitting forms.

Example:

• Use <label> elements clearly associated with form controls using the for attribute.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Responsywny design

Responsive design ensures that the website is usable and accessible across various devices and screen sizes, maintaining functionality and readability.

Example:

• Use relative units and media queries to allow the design to adapt to different screen sizes.

body {
    font-size: 1em; /* text scaling */
}
@media (max-width: 768px) {
    .navbar {
        display: none; /* alternative menu */
    }
}

More about ARIA attributes (Accessible Rich Internet Applications)

ARIA attributes can be divided into several categories, providing a wide range of functionalities. Here are some of their key roles and properties:

ARIA roles

ARIA roles define the type of an element, helping assistive technologies determine its purpose on the page.

• button – used when an element functions as a button but is not a default <button> element.

<div role="button" tabindex="0" aria-pressed="false">Toggle</div>

• alert – indicates a region containing important content changes (e.g., success or failure messages for form submissions).

<div role="alert">Changes have been saved!</div>

• navigation – used to denote a set of navigational links.

<nav role="navigation">
    <ul>
        <li><a href="#home">Home page</a></li>
        <li><a href="#about">About us</a></li>
    </ul>
</nav>

ARIA properties

They are used to communicate dynamic state changes (e.g., expanded/collapsed) or to provide additional information about elements.

• aria-hidden – used to hide elements from assistive technologies without removing them visually.

<div aria-hidden="true">This content is hidden from screen readers.</div>

• aria-expanded – indicates the expanded state of an element, such as a dropdown menu or accordion.

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
    <li><a href="#link1">Link 1</a></li>
</ul>

• aria-label – provides an accessible name for elements without textual content, like icons.

<button aria-label="close">X</button>

• aria-labelledby – similar to aria-label, but it references another element to use its content as the label.

<span id="desc">Password must be at least 8 characters</span>
<input type="text" aria-labelledby="desc">

• aria-live – describes dynamic content updates. It can be set to polite, assertive, or off.
  • off – updates are not announced to assistive technologies. This is the default setting.
  • polite – updates to assistive technologies are announced at the next graceful opportunity, allowing the user to complete their current task.
  • assertive – updates to assistive technologies are announced immediately, interrupting the user’s current task if necessary.

<div aria-live="polite">Loading content...</div>

ARIA best practices

When using ARIA, remember:

1. ARIA should enhance, not replace, native HTML elements. Therefore, always use semantic HTML elements first, and use ARIA attributes only when those elements are insufficient – use ARIA only when necessary.
2. Overloading elements with ARIA attributes can lead to ambiguity and unpredictable behavior in assistive technologies. Minimize the use of ARIA.
3. Frequent testing of ARIA implementations with screen readers ensures that they provide the intended accessibility enhancements – regularly test with screen readers.

Summary

Implementing the above practices will significantly improve the accessibility and usability of your websites, creating a more user-friendly environment. Accessibility should be an integral and key part of the development process from the very beginning, not an afterthought.

Every step towards accessibility not only broadens the reach of your content but also upholds the industry’s ethical standards in supporting all users.

***

If the topic of accessibility is close to your heart, also take a look at our other articles 😊