Unable to include an image with empty alt attribute in Markdown

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® Core™ 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

[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

[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…