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]

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]

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: carbon-design-system/carbon-website#1819

[motou]

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

[ronalde]

The fix described above introduces a regression, especially from an accessibility perspective.

When declaring an empty alt-attribute for an image using the keyword GATSBY_EMPTY_ALT in markdown (![GATSBY_EMPTY_ALT](rel/path.jpg) and having set showCaptions: true in the plugin-options in gatsby-config.js, the plugin produces unwanted HTML:

<figure class="gatsby-resp-image-figure" ...>
    <span class="gatsby-resp-image-wrapper" style="...">
      <span class="gatsby-resp-image-background-image" style="..."></span>
        <img class="gatsby-resp-image-image" alt="" title="" src="/path.jpg" ...>
    </span>
</figure>
<figcaption class="gatsby-resp-image-figcaption"><p>GATSBY<em>EMPTY</em>ALT</p></figcaption>

• the package produces the empty value for the alt-attribute value of the img-element like instructed (line 4);
• but it inserts an (obviously) unwanted figcaption-element below the figure-element (line 7) that contains unwanted (and non-sense) content <p>GATSBY<em>EMPTY</em>ALT</p>.

This seems to fix the problem for current 4.x versions:

--- unpatched.index.js	2021-03-15 10:09:19.898810753 +0100
+++ patched.index.js	2021-03-15 10:11:28.041596794 +0100
@@ -114,7 +114,7 @@
           switch (_context.prev = _context.next) {
             case 0:
               getCaptionString = function getCaptionString() {
-                var captionOptions = Array.isArray(options.showCaptions) ? options.showCaptions : options.showCaptions === true ? ["title", "alt"] : false;
+                var captionOptions = Array.isArray(options.showCaptions) ? options.showCaptions : ( options.showCaptions === true && node.alt !== EMPTY_ALT) ? ["title", "alt"] : false;
 
                 if (captionOptions) {
                   for (var _iterator = _createForOfIteratorHelperLoose(captionOptions), _step; !(_step = _iterator()).done;) {

Furthermore, this feature should be documented in `README.md:

--- /tmp/README.md	2021-03-15 16:05:28.328713216 +0100
+++ node_modules/gatsby-remark-images/README.md	2021-03-15 16:12:26.848647108 +0100
@@ -50,8 +50,7 @@
-By default, the text `Alt text here` will be used as the alt attribute of the generated `img` tag. If an empty alt attribute like `alt=""` is wished,
-a reserved keyword `GATSBY_EMPTY_ALT` can be used.
+By default, the text `Alt text here` will be used as the `alt` attribute of the generated `img` tag and for the contents of the `figcaption` element. If an empty alt attribute like `alt=""` and no `figcaption` is wished, use the reserved keyword `GATSBY_EMPTY_ALT`.

--- /tmp/README.md	2021-03-15 16:05:28.328713216 +0100
+++ node_modules/gatsby-remark-images/README.md	2021-03-15 16:12:26.848647108 +0100
@@ -63,7 +62,7 @@
| `linkImagesToOriginal`  | `true`  | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to `false` to disable this behavior.                                                                                                                                                                                                                                                                                                                                                  |
- | `showCaptions`          | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. If the title attribute is empty but the alt attribute is not, it will be used instead. Set this option to true to enable this behavior. You can also pass an array instead to specify which value should be used for the caption — for example, passing `['alt', 'title']` would use the alt attribute first, and then the title. When this is set to `true` it is the same as passing `['title', 'alt']`. If you just want to use the title (and omit captions for images that have alt attributes but no title), pass `['title']`. |
+ | `showCaptions`          | `false` | Add a `figcaption` tag to each image with the contents of the title attribute, when this is not empty. If the title attribute is empty but the alt attribute is not, it will be used instead. Set this option to true to enable this behavior. You can also pass an array instead to specify which value should be used for the caption — for example, passing `['alt', 'title']` would use the alt attribute first, and then the title. When this is set to `true` it is the same as passing `['title', 'alt']`. If you just want to use the title (and omit captions for images that have alt attributes but no title), pass `['title']`. If the alt tag contains the reserved `GATSBY_EMPTY_ALT` value no `figcaption` will be produced. |
| `markdownCaptions`      | `false` | Parse the caption as markdown instead of raw text. Ignored if `showCaptions` is `false`. 

[AleksandrHovhannisyan]

Related: I wish I didn't have to type GATSBY_EMPTY_ALT in my MDX every time I wanted an empty alt attribute. Why can't I just do something like this in my MDX provider? gatsby-remark-images seems to always replaces alt="" with the name of the image (e.g., puppy.png => alt="puppy"), which is completely undesirable:

const mdxComponents = {
  // exclude title, intercept alt
  img: ({ style, alt, title, ...otherProps }: Omit<HTMLProps<HTMLImageElement>, 'crossOrigin'>) => {
    return (
      <img
        {...otherProps}
        // Why doesn't this work?
        alt={alt === '' ? 'GATSBY_EMPTY_ALT' : alt}
        style={{ ...style, maxWidth: '100%' }}
      />
    );
  },
}

If this worked, you could just use alt="" and replace it with whatever you want, in a single place. But that doesn't seem to work.

Edit: Temporary workaround:

const mdxComponents = {
  // exclude title, intercept alt
  img: ({
    style,
    src,
    alt,
    title,
    ...otherProps
  }: Omit<HTMLProps<HTMLImageElement>, 'crossOrigin'>) => {
    const srcParts = src?.split('/');
    const imageName = srcParts?.[srcParts.length - 1].split('.')[0];
    const isEmptyAlt = imageName === alt;
    return (
      <img
        {...otherProps}
        src={src}
        alt={isEmptyAlt ? '' : alt}
        loading="lazy"
        style={{ ...style, maxWidth: '100%' }}
      />
    );
  },
}

It's really dumb that I have to do this just to get empty alts...