Before generating an alt attribute for an image, you need to read the entire W3C WAI section on Images. It contains fundamental information you need to understand before deciding if, when, and how to compose an alt attribute for an image.
The objective of providing alt text is to give a visually impaired visitor the same kind of emotional experience as that of a visitor with perfect eyesight. They can tell there's something there, they can't know what it is, or why it's there unless you explicitly tell them. Think about all the context a seeing person with perfect vision gets from the image and convey that in words.
Using AI to generate alt attributes should be seen as a tool to help you become more productive, not as a magic solution which resolves you of the responsibility of authorship. After all, it cannot always understand the exact context in which you selected to use this image, or the information you were trying to convey. It can infer, but—just like asking a random person—its inference might not align with your expectations. Ultimately, it's up to you to read the alt text, and refine it based on your human judgement, knowledge, and lived experiences.
The alt attribute of an image tag is there to describe the image, within the context of the page, to users with disabilities.
There are two very important implications in this statement.
First and foremost, your audience is all people with disabilities, not just people who were born unable to see at all. The description of the image has to make sense to all of them be it a person born unable to see, a person with partial eyesight, or a person who became unable to see (completely or partially) at a later point in life.
The other implication is that the alt attribute must make sense within the context of the page. This means that the same image may require a different alt attribute depending on the content you are authoring. For example, let's say we have a zoomed-in photo of the full moon set against a black background. The alt attribute you need to author when this is used in an article talking about a. Dark Mode in software, b. lunar exploration missions in the 1960s and 1970s, and c. fairy tales about witches are entirely different. In the first case it's a metaphor for the color scheme, in the second case it's a literal representation of the subject of the exploration discussed in the article, whereas in the third case it's used to invoke the "flying witch on a broomstick in front of the full moon" trope of fairy tales. The alt text you use in each case needs to link to the purpose of the image, not just visually describe its contents. Here are some alt texts for each use case to help you understand the difference:
A close-up shot of a full moon against a dark sky, acting as a metaphor for the dark color scheme which is characterised by contrasting, low-saturation colors, and which is typically used at nighttime.
A close-up shot of the full moon, the Earth's satellite which was visited by the lunar exploration missions in the 1960s and 1970s.
A close-up shot of the full moon, evoking the fairy tale trope of witches and magical creatures making their appearance during a full moon.
The two implications described above are the reason.
The first implication is something that's fairly easy to work around by giving instructions to the generative AI to take into account all disabled users, not just those born unable to see at all. This has been pretty much a solved problem once the world moved beyond the first, fairly naive crop of generative AI.
The second implication is far more nuanced. It boils down to the fact that asking a generative AI to describe an image usually does so literally, describing the visual elements of the image but not how they are related to the content. AITiny addresses it in two ways. First, by instructing the generative AI to take the content's context into account (and supplying the content to the AI model) when asking it to generate the alt attribute. By itself, this yields generally very accurate results, especially when using modern models. The second way is by having the model show you the reasoning behind composing this specific alt attribute. Even if the generated alt text is not entirely what you want, being shown the reason will help you get a better insight and tweak the alt text to fit your content.
Within the TinyMCE editor itself, you can right-click (or CTRL-click on a Mac) on any image and choose the Generate ALT Attribute context menu item to create an alt attribute for the image taking into account the context of the content you are authoring in the editor.
Outside of the TinyMCE editor, there's a Generate ALT Attribute button added to all Media fields in standard Joomla forms. This includes the intro and full text images in the articles editor. When you click that button, an ALT attribute is generated for the selected image, taking into account the content of all active Joomla editors in the form. Due to the nature of this feature, you will see this image for all Joomla Media fields, including in third party components, and maybe some Joomla custom fields of the Image type. The results for media fields other than the intro and full text images in the articles editor may be of varying quality, as the necessary context may be provided by other items on the form which are not sent to the generative AI when asking it to create an ALT attribute.
This feature works with BOTH Joomla's standard Media field AND the overridden Media field provided by the JCE editor.
There are two cases where using AI to generate an alt text is a bad idea.
If you have a purely decorative image, i.e. an image added purely for visual flair such as chapter ornaments, you MUST use an empty alt tag. You can do that by checking Joomla's "This is a decorative image" option when inserting the image.
You should use decorative images sparingly and keep them fairly small in size. Good examples of decorative images are fleurons (chapter ornaments), and image-based bullets. Bad examples of decorative images (you should NOT mark them as decorative!) are graphs, and portrait photos of individuals.
If you are going to include an image of text, e.g. a screenshot of a deleted social media post, you should treat it as a decorative image and add a visually hidden DIV or P with the verbatim text of the image and any additional context information. If you're using a Bootstrap-based template you can create a DIV and give it the class of visually-hidden
. If, however, the text in the image is included verbatim in the main body text of your article you can either treat it as a decorative image, or describe it as a photo of the text which follows.
If you try to create alt attributes before you have finished authoring your text content there will not be enough context in your content for the AI alt attribute generation to provide a meaningful alt attribute. The correct approach is to generate the alt attributes towards the end of the authoring process.
Images which are too small, low quality, too abstract, or too tenuously related to your content might confuse the generative AI in the same way a human would get confused. As a rule of thumb, it's best to replace the image when possible. Otherwise, consider adding a caption in addition to the alt-text. Captions shouldn't visually describe the image; they should provide the context for its use.
When you have forms in core Joomla components other than Content (Articles), or in third party components, AITiny will try to use the contents of any editor available on the page as the context for creating an alt attribute. No other form fields will be taken into account. This could lead to low quality alt attributes, erring on the side of literal description of the image.
If you have a complex image, such as a graph, it is possible that the generative AI might miss the point. Always check that the points highlighted in the alt attribute are those you are interested in.
Trying to run the same alt-text generation with the same model, on the same image and content will yield completely different results. Sometimes one run will be fairly useless, in the wrong language etc but the very next run will be the perfect example of how the alt-text generation should work. This is not a bug, nor is it under your or our control. The root cause of this is that generative AI models are non-deterministic by nature. They use a random number generator to vary their output between successive runs.
You may get an alt attribute in English instead of your local language. Generally speaking, the AI will try to use the content's language, but that's entirely model-dependent.
If you have a list of similar images (for example, showing different stages of preparing a meal in a photo-wall kind of arrangement) you need to write your alt attributes in a way that not only describe the specific image, but also tie it to the collection. Since AITiny processes each image separately, this is not possible. You will need to edit the generated alt attribute manually to introduce this tie-in.
When you are creating alt text for a portrait photograph depicting a person (think a contact's photo, or a list of key people in a business) the generated alt text MAY be lacking. A good alt text for such a photograph should describe the physical appearance of the person in detail, not just their name. For example, a good alt text would be "Portrait photo of John Smith, a Caucasian male in his mid-40s with a receding brown hairline and a trimmed, neat salt-and-pepper beard. He has brown eyes, and is wearing wire frame spectacles. The photo is set against a plain maroon background". A bad alt text (do NOT use!) would be "Portrait photo of a middle-aged man", or "Portrait photo of John Smith", or even worse "Photo of John Smith".