Access All Areas: Essential Aspects of Web Accessibility

Keyboard Accessibility

In a nutshell, keyboard accessibility enables users to navigate and explore a website using only their keyboard instead of a mouse. Despite being, according to WebAIM, one of the most important aspects of web accessibility, keyboard accessibility is often overlooked during development. If you’ve ever relied on your keyboard for browsing, you’ve likely felt the frustration of encountering elements you’ve been unable to access due to neglected keyboard accessibility.

Estimating the number of keyboard-only users is challenging, but consider this: as many as 1 in 5 people in the UK have a long-term illness, impairment, or disability, and many more may experience temporary impairments at any given time. This means a significant portion of our visitors could rely on keyboard navigation.

The reasons a person may choose keyboard navigation are varied – often blind or visually-impaired users will use keyboard only, those with motor disabilities may find using a mouse difficult, and for some it may well just be a personal preference. Regardless of the reason, it’s clear that keyboard accessibility is essential and cannot be ignored.

Key aspects

Tim Berners-Lee – widely known for inventing the web and HTML (HyperText Markup Language), its underlying markup language – believes the web should be an open and free place for everyone. That means that it has to work for everyone, whatever their ability.

For keyboard users, this means considering several key areas:

• Logical navigation: When users tab through navigation items, content, and interactive elements on the screen, it’s expected that the tabbing order should follow the visible order of elements to avoid confusion.
• Clear focus indicators: As users navigate using the tab key, they should clearly see which item they are currently engaging with, allowing them to easily track their position on the page.
• Keyboard traps: These occur when a user cannot leave a component using just their keyboard. This often happens with elements like navigation menus or modals, where developers may have created a way to keep users in the component but forgotten to include an easy way to exit. This can be extremely frustrating.
• Keyboard commands: All actions on a website should be able to be performed using keyboard commands, without requiring a mouse or other pointing device. In other words, if a user can interact with an element using touch or a pointer device, the same action should be possible using a keyboard.

People who navigate via a keyboard may do so in conjunction with assistive technologies, such as a screen reader, which leads neatly to our next area for consideration.

Screen Readers

A screen reader is an assistive technology that, by converting text into speech or braille, enables visually impaired or blind users to access and interact with digital content.

While precise statistics on the number of screen reader users are elusive, a 2021 survey by WebAIM revealed that a substantial portion of users with disabilities depend on these tools to access digital content. This underscores the importance of making websites accessible to everyone.

In the UK, over 2 million people live with significant sight loss, according to the NHS. Many of them may rely on the use of a screen reader to navigate the online world. However, it’s not only users with a visual impairment that use screen readers. Many users with cognitive impairments, such as dyslexia, may also benefit from the use of screen readers. Listening to content, rather than reading it, can make it easier to digest and understand information.

Most commonly, a screen reader works by converting text to audible speech. This can be written content or descriptions of other types of content, such as alternative text for images. They also help a user navigate around a web page by enabling keystrokes. Therefore, screen readers and keyboard accessibility often go hand-in-hand.

There are many different screen reader programs available and nearly all computers, tablets, and smartphones come with built-in screen reader functionality. Free options like NVDA are popular, along with JAWS and macOS VoiceOver. With these tools readily available, there’s no excuse for not testing a website’s screen reader compatibility. Making sure your website works well with these programs is crucial for making it accessible to all users.

Key aspects

Because screen readers are so heavily reliant on keyboard use it is imperative that keyboard accessibility is considered alongside screen reader compatibility. Everything relevant to ensuring keyboard accessibility is also relevant to screen reader accessibility.

In addition, several key features will enhance accessibility and usability for screen reader users:

• Semantic HTML: Making use of descriptive HTML tags, supported by ARIA labels where appropriate, to provide context on content will ensure screen readers can interpret the page correctly.
• Text alternatives: Providing text alternatives for non-text content, such as images, as well as descriptive, meaningful link text instead of vague terms like ‘Read more’ will help convey the context and purpose of the content.
• Consistent layouts: Maintaining a consistent layout across pages helps users familiarise themselves with the site, making it easy for them to find the information they need.
• Announce dynamic content updates: Ensuring that dynamic pieces of content, such as alerts, are announced using live regions helps to keep users informed about the status of actions and updates on the page.

Last on our list for the series is visual design considerations. Creating a website that is both functional for all users and beautiful to look at requires a holistic approach. It is not the responsibility of a developer to take a design and ensure that its implementation meets accessibility standards. The design itself must have accessibility at its heart.

Visual Accessibility

Accessible design in some ways has the biggest impact on the widest audience. Designs that prioritise clear visual presentation help everyone interpret and understand web content.

The visual design of a website serves multiple purposes. It’s not just about creating something aesthetically pleasing to look at. A website often acts as a first impression and reinforces brand identity, it plays a pivotal role in driving engagement and converting visitors into customers. User experience is shaped by the visual design, and effective design ensures a website meets its functional expectations whilst appealing to all users whatever their needs.

In short, visual design accessibility involves creating web designs that are usable by people with a wide range of abilities and disabilities. It ensures that visual elements, such as colour, contrast, typography, layout, and images, are designed to be accessible to everyone, including those with visual impairments, cognitive disabilities, and other challenges.

Key aspects

The visual design of a website is pivotal in making it fully accessible. Accessibility, including for keyboard and screen reader users, starts right from the design phase.

Some of the key considerations for ensuring a visual design supports accessibility are:

• Colour and contrast: Choose colours with sufficient contrast to make text and elements readable for everyone, including those with visual impairments.
• Layout and hierarchy: A clear and logical structure that is consistent across pages will help users navigate a site without friction.
• Typography: Using well-defined, readable fonts at an appropriate size will create a more comfortable reading experience for all users.
• Responsive design: A design should adapt to the dynamic nature of the web, accommodate various screen sizes, and allow for text zooming.
• Flashing content: Ensuring that web pages do not contain any content that flashes more than three times per second not only protects users with photosensitive epilepsy, it also prevents users from becoming visually overwhelmed.

These three broad topics encompass a wide array of accessibility features, which can seem overwhelming at first glance.

However, in the upcoming articles, we’ll guide you through how we at Tilt address these challenges in real projects.

Stay tuned!

Read the first Access All Areas article here.