Gatsby: Unable to include an image with empty alt attribute in Markdown

[AishaBlake]

Description

In reviewing #19982, I realized I wasn't able to create an image with empty alt text. For that blog post, there was a case for it because Shannon was describing some of her images outside of alt text. This shouldn't happen often but I don't see a way to include an image that we want screen readers to skip entirely. If no alt text is provided, we use the name of the file.

When I tried ![](select-work-org-confusion.png), for example, I got something like <img alt="select work org confusion"... That behavior makes sense in most cases and is what happens in the browser when someone writing HTML forgets alt text entirely. I'm looking for something that gets me <img alt=""...

Steps to reproduce

This occurred while reviewing the blog post linked above. In the Gatsby repo, you can:

• Run cd www.
• Run gatsby develop.
• Navigate to docs > blog > and then any blog post with images.
• Remove the alt text from an image and inspect it in the browser.

You can clone this example blog and navigate to http://localhost:8000/hello-world/ to see a handful of different alt/title combinations. The code is in content/blog/hello-world/index.md.

Expected result

There should be some option that results in an image with an empty alt attribute (and _not_ an image without alt attribute).

Actual result

In every combination, both alt text and title are filled in somehow regardless of what information is provided.

Environment

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.15.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.88
Safari: 13.0.4
npmPackages:
gatsby-design-tokens: ~1.0.10 => 1.0.10
gatsby-image: ^2.2.34 => 2.2.34
gatsby-plugin-canonical-urls: ^2.1.16 => 2.1.16
gatsby-plugin-catch-links: ^2.1.19 => 2.1.19
gatsby-plugin-emotion: ^4.1.16 => 4.1.16
gatsby-plugin-feed: ^2.3.23 => 2.3.23
gatsby-plugin-google-analytics: ^2.1.29 => 2.1.29
gatsby-plugin-google-tagmanager: ^2.1.18 => 2.1.18
gatsby-plugin-guess-js: ^1.1.26 => 1.1.26
gatsby-plugin-layout: ^1.1.16 => 1.1.16
gatsby-plugin-mailchimp: ^2.2.3 => 2.2.3
gatsby-plugin-manifest: ^2.2.31 => 2.2.31
gatsby-plugin-mdx: ^1.0.59 => 1.0.59
gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0
gatsby-plugin-nprogress: ^2.1.15 => 2.1.15
gatsby-plugin-offline: ^3.0.27 => 3.0.27
gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16
gatsby-plugin-sharp: ^2.3.5 => 2.3.5
gatsby-plugin-sitemap: ^2.2.22 => 2.2.22
gatsby-plugin-theme-ui: ^0.2.43 => 0.2.43
gatsby-plugin-twitter: ^2.1.15 => 2.1.15
gatsby-plugin-typography: ^2.3.18 => 2.3.18
gatsby-remark-autolink-headers: ^2.1.19 => 2.1.19
gatsby-remark-code-titles: ^1.1.0 => 1.1.0
gatsby-remark-copy-linked-files: ^2.1.31 => 2.1.31
gatsby-remark-embed-video: ^1.7.1 => 1.7.1
gatsby-remark-graphviz: ^1.1.18 => 1.1.18
gatsby-remark-images: ^3.1.35 => 3.1.35
gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0
gatsby-remark-prismjs: ^3.3.25 => 3.3.25
gatsby-remark-responsive-iframe: ^2.2.28 => 2.2.28
gatsby-remark-smartypants: ^2.1.17 => 2.1.17
gatsby-source-airtable: ^2.0.12 => 2.0.12
gatsby-source-filesystem: ^2.1.40 => 2.1.40
gatsby-source-npm-package-search: ^2.1.19 => 2.1.19
gatsby-transformer-csv: ^2.1.19 => 2.1.19
gatsby-transformer-documentationjs: ^4.1.20 => 4.1.20
gatsby-transformer-remark: ^2.6.39 => 2.6.39
gatsby-transformer-sharp: ^2.3.7 => 2.3.7
gatsby-transformer-yaml: ^2.2.18 => 2.2.18

[karthi07]

Can I work on this?

[AishaBlake]

As far as I'm concerned, you're welcome to work on this, @karthi07! It may still require some discussion, though. I'll add some additional context here and ping @johno in case he has anything to add.

In gatsby-remark-image, we set a default value for alt text. One possible option we discussed for addressing this issue would be to add a keyword that could be passed in instead of alt text which would create an image element with an empty alt attribute. Something like ![SKIP](./some-img.png)...

[AishaBlake]

@karthi07 please go ahead and run with this if you're interested!

[AishaBlake]

Hey, @karthi07! Checking in on this. Have you been able to work on this issue?

[AishaBlake]

@karthi07 I really appreciate your willingness to pick this up. Since it's been a couple of months since I've heard anything, I'm going to open this back up to the community. Please let me know if you've got the time to work on this!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[em-vo]

Hello @AishaBlake
Do you have any update on this issue ?
I wanted to add images with an empty alt in a blog post, and just discovered it was not possible.
I would be happy to work on this if needed

[tw15egan]

Also interested in having a fix for this, seems like we're running into this issue here: https://github.com/carbon-design-system/carbon-website/issues/1819

[motou]

I can take this issue since it should be helpful to generate an image with an empty alt attribute