Skip to content

Image block: screen readers announce "figure" for images that have alt text but no caption #86817

Open

Description

@RafaelFunchal

Description

The Image block always wraps the image in <figure>, even when there's no caption:

<figure class="wp-block-image size-large"><img src="…" alt="On a light-blue background, a calendar page…"></figure>

Without a <figcaption>, the figure role gives users no extra information, but NVDA still announces it: "figure, graphic, On a light-blue background…". On a page with many images, this adds noise before every one. A bare <img> with the same alt text is read correctly as "graphic, On a light-blue background…".

To work around it, the reporter swapped Image blocks for Custom HTML. That isn't a realistic option for most site builders, and it means losing the editor's alt-text field.

Possible fixes:

  • Don't output <figure> when there's no caption.
  • Or keep the wrapper for styling and add role="none" to the <figure> when there's no caption.

This differs from #75027 (decorative images with empty alt text) and #79572 (role="none" on the img). This issue is about images that do have alt text, which is the common case. Changing the markup for images without captions may affect theme styles that target figure.wp-block-image, so the role="none" option may be the safer one.

Step-by-step reproduction instructions

  1. Add an Image block, set alt text, and leave the caption empty.
  2. View the page on the frontend with NVDA in Edge.
  3. Move to the image. NVDA says "figure" before the image and its alt text.

Environment info

NVDA + Microsoft Edge (Windows), on WordPress.com.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Accessibility FeedbackNeed input from accessibility[Block] ImageAffects the Image Block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions