We use allot of images, the majority of these images must have alt-text. I'm facing two issues with alt text, one is that the current way I have found to set alt text is too cumbersome. The other issue is that I cannot figure out how to get the alt text using GraphQL, I can get everything but the alt text currently.

Easily set alt text

We are currently using the standard Image Media Picker for images. This picker does not by default have alt-text. We added the ability to insert alt text from Settings -> Media Types -> Images -> Added alt-text text string type.

Now we have the technical capacity to add alt-text, but we were very suprised by just how cumbersome something so elemental for almost every single website that uses images in the world is.

To add alt-text we first have to upload the image, then go out of the image component, go to Media Library, find the image there (or open via link in the image) and then add the alt-text in media library.

On some of our pages we have 500+ images, this entire process then has to be repeated for all of these images. We hope that we have just misunderstood something and that it is actually easier to add alt text.

Another issue is that using this method each image can only have one alt text. But alt-texts are contextual, we may use the same image to convey different meanings on different pages. As such ideally we'd want to set alt text where an image is being used instead of in the media library. Using the current method we'd have to upload two versions of the exact same image and give them different alt texts. This is bad for umbraco as we use up more space than we really need and makes the CMS (media portion) more cluttered.

EDIT: This seems to only apply outside the rich text editor, which has the ability to set alt and caption in image.

Get alt text with GraphQL

We managed to get just about everything we need from images using GraphQL except alt-text. We are still new to GraphQL and probably do things in a silly way, but this also seems harder than it should be. Our current attempt looks something like this

ansatte{ // Employees
        ...on Ansatt { // Employee
          id,
          fornavn, // Name

          grafikkPortrett {    // Image element 
            url,
            // NO ALT TEXTR HERE, NO ALT ALT IN CHILDREN OR ANCESTORS EITHER
              }
            }

          }
        }
      }