Add basic accessibility fixes

[theanxy]

A couple of small fixes to improve the overall accessibility, both in code samples and on the landing page.

My main focus was fixing the tutorial so that all images would have ALT text. I find it important to spread good practices especially in the documentation.

[gatsbybot]

Deploy preview ready!

Built with commit 2be53d0

https://deploy-preview-2215--gatsbygram.netlify.com

[djm]

This removes the existing alt text and replaces it with a blank string - I don't think that was desired?

[theanxy]

Providing content here is not really beneficial, as the exact same string (name of the author) is provided shortly after, so that content would be read out twice by screen readers. See this guide

[theanxy]

Thanks for being cautious :)

[djm]

Thanks for being informative! I didn't realise that unnecessary alt text could actually be damaging.

[djm]

I agree with the premise that image tags should have alt attributes; but I don't think defining blank alt attributes throughout the codebase adds anything over not having them.

If this was to be merged, the alt attributes being defined should have values.

[jquense]

Thanks for taking the time to improve this, it's really appreciated. In the cases where the alt text is empty van we add something semantically relevant instead? I don't think empty text is generally better than no attribute

[theanxy]

@djm, @jquense – thanks for taking your time to review this so quickly.

Have a look at the following article as for why providing an empty ALT text is different from not providing ALT attribute at all —
http://osric.com/chris/accidental-developer/2012/01/when-should-alt-text-be-blank/

Basically it means that a given image could be safely ignored by assistive technologies such as screen readers. If no ALT text is provided, screen readers would try to read out the filename from the image path which can be very confusing.

WCAG 2.0 (W3C's accessibility guidelines) also recommends the same thing: https://www.w3.org/TR/WCAG20-TECHS/H67.html

Oftentimes empty alt text is better than repeated content therein – that depends on context. Here’s a good primer on creating proper alternative content: https://webaim.org/techniques/alttext/

[djm]

@theanxy ah, thanks, TIL!

In that case, leaving some of them blank makes sense to me. But shouldn't pictures that are part of content like "panda-group-eating-bamboo.jpg" have relevant alt text?

[theanxy]

@djm Totally — good call! Fixed

[KyleAMathews]

Great stuff @theanxy! Thanks for cleaning things up and teaching us some about the "alt" property.

[jlengstorf]

Hiya @theanxy! 👋

This is definitely late, but on behalf of the entire Gatsby community, I wanted to say thank you for being here.

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (We’ve got t-shirts and hats, plus some socks that are really razzing our berries right now.)
2. If you’re not already part of it, we just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If you have questions, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again! 💪💜

[theanxy]

@jlengstorf Thank you! I appreciate it and I'll see if I'll be able to help with anything else 💜