Skip to content

fix: pass image alt text to SVG images for accessibility - #1089

Open
afonsograca wants to merge 1 commit into
gmsgowtham:mainfrom
afonsograca:fix/svg-alt-text
Open

fix: pass image alt text to SVG images for accessibility#1089
afonsograca wants to merge 1 commit into
gmsgowtham:mainfrom
afonsograca:fix/svg-alt-text

Conversation

@afonsograca

Copy link
Copy Markdown

As a screen reader user, I should hear the alt text of an SVG image. Raster images already do this. The markdown ![Company logo](logo.svg) must announce "Company logo". It must not announce only the word "image". This must also work when a link contains the image.

In this PR we send the alt text to MDSvg:

  • Renderer.image() now gives alt={alt || title} to MDSvg. The MDImage branch below it does the same.
  • MDSvg already accepts this prop, and sets aria-label and accessibilityLabel. No code gave the prop a value. Each .svg URI used the default label "image".
  • Renderer.linkImage() calls image(). Linked SVGs get the same correction.
  • We add two tests next to the image test. One test checks the alt text. The other test checks the fallback to title.
  • Both tests replace fetch with a mock. MDSvg then loads the file and shows SvgFromXml. Without the mock, the component stops in the error state, and the element with the label does not appear. This is why the old SVG snapshots show an empty View.
  • We ran the two tests against the old code, and both tests failed. A snapshot test alone does not find an incorrect label.
  • Two SVG snapshots in Markdown.spec.tsx.snap get the new alt prop. No other snapshot changes.
  • We record the behavior in the "Images & SVG" section of the documents. The text covers both components, because the raster case also had no record.

We believe it is better to use the existing prop than to change the default label of MDSvg. This keeps the order of alt and title in one place, and makes the two image paths the same.

SVG images rendered via MDSvg always fell back to its default "image"
label, so screen readers announced nothing useful for `.svg` URIs —
including those wrapped in a link through linkImage. Forward the
markdown alt text (falling back to the title) as MDImage already does.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant