SHORT COURSE

I'm a developer

As a developer, you have the power to break down digital barriers and build experiences that everyone can access and enjoy. Before you can do that confidently, it helps to understand the core principles of accessible development. This short course is designed to give you a practical foundation in those essentials. Whether you're new to accessibility, looking to refresh your knowledge, or wanting to validate what you already know, it'll help you build confidence and identify where to focus next. If you're ready to go beyond the fundamentals with practical, hands-on training for yourself or your team, get in touch—we'd love to help.

PART 1/9

Who is accessibility for?

Let’s start with the most important principle of accessible development: people. Accessibility isn’t just about sight loss or screen readers. Millions of people experience a wide range of disabilities, impairments, and circumstances that can affect how they access and use digital content. This includes people with hearing loss, limited mobility, cognitive differences, colour vision deficiency, temporary injuries, and many others. When digital experiences aren't designed with these users in mind, unnecessary barriers can prevent people from accessing information, completing tasks, or participating fully. By putting people at the centre of every decision, accessibility becomes more than a technical requirement—it becomes a way of creating digital experiences that everyone can access, use, and enjoy.

Question 1/9

A colleague says, 'Accessibility only benefits a small number of people.' Which response is most accurate?

PART 2/9

Image descriptions

Image descriptions help people who are blind or partially sighted understand visual content that they cannot see. They can also benefit all users when images fail to load or are accessed over slow internet connections. A well-written image description communicates the purpose, meaning, and key information of an image, enabling users to understand the content and context the image is intended to convey. In HTML, image descriptions are typically provided using the alt attribute of the <img> element. The text in the alt attribute should describe the image's purpose or the essential information it communicates, rather than simply listing everything visible in the image. If an image is purely decorative and does not convey meaningful information, the alt attribute should be left empty (alt="") so that assistive technologies can ignore it.

Question 2/9

An image has been added to a webpage with alt text: 'A person working on a laptop in a busy café with multiple notifications visible on screen'. When deciding whether this alt text is appropriate, what is the most accurate approach?

PART 3/9

Page structure

The structure of a web page is fundamental to how users—particularly those relying on assistive technologies like screen readers—navigate and comprehend content. A well-organized layout acts as a map, allowing users to efficiently locate the information they need without scanning every line of text. Central to this structure is the proper application of heading levels. Just as sighted users visually skim a page, screen reader users rely on headings to quickly scan for relevance. Presenting headings in a logical, hierarchical order—starting with a single main heading followed by structured subheadings—creates a predictable, intuitive, and accessible flow of information.

Question 3/9

A developer is creating a page about accessible web design. Which approach provides the clearest heading structure for users of assistive technologies?

PART 4/9

Hyperlinks

Links should clearly describe their purpose without relying on surrounding content for context. Some people, particularly screen reader users, navigate a page by moving from link to link rather than reading all of the content in between. If links use vague text such as 'Click here', 'Read more', or 'Learn more', users may not know where the link will take them. Descriptive link text helps everyone understand the destination or action of a link, making websites easier to navigate and use.

Question 4/9

A developer has been instructed to add a 'Read more' link after a short teaser for each article on a page. They are told the visible link text must remain 'Read more' for design consistency. What is the most accessible way to ensure screen reader users understand each link’s purpose?

PART 5/9

Keyboard focus, tab order and traps

Not everyone can use a mouse to operate a computer, so websites must be fully usable with a keyboard alone. It’s important that interactive elements are keyboard-focusable, that focus is clearly visible when moving between them, and that the tab order is logical and meaningful. This is essential for people with physical or motor disabilities, as well as users with conditions such as arthritis or tremors, people using assistive technologies like switch devices or voice input, and those with temporary injuries such as a broken arm.

Question 5/9

A user who relies on keyboard navigation opens a modal dialog on a webpage. They can tab into the modal and interact with the content inside it, but once they reach the last element, pressing Tab again does nothing useful and they are unable to return to the rest of the page or close the modal using the keyboard. What is this an example of?

PART 6/9

Dynamic content (live regions)

Some content on a webpage updates without the page reloading, such as form validation messages, notifications, or "item added to basket" alerts. Users who rely on screen readers may not be aware of these changes unless they are explicitly announced. ARIA live regions (aria-live) allow developers to identify areas of the page where dynamic content may change. When the content within these regions updates, compatible screen readers automatically announce the changes, ensuring users don't miss important information.

Question 6/9

A developer is adding a confirmation message that appears after a user clicks 'Add to basket'. The message is inserted into the page dynamically without reloading it. Which approach ensures screen reader users are notified of the update without unnecessarily interrupting what they are currently hearing?

PART 7/9

Skip to links

Many web pages contain repeated content such as top-level navigation menus, headers, or banners. For users who rely on keyboard navigation or screen readers, having to move through these repeated elements every time a new page loads can be time-consuming and frustrating. A 'skip to content' link allows users to bypass repeated sections and jump directly to the main content of the page.

Question 7/9

A developer has added a 'Skip to main content' link to a webpage to improve keyboard accessibility. Where should the skip link be placed?

PART 8/9

Forms and form fields

Forms are one of the most important parts of many websites, allowing users to sign up, log in, make purchases, and submit information. Because they often involve key actions and personal data, it's essential that forms are fully accessible to everyone. Accessible forms ensure that all users can understand what information is required, complete fields accurately, and receive clear feedback when something goes wrong. One of the most important aspects of an accessible form is ensuring that every form control has a properly associated label. Screen reader users rely on labels to identify the purpose of each input field. Without a correctly associated label, a screen reader may simply announce "edit text" or "checkbox" without any context, making it difficult or impossible for users to know what information is expected.

Question 8/9

A developer is creating a registration form and wants to ensure that screen readers correctly announce each field's purpose. Which approach correctly associates a label with a form input?

PART 9/9

ARIA (Accessible Rich Internet Applications)

HTML provides many built-in accessibility features. Elements such as <button>, <input>, <nav>, and <main> already include semantic meaning that browsers and assistive technologies understand. These elements automatically provide information about their purpose, support keyboard interaction, and expose accessible names where appropriate. ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that adds extra accessibility information to web content. It can define the role of an element, describe its current state or properties, and help assistive technologies understand dynamic interfaces that cannot be created using native HTML alone.

Question 9/9

A developer is creating a custom expandable panel using <div> elements because the design requirements cannot be met with native HTML alone. Which statement best reflects the correct use of ARIA?

Ready to check your score?

You've got this! Correct and incorrect answers will be indicated for each question, so take a moment to go back and check them. Your score and any questions you missed are shown below. If you didn't get top marks, don't worry—you're already a winner for taking the time to give it a go. Every question is an opportunity to learn. If you'd like to build your knowledge further or need more advanced guidance, we'd love to hear from you.

Key takeaways

1

Accessibility benefits everyone, including people with permanent, temporary and situational impairments.
2

Write alt text that describes an image's purpose and meaning, not every visual detail.
3

Use a logical heading hierarchy with a single H1 followed by properly nested headings.
4

Ensure links clearly describe their destination or purpose, even when read out of context.
5

Make every interactive element keyboard accessible with a logical tab order and no keyboard traps.
6

Use ARIA live regions to announce important dynamic content updates to screen reader users.
7

Provide a 'Skip to main content' link as the first focusable element on the page.
8

Associate every form control with a properly linked label so users know what information is required.
9

Prefer native HTML elements and only use ARIA when native HTML cannot provide the required functionality.