Skip to content

Fix struct tree image accessibility #2019

@anton-mauritzson

Description

@anton-mauritzson

Before you start - checklist

  • I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
  • I have checked if this feature request is not already reported

Description

When using react-pdf, images in PDFs are incorrectly exposed to assistive technologies. Currently, the struct tree adds a role="figure" element and a nested span with size 0x0. This means screen readers do not detect the image as an actual image, nor can they use its Alt text.

PDF.js addressed this issue in PR #18692
by ensuring that spans corresponding to images are given:

role="img"

The correct size and position corresponding to the image on the canvas

Without this fix, images are invisible to screen readers, creating an accessibility barrier.

Proposed solution

Align structTreeUtils.ts with the updated implementation from PDF.js, specifically the changes introduced in PR #18692
. These changes ensure that images in the structure tree are annotated with the correct attributes (e.g., role="img" and given a size), so that screen readers can interpret and announce them as intended.

Alternatives

implementing a local patch in projects using react-pdf to handle the missing struct tree attributes. This is not ideal, as it duplicates effort and risks divergence from upstream.

Relying solely on PDF.js directly instead of react-pdf, but this would mean losing the convenience and React integration that react-pdf provides.

Additional information

Related code in react-pdf: structTreeUtils.ts

Relevant PDF.js changes: mozilla/pdf.js#18692

Environment: Screen reader users (tested with NVDA and VoiceOver) are unable to perceive alt text on images in PDFs rendered via react-pdf.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions