
7 minute read
Written by
Leading technical projects from start to finish. Ensuring that the final product is fully responsive and compatible with modern browser standards.
Many of us enjoy the convenience of accessing our favorite websites like Amazon, Netflix, or social media without a second thought. But imagine not having the freedom to browse any site you choose, or visiting one only to experience the frustration of it not functioning as expected.
This is the reality for users who rely on screen reading technology.
Providing good keyboard support
Imagine not having access to a mouse and relying solely on your keyboard to navigate a website. This is the reality for users with physical or motor disabilities. As developers, it’s crucial to ensure that the functionality we build provides an equal and seamless experience for keyboard users, just as it does for those using a mouse.
Are you testing whether users can navigate your website without a mouse? For example, some navigation menus only appear when the mouse hovers over them. This can be incredibly frustrating for keyboard users, as they are unable to access important parts of the site.
The primary way keyboard users navigate a website is with the Tab key, which moves forward through interactive elements. To go back, they use Shift + Tab. The Enter key activates the currently focused link or button, taking the user to the associated page. The Spacebar can also activate links and buttons, but it’s primarily used to check and uncheck form elements, such as checkboxes.
You can view the full list of keyboard accessibility guidelines here. Ensuring these features are implemented in your UI components, such as modal boxes, galleries, and carousels, will make your website accessible to everyone.
Using a screen reader
While good keyboard support allows users to navigate through a site, it’s the screen reader that truly brings the experience to life. Let’s dive into how a screen reader interacts with a website
State changes
A great example of this is the classic burger menu. As developers, we need to include a special tag called an aria-label to inform users that the button opens or closes a navigation menu. Without it, screen readers will only interpret the HTML structure of the lines, leaving users unaware of its purpose.
Converting digital text into synthesised speech
Screen readers pick up text on a webpage and read it aloud in a human voice. However, as developers, we need to be mindful of the steps we must take to ensure these tools can perform this effectively.
The software navigates the page based on the structure and order of headings set by the developer. It organizes the content into a logical list that users can tab through (as shown below).
This allows users to efficiently navigate the site, section by section, without having to listen to the entire page each time they need specific information.
This is why using the correct heading tags is essential. The image below illustrates how heading tags should be properly structured
We use a single <h1> tag per page to define the main content or purpose of the page. Subsequent headings, such as <h2> and <h3>, are used to organise the content into sections and subsections. Screen readers rely on <h2> headings to navigate through an article, making it crucial to use them correctly and consistently. A common mistake in development is using <div> elements instead of proper heading tags. This practice can cause accessibility issues, as screen readers cannot interpret <div> elements as headings.
Image accessibility
Unfortunately, this is the reality for visually impaired users, who are valuable members of your website’s audience. To support them, we use a tag called aria-label. This tag provides a descriptive label for images, such as “Autumnal tree in the British countryside,” ensuring the content is accessible and meaningful.
For some users, images may be turned off, so pairing them with caption descriptions ensures the content remains accessible. In the code example below, the image is paired with a caption using a <p> tag. Assigning the same id to both the <img> and <p> elements ensures that screen readers always associate the caption with the corresponding image.
Conclusion
Building an accessible website is not just a technical responsibility. It’s a commitment to inclusivity. At Nzime, accessibility is a key part of our web practices, and we strive to create digital experiences that are inclusive, user-friendly, and accessible to everyone, including those with physical, visual, or cognitive disabilities.
By implementing proper keyboard support, ensuring compatibility with screen readers, and using semantic HTML elements, we make websites easier to navigate and more welcoming.
From using correct heading structures to providing descriptive aria-labels for images and interactive elements, every step we take ensures that our work meets the highest standards of accessibility.
We believe accessibility is not just a feature, it’s a fundamental aspect of good design and development. By prioritising it, we create digital solutions that empower all users and create a more inclusive online experience.