1473043 - Show a warning message for images with a "null" name value

Status: RESOLVED DUPLICATE of bug 1518808

(DevTools :: Accessibility Tools, enhancement, P3)

Description

[Micah [:mtigley] (she/her)]

Attachment: NoAltAttr.png

An image element's accessible object should always have a name descriptor for it. Usually this means ensuring the image element has an "alt" text attribute. If this value does exist, or is null, then the image is inaccessible. 

The highlighter's info-bar should indicate if the accessible's name value does not exist for image elements. Otherwise, simply display the name of the accessible in its info-bar highlight. The attached screenshot shows an example of what warning could be displayed for an inaccessible image.

For reference: https://webaim.org/techniques/alttext/

Comment 1

[u634192]

Hey!

I'd like to work on this bug fix if it's still up for grabs.

Comment 2

[TomS [:toms]]

Hi, is this bug available?

Comment 3

[Micah [:mtigley] (she/her)]

Hi, yes it's still available!

A good place to start with is examining how the Contrast Ratio component is shown in the accessible highlighter's infobar. I believe these are the relevant places to start looking at how this is put together:

https://searchfox.org/mozilla-central/source/devtools/server/actors/accessibility/accessible.js#424
https://searchfox.org/mozilla-central/source/devtools/server/actors/highlighters/utils/accessibility.js#189
https://searchfox.org/mozilla-central/source/devtools/server/actors/highlighters/utils/accessibility.js#378

Comment 4

[TomS [:toms]]

Thanks Micah. I'm assigned to another bug now so I'll come back to this one if it's still free.

Comment 5

[TomS [:toms]]

Ok I'm free to work on this one now.

I had a look at the contrast ratio code so I think I have an idea on how to work on this. Do you just want the infobar highlight to have another component that reads "No Alt Attr" for images with a null name value? And is this implemented as an additional audit step here? https://searchfox.org/mozilla-central/source/devtools/server/actors/accessibility/accessible.js#442

Comment 6

[Micah [:mtigley] (she/her)]

Great! I'll assign you to this issue.

Yes, much like how the Contrast Ratio audit has its own component to be rendered inside accessible infobar, we can create another component that shows "No Alt Attr" or something similar when an image has a null name value.

Ah, I apologize, I realized the first link no longer points to the correct place to add an additional audit. You're right, https://searchfox.org/mozilla-central/source/devtools/server/actors/accessibility/accessible.js#442 is the correct spot to add this new step. After this line, we can add a new audit step for getting the accessible's name value for an image.

So to summarize:

1. Create a new function similar to _getContrastRatio that returns whether or not an image accessible has a name value.
2. Add this new audit function as a new step in the audit method
3. Create a new AudiReport component similar to the Contrast Ratio audit report. Since this audit is rather simple, the only two class methods you need to implement are buildMarkup and update.
4. Finally, add this new AuditReport component to the Audit class's reports list. Audit is responsible for updating and showing reports in the infobar highlighter.

I believe this is what we need to do to get this working. However Yura will know better on how this should be done (Yura, please let us know if I missed any steps/details).

Comment 7

[TomS [:toms]]

Sounds good. Thanks for the summary, that's very helpful

Comment 8

[Patrick Brosset <:pbro>]

Hey TomS, I noticed this bug hasn't been updated in a month. Do you need more time to work on this (which is totally fine of course)? If not, please let me know so we can make this bug available for others to pick up.

Comment 9

[Monika Maheshwari [:MonikaMaheshwari]]

Hi if this bug is available ,can I work on this issue?

Comment 10

[TomS [:toms]]

Apologies @pbro, I haven't had the time. If Monika would like to pick this up, you can assign it to her.

Comment 11

[Micah [:mtigley] (she/her)]

Hi, Monika. This bug is now being worked on in Bug 1518808, so it's not available to work on anymore. Sorry about that! You can find similar good-first-bugs for DevTools here: https://codetribute.mozilla.org/projects/devtools

I'll resolve this bug as a duplicate.