I have seen several behaviors:
- No element is focused.
- The close icon (usually at top right of overlay) is focused.
- Some other element inside of the overlay is focused.
If conforming to ADA / ARIA standards, should any element be in focus?
I have seen several behaviors:
If conforming to ADA / ARIA standards, should any element be in focus?
The current recommend behavior is to focus the first focusable element in the dialog. However, there has been some debate on that implementation recently as it poses problems for users who use screen magnification software and screen readers.
in cases where the focus on display moves to a control at the bottom of the dialog a few negative things happen:
- For a screen magnifier user the focus moves to the control, due to the viewport containing only a small portion of the dialog content (typical magnifcation 400-600%) only the bottom part of the content is viewed, unlike the top of the dialog, the bottom content offers no context. users have to navigate around to get an idea of what is going on.
- For an SR user (such as JAWS) only the content of the focused element is announced, users have to navigate around the content to get an idea of what is going on.
The debate doesn't appear to be settled, but consensus is growing towards a new recommendation:
autofocus
element, focus that element.tabindex=-1
and outline: none
.Focusing the dialog element itself allows screen readers to read the contents of the dialog to the user, giving them context right away, and a screen magnifier will start at the top left corner of the dialog so they can start reading it from the beginning.