[AI Help] Question: do all images need alt text?

[astearns]

What is the issue with the answer?

The summarized answer to “do all images need alt text” mashes up general authoring advice with specific requirements about MDN content. So the overall answer is incoherent (should have an alt attribute, it can be empty, but a non-empty attribute is required).

It’s really only the first sentences in the first two paragraphs that are relevant to the question. The rest of the generated text just makes the answer unclear.

How would you categorize this issue?

• The answer is harmful / unsafe.
• The answer is not correct.
• The answer is not helpful.

What did you ask?

1. should I use tailwind?
2. does every element need an ARIA role?
3. do all images need alt text?

What did AI Help answer?

According to the MDN documentation, every image should have an alt attribute. The purpose of the alt attribute is to provide alternative text that describes the image in a way that is helpful to users who can read the rest of the content but can't see the image. The alt text should be short and provide all the relevant information the image conveys. When writing the alt text, you should think about the valuable information of the image and how you would relay that information to someone who can't load images.

However, it is important to note that purely decorative images should have an empty alt attribute. On the other hand, images added to MDN documentation should have a purpose and therefore require a non-empty-string description. It is recommended to avoid describing the image in too much detail, as the surrounding text may already provide relevant information. Additionally, screenshots should focus on what you learn from the image rather than detailing its contents, and unnecessary information should be omitted.

Here is an example of the syntax for adding an alt attribute to an image in HTML:

<img src="image.jpg" alt="Description of the image">

Remember, the alt attribute is important for accessibility and should be used appropriately to ensure that all users can understand the content of the image.

What MDN pages did AI Help consult?

• HTMLImageElement: alt property
• How to add images and media
• What HTML features promote accessibility?
• Accessible multimedia

[caugner]

First of all, let me thank you for this issue, because it surfaced two issue reporting problems when you have a chat with multiple questions. I have applied a fix that should land soon.

I will triage this as a bug for now, and we might want to exclude the MDN meta documentation from AI Help's knowledge base to resolve it, even if this means certain questions about MDN itself won't be answerable anymore (it's an interesting, but not necessarily important use case).

We will update this issue when we address the issue.

[caugner]

@astearns Thanks again for reporting this issue. 👍

As we're working on an iteration, I would like to share with you what AI Help 2.0 might answer.

Can you please check how the following answers perform with regard to the issue you reported above? 🙏

should I use tailwind?

The decision to use Tailwind CSS or any other CSS framework depends on your project requirements, personal or team preference, and the specific benefits you are looking for in a CSS framework.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS from scratch. Here are some considerations to help you decide whether Tailwind CSS is suitable for your project:

1. Utility-First Approach: If you prefer composing your styles directly in your HTML with utility classes, Tailwind might be a good fit. It allows for rapid UI development and can lead to more consistent styling across your project.

2. Customization: Tailwind is highly customizable through its configuration file. If you need a framework that can be tailored to your design system, Tailwind offers this flexibility.

3. Reducing CSS Bloat: Tailwind, when used with its PurgeCSS feature, can help reduce the final size of your CSS by removing unused styles from your production build.

4. Learning Curve: Consider the learning curve for you or your team. Tailwind has its own set of class names and conventions that you will need to learn. If your team is already familiar with traditional CSS or another framework, there might be a transition period.

5. Community and Ecosystem: Tailwind has a strong community and ecosystem, with plenty of plugins and third-party tools available. If community support is important to you, Tailwind is a solid choice.

6. Design Freedom: If you want the freedom to create unique designs without being constrained by the component styles provided by other CSS frameworks (like Bootstrap or Foundation), Tailwind may be beneficial.

7. Integration: Consider how well Tailwind integrates with your current stack and build process. It's generally easy to integrate with modern build tools and frameworks.

8. Performance: Tailwind can lead to better performance if used correctly, as it encourages the reuse of utility classes, which can result in smaller CSS file sizes.

Ultimately, the choice to use Tailwind CSS should be based on whether its approach aligns with your project goals and workflow preferences. It's recommended to try it out on a small project or a component to see if it fits your development style before committing to it for a larger project.

For more detailed information about Tailwind CSS, you can refer to the official Tailwind CSS documentation.

does every element need an ARIA role?

No, not every element needs an ARIA role. In fact, the first rule of ARIA use is: "If you can use a native HTML element [with the semantics and behavior you require already built in], instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so." This is often referred to as the "First Rule of ARIA".

Many HTML elements have implicit roles that provide the necessary accessibility information to assistive technologies. For example, a <button> element implicitly has the role of button, so it does not need an ARIA role to be announced as a button by screen readers.

ARIA roles should be used when the semantics of the native HTML elements do not convey the role or purpose of the element, or when creating complex widgets that do not have corresponding native HTML elements. In such cases, ARIA roles can enhance accessibility by providing additional semantic information to assistive technologies.

For more information on when to use ARIA roles, you can refer to the ARIA in HTML specification, which outlines the allowed roles for elements and provides guidance on the use of ARIA with HTML.

do all images need alt text?

Not all images require descriptive alt text. The alt attribute is used to provide alternative text for an image if it cannot be displayed or if the user is using assistive technology, such as a screen reader. However, the content of the alt attribute depends on the context and purpose of the image:

1. Decorative Images: If an image is purely decorative and does not convey any meaningful content, the alt attribute should be present but empty (alt=""). This signals to assistive technologies that the image can be ignored. Optionally, you can also add role="presentation" to the image element.

2. Informative Images: If an image conveys information or meaning that is not fully described by the surrounding text, it should have a descriptive alt text that provides equivalent information.

3. Images with Captions: If an image has a caption that fully describes the content of the image, the alt text can be omitted or be very simple since the caption provides the necessary information.

4. Complex Images: For images that contain a lot of information, such as graphs or charts, a longer description may be necessary. In such cases, you can use the alt attribute for a short description and provide a longer description elsewhere on the page or via a link.

5. Functional Images: If an image is used as a control or has a function, such as a button, the alt text should describe the action that will be performed when the user interacts with it.

6. Images of Text: If an image contains text, the alt text should contain the same words as in the image, unless the text is also present as real text nearby.

Remember that the goal of alt text is to provide the same functional information that the image provides visually. For more details on how to use the alt attribute effectively, you can refer to the MDN documentation on the alt attribute and the HTMLImageElement: alt property.

[astearns]

Just looking at the alt answer (again, I am still concerned with the “might answer” part), it’s a bit weird that it links to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt which is an anchor I don’t think exists. And then in the better link for HTMLImageElement it misses the relevant #usage_notes anchor.

[caugner]

Thank you as well for the review of these answers.

Re. the "might answer" part, there are two aspects to it:

1. We might still make changes before release, especially if we notice any regressions.
2. The answers always vary to some degree due to the nature of LLMs.

As for the second point, here's what another answer to the last question looks like. It's not identical, but very similar to the answer posted above (and it doesn't have the img article as explicit context, so it uses the old anchor #attr-alt prior to the model's cut-off date, while the new anchor is just #alt):

Not all images require descriptive alt text. The alt attribute is used to provide alternative text for an image, but its usage depends on the purpose of the image:

1. Decorative Images: If an image is purely decorative and does not convey any meaningful content, the alt attribute should be present but left empty (alt=""). This indicates to assistive technologies, like screen readers, that the image can be ignored. Optionally, you can also add role="presentation" to the image element.

2. Informative Images: If an image conveys information or meaning that is not conveyed through the surrounding text, it should have an alt attribute with a descriptive text that conveys the same information or function as the image.

3. Images with Captions: If an image has a caption that fully describes the content of the image, and the image is not used for a link or button, you might not need additional alt text.

4. Complex Images: For images that convey complex information, like graphs or charts, a short alt text may not be sufficient. In such cases, additional information should be provided elsewhere on the page, and the alt text should give a brief summary of the image's content.

5. Images Used as Links: If an image is used as a link, the alt text should describe the destination or function of the link.

6. Image Maps: For image maps with multiple clickable areas, each <area> element should have an alt attribute that describes the purpose of that clickable area.

For more details on when and how to use alt text, you can refer to the MDN documentation on the alt attribute and the HTMLImageElement: alt property.

[astearns]

The differences in the answers are still a concern. What if the person querying was thinking specifically of an image used as a button? The first answer helps them, the second does not. Conversely, if they were thinking specifically about image maps the second would be helpful but the first would not be.

I don’t think MDN is an appropriate place to serve up direct LLM output.