Task

Remove focus from hidden elements

Category: 
Keyboard
Where: 
Style panel
Check as complete

Most of the time, content that’s not visible on the screen should also be hidden from keyboard and screen readers. This means that hidden content should not be focusable. For example, an inactive modal shouldn’t be focusable.

To remove focus from hidden elements:

1. Select the the element in the Designer that should be hidden from focus.

2. Set the element’s display to none in the Style panel.

The display settings are located in the Layout section of the Style panel.

3. Add <checks-richtext_code>aria-hidden=”true”<checks-richtext_code> to the element.

Add ARIA attributes in the Custom Attributes section of the Element Settings panel.

To make sure hidden content isn’t focusable, press the Tab key on your keyboard to navigate through the focusable elements on your site. The hidden content should not be focused when you tab past it in the DOM.

WCAG reference:

2.4.3 Focus Order

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress