Accessibility

Introduction

In today’s increasingly digital world, making sure websites are accessible to everyone, including those with disabilities, is not just a legal obligation, but a moral one too. In this lesson we will take a closer look at catering for all of our potential users.

Importance of Accessibility

Web accessibility isn’t just about complying with legal standards; it’s about providing an equal opportunity for all users to access information and services online. Failure to create accessible websites can limit our audience, impact our SEO negatively, and even result in legal consequences. In Norway, websites must meet WCAG 2.1 AA standards to be considered accessible.

Assistive Technologies

Assistive technologies serve as a bridge between users with disabilities and web content, enhancing accessibility and usability. By understanding how these technologies function, developers can more effectively design and build inclusive web applications. It is easy to forget about these technologies if you don’t use them yourself, but they are essential for many people, including your teachers.

Screen Readers

Screen readers are software applications that convert digital text into synthesised speech, enabling visually impaired users to hear, rather than read, the content. They navigate the DOM and rely heavily on semantic HTML and ARIA roles, states, and properties to describe the page effectively. We will cover these in the lesson content below.

Magnifiers

Screen magnifiers enlarge portions of the interface, helping users with low vision to better see text, images, and other elements. Some screen magnifiers can also invert colours or apply custom contrast settings for improved readability.

Textual Alternatives

Providing textual alternatives for non-text content is fundamental in ensuring that our websites are accessible to a broad range of users. Textual alternatives allow those who can’t see or hear the content to understand what is being presented. This is vital not only for accessibility but also for improving our SEO profile.

alt Attributes for Images

Using the alt attribute in our <img> tags is crucial for providing a textual description of the image, which can be read by screen readers.

	<img src="logo.png" alt="Noroff Logo">

Alt text should be descriptive enough to convey the image’s meaning but not so long that it becomes distracting. Try closing your eyes, and think of a phrase that would describe the image to someone who can’t see it:

	<img src="horse_123.png" alt="An Arabian stallion riding on a beach">

If the image is purely decorative and doesn’t convey any additional information, you should still include an empty alt attribute like so:

	<img src="decorative.jpg" alt="">

Captioning and Subtitles for Multimedia

To make audio and video content accessible, we can include captions and subtitles. Captions not only assist the deaf and hard-of-hearing community but are also beneficial for understanding spoken content in noisy environments or when the audio is off. Subtitles in different languages can additionally make the content accessible to a broader audience.

We can include captions in a <video> tag by including a <track> element inside the <video> tag like so:

	<video controls>
	  <source src="video.mp4" type="video/mp4" />
	  <track
	    src="captions.vtt"
	    kind="captions"
	    srclang="en"
	    label="English"
	    default
	  />
	</video>

Check out OpenAI’s open-source whisper model for a free tool for generating subtitle files.

Keyboard Navigation

Making your website navigable via keyboard is essential for a variety of users including those who cannot use a mouse, have motor disabilities, or simply prefer using the keyboard. Failing to consider keyboard navigation can severely limit the accessibility of your website.

Although a mouse is a common part of how most people use a computer, extended use of a mouse can cause damage to the wrist and hand due to pronation and supination. In some cases, this can lead to conditions such as repetitive strain injury (RSI) and carpal tunnel syndrome (CTS) that may disable a user from using their mouse.

tabindex Attribute

The tabindex attribute allows us to control which elements can be focused and in what order. Setting tabindex="0" makes an element focusable in the natural tab order, while a negative value like tabindex="-1" makes an element focusable but not reachable by sequential keyboard navigation.

In order to test a website for keyboard accessibility, disconnect your mouse and attempt to navigate your site using only the tab, shift, and enter keys. If you find that you can’t access certain elements, you may need to add tabindex attributes to those elements.

Let’s look at an example of how we can use the tabindex attribute to make a <div> element focusable:

	<div tabindex="0">Focusable div</div>

Press tab a few times on your keyboard to see this element become focused. Now try shift + tab to move backwards through the elements.

Role of Buttons and Links

Buttons and links have distinct roles in web design and should not be used interchangeably. A button’s primary role is to trigger an action on the same page, whereas a link navigates to a different page or section. Using semantic HTML tags like <button> and <a> ensures that these elements are accessible and their roles are clear to both users and assistive technologies.

Focus Management

Proper focus management is vital for making your website navigable via keyboard. It helps in guiding the user seamlessly through the interactive elements on your page. Understanding and correctly implementing focus styles can greatly enhance the user experience.

:focus pseudo-class

The :focus pseudo-class in CSS is used for styling an element when it gains focus. This is especially useful for providing a custom focus indicator that aligns with your website’s design while still maintaining accessibility. For example, you could change the background colour or add a border to the focused element. See below for an example.

outline Property

The CSS outline property sets a visible border around an element when it gains focus. This is for indicating which element is currently selected when navigating via keyboard. While some people opt to remove the outline for aesthetic reasons, it’s very important to replace it with another visible focus indicator.

	:focus, .force-focus {
	  outline: 2px solid #000;
	}

	<button>Button</button>
	<button class="force-focus">Button</button>

ARIA (Accessible Rich Internet Applications)

ARIA stands for Accessible Rich Internet Applications and is a set of attributes that help make web applications more accessible. It is especially useful for dynamic content and advanced user interface components where HTML’s native semantics are insufficient to describe the page to a non-visual user.

Basic ARIA Attribute

aria-label

The aria-label attribute allows us to define a string that labels the current element. It is particularly useful for elements that do not have a visible text description, such as icons and form fields.

Lets’ view some examples:

	<button aria-label="Close">X</button>
	<button aria-label="Add to cart">🛒</button>
	<input type="search" aria-label="Search" />

In each of these cases, the aria-label attribute provides a textual description of the element that can be read by screen readers.

aria-labelledby

The aria-labelledby attribute allows us to specify the ID of another element that serves as the label for the current element. This is useful when a visible label is already present but not programmatically associated with the element.

Let’s look at an example:

	<fieldset id="meal-preference">
	  <legend id="meal-label">Meal Preferences</legend>
	  <div>
	    <input type="checkbox" id="vegetarian" aria-labelledby="meal-label vegetarian-label">
	    <label id="vegetarian-label" for="vegetarian">Vegetarian</label>
	  </div>
	  <div>
	    <input type="checkbox" id="vegan" aria-labelledby="meal-label vegan-label">
	    <label id="vegan-label" for="vegan">Vegan</label>
	  </div>
	  <div>
	    <input type="checkbox" id="gluten-free" aria-labelledby="meal-label gluten-free-label">
	    <label id="gluten-free-label" for="gluten-free">Gluten-Free</label>
	  </div>
	</fieldset>

In this example, we use the aria-labelledby attribute to associate the <legend> element with the checkboxes. This allows screen readers to read the label and the legend together when the checkbox is focused. For example, a screen reader might read “Meal Preferences, Vegetarian, not checked”.

aria-describedby

The aria-describedby attribute is used to indicate the IDs of the elements that describe the subject element. This can be beneficial for providing additional contextual or clarifying information. For example, we might use it to link a form field with a description or an error message:

	<form id="registration-form">
	  <div id="username-field">
	    <label id="username-label" for="username">Username:</label>
	    <input type="text" id="username" aria-describedby="username-hint">
	    <small id="username-hint">Must be at least 8 characters long, containing both letters and numbers.</small>
	  </div>
	</form>

In this case, the aria-describedby attribute links the <input> element with the <small> element, which provides additional information about the field. A screen reader might announce “Username, edit text, must be at least 8 characters long, containing both letters and numbers”.

This provides a much better experience for non-visual users than simply placing the hint text inside the <input> element, which would result in the screen reader reading the entire hint text every time the field is focused.

Roles

ARIA roles are used to convey the purpose of an element, providing a semantic meaning where native HTML falls short. For example, if you have a clickable div, adding role="button" tells assistive technologies to treat it as a button. Generally speaking, we should stick to using the correct semantic HTML elements where possible, but ARIA roles can be useful for adding additional context to elements.

Let’s take a look at an example:

	<div role="menu" id="dropdown-menu">
	  <div role="button" id="menu-button" aria-haspopup="true" aria-controls="menu-list">Menu</div>
	  <ul role="menu" id="menu-list" aria-labelledby="menu-button">
	    <li role="menuitem">Item 1</li>
	    <li role="menuitem">Item 2</li>
	    <li role="menuitem">Item 3</li>
	  </ul>
	</div>

In this example, we use the role attribute to indicate that the <div> element is a menu. We also use the role attribute to indicate that the <ul> element is a menu list and the <li> elements are menu items. This provides additional context to assistive technologies and allows them to navigate the menu more effectively.

States and Properties

ARIA states and properties provide extra information about an element’s current condition and functionality. For example, a toggle button could use aria-pressed="true" or aria-pressed="false" to indicate its current state.

Let’s look at an example:

	<button aria-pressed="false">Toggle</button>
	<button aria-pressed="true">Toggle</button>

There are a number of ARIA states and properties that can be used to provide additional information about an element. For a full list, see the ARIA States and Properties documentation.

Accessibility Testing

Testing for accessibility is a crucial aspect of web development. It involves evaluating your website or application to ensure it is accessible to as many people as possible, including those with disabilities. Effective testing often requires a combination of manual and automated methods.

Manual Testing

Manual testing involves manually interacting with the website to identify accessibility issues. This can involve navigating your site with just the keyboard, simulating low vision conditions, or using screen readers to navigate the website. Some popular manual techniques include:

• Keyboard-only navigation
• High-contrast mode testing
• Screen reader testing
• Color blindness simulation

With the exception of color blindness simulation, you should be able to perform these tests yourself using built in software. In order to test for color blindness, you can use a tool like Color Oracle to simulate different types of color blindness.

Automated Testing Tools

Automated testing tools offer a quick method to scan our projects for accessibility issues. These tools are not a substitute for manual testing but do provide a rapid and effective way to pinpoint potential issues for further examination.

• Axe - This tool is highly flexible, working as a browser extension or integrated into your development workflow.
• WAVE (Web Accessibility Evaluation Tool) - Developed by WebAIM, it’s another reputable browser extension for accessibility evaluation.
• Lighthouse by Google - Part of Google Chrome’s built-in DevTools, Lighthouse provides an accessibility audit among other performance metrics.

By utilising these tools in combination with manual testing, you can significantly improve the accessibility of your web applications.