Navigation and functionality

Users should be free to navigate around the page and interact with different elements in a way that suits their accessibility needs. Any functionality that we implement, such as pop ups, should also work with assistive technology.

Give users the freedom to navigate

Allow scrolling horizontally and vertically

Some users will magnify a page and may need to scroll horizontally as well as vertically. Don’t prevent scrolling by using: overflow: hidden.

Allow resizing

Don’t put: maximum-scale or user-scalable= no in your header.

For example ‘<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />’ would prevent a user from magnifying the screen.

Avoid motion and animation

Your users might have selected ‘reduced motion’ in their browser or system settings. 

Too much motion and animation can also slow the page load time, affecting users with reduced bandwidth, such as those in rural areas.

Alerting users to dynamic changes

Sometimes content on a page can change as someone is using it. For example, a popup may appear, some validation text may be triggered, or search results might update as a user clicks a new filter. If a user is using a screen reader and can’t see that something has changed, they may miss it.

You need to make sure that screen readers will alert the user to any changes. We use ARIA live to do this.

aria-live is off, there will be no notification
The screen reader will notify the user of a change when the current task is complete
The screen reader will interrupt the current task to notify the user of a change

Navigating the page using a keyboard

Users should be able to access and interact with every actionable item using a keyboard. This includes all links, buttons, accordions and form elements.

Content should appear in the same order when navigating by keyboard as it does on the visual page. The exceptions would be visually hidden content such as ‘skip to main content’ links.