According to the 2022 Disability Statistics: Information, Charts, Graphs and Tables report, around 10% of the world population lives with a disability. People with hearing, movement, sight, or cognitive ability impairments require web applications without any barriers for communication or interaction. Moreover, issues with computer peripherals, such as mouse disconnection or touchpad absence, might limit the user's interaction with the application and force them to use the keyboard. That is why web application developers must adjust web apps to support accessibility.
In this blog, you’ll find useful tips for improving website accessibility that, in turn, will also help to increase the quality of your application.
Explore the web accessibility checklist we've comprised to address the main industry best practices:
By pressing the tab key, keyboard users can navigate through websites, moving from one interactive element on the page to another. This method enables them to easily navigate the site. When operating with the tab button, the order of switching elements (buttons, inputs, links, etc.) should be in top-to-bottom order to improve website accessibility. This way, the user will always know where they are in the app and where their next step is.
These principles need to be followed even for design changes and code refactoring.
When structuring a page with website accessibility in mind, there is no need to ‘reinvent the wheel’ and omit browser-native instruments. A best practice is to use standard elements with built-in semantic tags and keyboard support rather than <div> and <span> elements. This enables developers to use out-of-the-box methods for interactive elements and increase website accessibility at the same time. So:
<div role="toolbar" class="toolbar">The content needed<div>
A focus indicator serves as the equivalent of a cursor for users who rely on keyboards. By incorporating accessible focus indicators, you can enhance website accessibility not only for keyboard users but also for those who use assistive technology that simulates keyboard functionality, such as switch controls, mouth sticks, head wands, and voice control, among others.
A focus indicator highlights the currently focused items to improve the accessibility of the website. Here are some points to note:
For example, the “outline” style in this case will be applied only when using a tab:
It will not, however, be applied when the element is clicked by using a mouse.
Labels are important for website accessibility because they deliver additional information to screen readers. Below you will find some useful label and caption best practices:
For example, instead of:
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Responsive design is not just about improving speed or technical metrics, but also about making websites accessible and user-friendly. Below you will find some tips that will help your readers easily operate, navigate and stay longer on your website.
To make sure the website meets baseline accessibility, always start by setting width=device-width and initial-scale=1 in a head with meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Observe how “Look at me” appears on 1) desktop and 2) mobile:
Color is important not only for people with disabilities, but in general because it can affect how people perceive information.
Currently, color contrast is computed via Advanced Perceptual Contrast Algorithm (APCA) to make an accurate estimation of human contrast perception. By opening a developer tool and clicking on the color, you can check whether the contrast ratio is ok or not.
When displaying information to a reader, it’s important to not only rely on color because poor contrast ratio or small font size can make it difficult for users to read. It is recommended to use text or other visual elements together with colors to display critical information.
Further, you can emulate vision deficiency for a website to understand how different users are able to view and interpret information visually. To do this, you need to open the developer tool, navigate to the Console tab, and Rendering subtab, where you will be able to select the Emulate vision deficiency option.
Following the website accessibility best practices described above will not only accelerate website performance and optimize technical KPIs (which is a big advantage), but it will also improve website accessibility and help users navigate and interact with your website with greater ease.
Get in touch with us to chat to a UI expert on our team.