Denise Savoie | Royal Roads University

Anna Maria Tremonti | Royal Roads University

Home | Royal Roads University

Noranit Setabutr | Royal Roads University

Michael Harcourt | Royal Roads University

Transfer Credit | Royal Roads University

Helen Hughes | Royal Roads University

Janet Baird | Royal Roads University

Isabel Lloyd | Royal Roads University

Stephen Lewis | Royal Roads University

When selecting a user interface component with the keyboard, the focus indicator must 
not be completely obscured by anything in front of it.

## Why this matters

When using a keyboard, it is important that the user can see where they are on the page.
If the focus indicator is obscured, the user may not know where they are, and may not
be able to interact with the page.

## Examples

Most common examples include:

* Banners at the top or bottom of the page, such as cookie banners
* Fixed navigation bars
* Fixed footers
* Popup modals, such as cookie consent modals

## How to fix

With elements that cover part of the screen, such as cookie banners, ensure
that the user can scroll to see any content behind the banner, without having to close
the banner.

With popup modals, it should usually be impossible to focus anything behind the modal.
Most common modal frameworks will automatically trap focus within the modal, so that
this is impossible. Example: [Bootstrap Modal](https://getbootstrap.com/docs/5.2/components/modal/#live-demo).

## Further reading

This is part of the draft WCAG 2.2 specification and is subject to change.

* [WCAG 2.4.12](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured.html)

ensure-focus-is-not-obscured-minimum

June 2024

May 2024

Royal Roads University

Title / URL	Issues
Denise Savoie \| Royal Roads Universitywww.royalroads.ca/denise-savoie	16
Anna Maria Tremonti \| Royal Roads Universitywww.royalroads.ca/anna-maria-tremonti	16
Home \| Royal Roads Universitywww.royalroads.ca/	16
Noranit Setabutr \| Royal Roads Universitywww.royalroads.ca/noranit-setabutr	16
Michael Harcourt \| Royal Roads Universitywww.royalroads.ca/michael-harcourt	16
Transfer Credit \| Royal Roads Universitywww.royalroads.ca/transfer-credit	16
Helen Hughes \| Royal Roads Universitywww.royalroads.ca/helen-hughes-0	16
Janet Baird \| Royal Roads Universitywww.royalroads.ca/janet-baird	16
Isabel Lloyd \| Royal Roads Universitywww.royalroads.ca/isabel-lloyd	16
Stephen Lewis \| Royal Roads Universitywww.royalroads.ca/stephen-lewis	16

Ensure focus is not fully obscured

Royal Roads University

Where this issue has occurred