Skip to content

Gallery block - Improve accessibility of lightbox controls #77545

@kedarjoyner

Description

@kedarjoyner

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."

Image

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.

Image

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:

  • Users with cognitive disabilities, including dyslexia, ADHD, dyscalculia, memory impairments, and learning differences
  • Older users, who are generally less fluent with modern UI iconography
  • Low-vision users who do not use screen readers and whose visual parsing benefits from the redundancy of text over a single glyph
  • Touch users, for whom hover states are not available
  • First-time users of the interface, who have not yet built a mental model of the lightbox controls

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 ::after pseudo-element, triggered on :hover and :focus-visible. Illustrative example below:

.wp-lightbox-container button:hover::after,
.wp-lightbox-container button:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
}

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.

Metadata

Metadata

Labels

[Block] GalleryAffects the Gallery Block - used to display groups of images[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions