Skip to content

fix: Address #8579 Don't display double alt text.#8671

Merged
DSchau merged 1 commit intogatsbyjs:masterfrom
mikelax:topics/8579-image-alttext
Oct 1, 2018
Merged

fix: Address #8579 Don't display double alt text.#8671
DSchau merged 1 commit intogatsbyjs:masterfrom
mikelax:topics/8579-image-alttext

Conversation

@mikelax
Copy link
Copy Markdown
Contributor

@mikelax mikelax commented Oct 1, 2018

Overview

This closes #8579, it attempts to prevent double images from appearing on screen readers.
The main change is that when the real image isVisible, then the alt text for the placeholder images is set to empty string which will hide the placeholder element from screen readers.

Testing

I did not update any of the existing tests, if someone has an idea on how to update please let me know.

@mikelax mikelax self-assigned this Oct 1, 2018
Copy link
Copy Markdown
Contributor

@DSchau DSchau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great, and I'm all for accessibility improvements!

If the snapshots need updated, the best way is to run yarn test:update or npm run test:update, so we'll see if that's needed!

} else {
bgColor = backgroundColor
}
const bgColor = typeof backgroundColor === `boolean` ? `lightgray` : backgroundColor
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice little tweak 👍

@DSchau
Copy link
Copy Markdown
Contributor

DSchau commented Oct 1, 2018

Waiting to see how the tests fare, but presuming they pass, I'll get this merged and released; thanks!

@DSchau DSchau merged commit cb0adee into gatsbyjs:master Oct 1, 2018
@DSchau
Copy link
Copy Markdown
Contributor

DSchau commented Oct 1, 2018

🎉

Successfully published:
 - gatsby-image@2.0.13

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.

Gatsby-image: Placeholder image causes screen readers to read each image twice.

2 participants