Feature Image dialog does not follow the dialog pattern #15295
Labels
[Feature] Media
Anything that impacts the experience of managing media
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Type] WP Core Ticket
Requires an upstream change from WordPress. Core Trac ticket should be linked.
Projects
Feature Image dialog does not follow the dialog pattern
Issue description
Users opening the "Feature Image" dialog are not told they are
entering a dialog. Keyboard focus is trapped, however screen reader
users are able to go beyond the last items of the dialog without
realising they have left it.
Keyboard users who find their focus cycling around the dialog get a Tab
stop with no visible focus. This is the dialog itself, which can receive
keyboard focus while having no visible focus state.
The triggering "Set Featured Image" button does not express an
expanded or collapsed state, which would not matter if users could not
reach the button when the modal was open; however, they can.
Lack of an explicit role for modal dialogs may be confusing for
assistive technology users, since they may not realise they're inside a
dialog, and that consequently the keyboard interactions may be different
from the rest of the page. Lack of an explicit label for dialogs may be
confusing for assistive technology users, since they won't have an
immediate sense of what the dialog is for.
Issue Code
Remediation Guidance
Give the modal a
role
ofdialog
and set"aria-modal=true"
.Additionally, set
aria-hidden="true"
on the element which wrapsthe rest of the page, to prevent older browsers or assistive
technologies that don't support
aria-modal
from accessing the restof the page while the modal is open.
Use
aria-labelledby
and anid
on the modal heading to name themodal.
Change the
tabindex
to-1
so that it can be focused viaJavaScript without being in the Tab order. The exception to this advice
is if having the modal in the Tab order is necessary so that keyboard
users can scroll content inside it; however in existing cases,
scrollable areas are separate parts of the modal. But if a container
must receive focus in order to allow keyboard users to scroll the
content, then the container must visibly show focus.
Recommended Code
Relevant standards
(Level A)
(Level A)
Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-42 in Tenon's report
The text was updated successfully, but these errors were encountered: