Alt text for Images in block editor

[jblevins1991]

Is your feature request related to a problem? Please describe. Images are not accessible in the block editor.

Describe the solution you'd like When adding an image in the block content editor, the images should provide a field where the writer can type the alt text into it and save it along with the image.

Describe alternatives you've considered I have considered seeing if extending the image type in the blockContent.js file, but even with the documentation it isn't exactly clear how to make said image display a field in the UI that would facilitate this.

Additional context Add any other context or screenshots about the feature request here.

[tinykite]

@jblevins1991 I was confused about this as well — I would love to see Sanity include this as a non-optional field for images in the default schema they provide for a blog.

I was able to add an alt property to the default image type by adding a fields array, and then defining alt within that array as a field that accepts a string.

 // blockContent.ts
{
  type: 'image',
  options: {hotspot: true},
  fields: [
    {
      name: 'alt',
      type: 'string',
      title: 'Alternative text',
    },
  ],
},

I think this feasibly could become a required field by including a validation property in the alt field object, eg validation: Rule => Rule.required().error('Alt text is required')

In terms of rendering it on the front-end, I'm currently working with Sanity content in Remix + React and was able to add that additional alt info to the image by defining images as a type in my components object for PortableText this way:

// Article.js

import { PortableText } from "@portabletext/react";
import { config } from "~/lib/sanity/config";
import urlBuilder from "@sanity/image-url";

const urlFor = (source) => urlBuilder(config).image(source);
const components = {
  types: {
    image: (props) => {
      const imageData = props.value;
      return (
        <img
          src={urlFor(imageData)
            .width(900)
            .height(900)
            .fit("crop")
            .auto("format")
            .url()}
          alt={imageData.alt}
        />
      );
    },
  },
};

.... 

const ArticleComponent = ({ content }) => {
// ...other stuff
<article>
 <PortableText value={content?.body} components={components} />
</article>
}

[jblevins1991]

I ended up doing the same by creating an a11y_image type in my schemas. Just seems trivial and makes sense to be native. I suppose you could argue that decorative images on websites should never have alt text, but I don't think anybody is adding these kinds of image in their CMS. Usually in the page design itself.

[pm0u]

bump on this - prismic has a feature that the descriptive text is tied to the image in the media library rather than the field for a document. Makes a ton of sense since an image generally only requires a single description - a picture of a shoe should probably always have the same descriptive text "Shoe model X shown on a woman in business attire". there's enough flexibility in sanity to use the above to override defaults from the media library. This feature also helps with searching for media since there is descriptive text associated with every image. descriptive text is not necessarily tied to web and should fit the sanity model. Whether or not to present or include the descriptive text alternative is up to the presentation method. I would prefer "descriptive text" since it could serve purposes other than the alt attribute on the <img> html element.

[korompaiistvan]

I was sad to see this is not included by default. Would definitely be a welcome addition

[AbeCole]

+1 - we would like to be able to 'pull out' the 'Alt Text' field, so when adding a batch of images to an array field then editor can easily go in and assign the Alt Text for each using this field. Rather than having to open each image in the 'Media' viewer to then edit the Alt Text

[winsmith]

I implemented alt text using this answer and it works perfectly. Thanks @tinykite !

[AbeCole]

I did have some success with a simple custom Input Component. It uses the 'fields' attribute on an Image field, by adding a subfield of 'string' type and then using this input component it will fetch the given field on the asset. It will display it's current value and allow this to be updated.

I've created a gist here

[Stanzilla]

Would love to see this as well

[piofinn]

I dont't think this has been mentioned here, but uploaded media actually has an alt text field connected to the asset itself. This is accessible through the Media plugin for the studio. While @tinykite 's solution is the intended way if you want to specify alt text per use case, it is easy to extract the "central" alt text in groq when fetching your portable text content:

*[_type == "your-document-type"] {
  ...,
  portableTextContent[] {
    ...,
    _type == "image" => {
      ...,
     "altText": asset->altText,
    }
  }
}

Ref @pm0u 's question, there is also a description field in the same place, which I think would alleviate all their concerns?

[millansingh]

@piofinn, I am seeing an alt text field in the media browser, but it does not show up when I run a GROQ query in Vision. It's also not editable/setable from Desk where I'm uploading images: I shouldn't have to leave my content to go to the media browser to set an alt text.