-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Gallery block - Improve accessibility of lightbox controls #77545
Copy link
Copy link
Open
Labels
[Block] GalleryAffects the Gallery Block - used to display groups of imagesAffects the Gallery Block - used to display groups of images[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Metadata
Metadata
Assignees
Labels
[Block] GalleryAffects the Gallery Block - used to display groups of imagesAffects the Gallery Block - used to display groups of images[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Type
Fields
Give feedbackNo fields configured for issues without a type.
What problem does this address?
PR 62906 adds lightbox support for the Gallery block in WordPress 7.0).
The block offers three options for its navigation controls: "Icon," "Text," and "Both."
The Icon type is currently set as the default. When a user selects this, the Close, Previous, and Next buttons do not display a visible label on hover or keyboard focus.
An aria-label is present, so the current implementation technically meets WCAG 2.1 4.1.2 Name, Role, Value. However, it does not protect several user populations who rely on the visible interface:
For these users, icon-only navigation shifts cognitive load onto the user, requiring recall rather than recognition (Nielsen's Heuristic #6, one of the most empirically supported principles in HCI). Nielsen Norman Group's icon usability research shows that even well-recognized icons perform measurably better with text labels present.
This issue proposes two related improvements that address the gap at different layers.
What is your proposed solution?
Add a visible label on hover and focus-visible to icon-only controls**
Surface the existing aria-label text as a visible tooltip via a CSS
::afterpseudo-element, triggered on:hoverand:focus-visible. Illustrative example below:This adds no new information to the accessibility tree (screen readers already receive the aria-label), so
role="tooltip",aria-describedby, and JavaScript are not required. The pattern automatically satisfies WCAG 2.5.3 Label in Name, because the visible text is pulled directly from the accessible name.Update the default setting to "Both" instead of "Icon"
Change the default value of the label display setting so newly-inserted Gallery blocks display both icon and text labels out of the box.
Existing saved blocks would be unaffected; this change would only apply to newly-inserted blocks.