Autogenerate alt text for images

[KyleAMathews]

https://twitter.com/sarah_edo/status/930083568411217920

We could add support for this to gatsby-transformer-sharp so every image includes an alt text.

[vivek12345]

@KyleAMathews Would this be a difficult task for a newbie to take up?

[KyleAMathews]

Nope!

A PR adding this would need

• Add new field (perhaps autoAltText?) to https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/extend-node-type.js
• Add function which takes an image and first checks the cache if there's a generated alt text already and if not asks Microsoft and returns the generated text
• Add autoAltText to gatsby-image's fragments https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/fragments.js
• Also to https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js though the code here should use a passed in alt in preference to the auto-generated one.

Do you want to take this on?

[vivek12345]

Yes I would want to take this up, but I will keep it open for other's as well if I take too much time to get this done.

[KyleAMathews]

Awesome! Let us know your progress! Also don't feel bad about throwing up a partially finished PR.

[fk]

Go @vivek12345! 👍

[vivek12345]

Thank you :)

[fk]

🙌

Btw. gatsby-remark-copy-linked-files also generates a default alt text for HTML images in Markdown (<img src=…>) via the image filename here:

gatsby/packages/gatsby-remark-copy-linked-files/src/index.js

Lines 121 to 127 in d220fca

	// Generate default alt tag
	const srcSplit = initialImageSrc.split(`/`)
	const fileName = srcSplit[srcSplit.length - 1]
	const fileNameNoExt = fileName.replace(/\.[^/.]+$/, ``)
	const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/gi, ` `)
	image.attr(`alt`, image.attr(`alt`) ? image.attr(`alt`) : defaultAlt)

AFAIU this mimics what happens to regular Markdown images that do not have an user-defined alt text (![](../../image.jpg)). Would be nice to somehow generalize this, too (not necessarily in one go)!

[KyleAMathews]

Yeah! Let's get this in gatsby-plugin-sharp and then add it like normal to all the usual places.

[benjaminhoffman]

When we think about the point of alt text, it's for a11y (screen readers) and SEO (tells googlebot what this is an image of). In order of preference, it's better to have: 1) accurate, hand-typed alt text, then 2) empty string alt "", then 3) no alt text, and finally 4) incorrect alt text.

Assuming the above is true, a feature like this could cause issues b/c auto generating alt text from horribly-named images will jump to the fourth option. If this feature gets included then maybe a warning or strong notice to the user that their images should be descriptive would be helpful.

Or instead, would it be better to check if an alt text is included and if not, add a warning informing the user that they should include an alt text in their image?

[Undistraction]

There is also the SEO factor to consider. The way you would name an image for Google is not (necessarily) the way you would describe an image with alt text.

Given that we are only talking about images defined in frontmatter (because it's easy to add alt text to a markdown image), could the alt text be added in the frontmatter where the link to the image is defined and added to the ImageSharp by gatsby-transformer-sharp? There would need to be a simple convention to link an alt tag to an image, for example appending _alt to the image key:

title: Example
slug: example
primaryImage: ./images/example.jpg
primaryImage_alt: Picture of an example
secondaryImage: ./images/secondary.jpg
secondaryImage_alt: Picture of an example

[KyleAMathews]

Cool idea but it'd be in a plugin so closing