Null alt for images

Prismic for Content Creators
1

Hi,
To improve accessibility of a website we need to be able to add null alt (alt="") to some functional images. It would be correctly interpreted by screen readers and would pass accessibility test.
However, it seems like Prismic doesn't allow us to do it. What it currently lets us do is to have no alt (alt) or some text as an alt (alt="something"). Just "alt" won't adhere to the accessibility standard, alt="something" is what we don't want to do for some images like decoration, etc.
Has anyone run into this issue? Any plan to add that functionality? Any work around?

1 Like
3

Hello,

Welcome to the Prismic Forum and thanks for reaching out to us.

Currently, If we don't give any value in alt of images, which will return null, this is the expected behavior of the API response. If I understood your question well, you need an empty value('''') in place of null. If so, I'll communicate this to @features-team as a feature request.

Thanks,
Priyanka

5

Thanks for the answer, Priyanka!
If I understood it correctly, currently when I leave alt text blank, it will be translated to <img ... alt> in the page's source code. We need a way to do <img ... alt=""> instead.

1 Like
6

I need more details from you:
1.Can you please tell me what framework are you using?
2.How are you using this image field in the Prismic: As an individual image component or in the Rich text component?

Thanks

7

Hi!

  1. Next.js
  2. Both
1 Like
8

The work around for this issue can be:

For Image component: At the place of rendering, you can use null check with ‘OR’ operation like:

For example:

   const imageURL = document.data.illustration.url;
   const imageAlt = document.data.illustration.alt || ‘’
   
   render() {
      return <img src={imageURL} alt={imageAlt} />
    }

Reference:

For image inside RichText: You need to use HTML serializer, where you can do the required modifications on attributes of HTML elements such as image and you can apply the similar null check as above in HTML serializer.

Let me know if you have any other doubt.

9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.