Skip to content

Image block lightbox: do not hide the figcaption with display none #55088

@afercia

Description

@afercia

Description

Noticed while working on #55010

When an image has an empty alt attribute and the wrapping figure element does have a figcaption element, the actual image description is determined, both visually and semantically, by the figcaption content.

Screen readers announce the figcaption even when the image is marked as 'decorative' by the means ot an empty alt="".
Screenshot when testing with Safari and VoiceOver:

image no alt with caption

When the lightbox is enabled and its modal dialog opens, the figcaption element is hidden via CSS display: none. As such, important information related to the image is not available for all users:

  • it is visually hidden
  • it is not perceived by assistive technology

In this case, screen readers don't have anything meaningful to announce, they will only announce the figure element. Screenshot:

image no alt with hidden caption

This is clearly not the best experience for screen reader users. They will be informed that a modal dialog has opened. They will not have any clue what the modal dialog content is other than a figure element.

I'd argue that also visually the figcaption represents important information that should always be visible, also in the modal dialog.

At the very least, the figcaption element should not be hidden with display: none. Instead, it should be visually hidden via the screen-reader-text class or by other means to keep it perceivable by assistive technology.

Step-by-step reproduction instructions

  • create a post,
  • add an image with no alt text and with a caption
  • publish and view the front end
  • test with Safari and VoiceOver
  • tab to the image with the lightbox
  • onserve the figcaption is announced
  • open the lightbox modal dialog by pressying Ener
  • navigate the modal dialog content by arrowing with Control+Option+Right arrow
  • observe the only thing that gets announced is a figure element with no other information related to the image

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] ImageAffects the Image Block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions