Deprecated/Experimental/Non-standard badges are not accessible

[anna-yeddi]

MDN URLs:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
• And others

What information was incorrect, unhelpful, or incomplete?

The icons used to communicate status of properties and attributes, i.e. "deprecated", "non-standard", "experimental", lack accessible names and on-screen tooltips to provide users with their purpose. This affects users of assistive technologies (especially those who cannot see the screen/image), users with cognitive difficulties, as well as newer users of MDN.

Specific section or headline?

• Related Topics (sidebar)
• List of Global Attributes
• Properties, etc.

What did you expect to see?

Non-standard:
<symbol id="icon-nonstandard" viewBox="0 0 16 13.6" role="img" aria-label="Non-standard" title="Non-standard. Check cross-browser support before using.">...</symbol>
Deprecated:
<symbol id="icon-deprecated" viewBox="0 0 100 100" role="img" aria-label="Deprecated" title="Deprecated. Not for use in new websites.">...</symbol>

Did you test this? If so, how?

• Review of DOM
• Accessibility inspector on Firefox
• Screen reader (VoiceOver on macOS)

MDN Content page report details

• Folder: en-us/web/html/global_attributes
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/global_attributes/index.md
• Last commit: mdn/content@4a46664
• Document last modified: 2022-02-25T06:34:32.000Z

[wbamberg]

Thanks for filing! I'm transferring this, because it looks like a platform issue.

[danielhjacobs]

There's an open PR to replace these with something else: #5644

I'm not familiar with screen readers, so I don't know if that will work exactly right. The new format for these icons will be:

<abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
    <span class="visually-hidden">Deprecated</span>
</abbr>

<abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
    <span class="visually-hidden">Experimental</span>
</abbr>

<abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using.">
    <span class="visually-hidden">Non-Standard</span>
</abbr>

Hopefully that hidden span will work equally as well as an aria-label.

[schalkneethling]

@danielhjacobs Indeed but, it will not solve the accessibility problem. We are having a larger discussion about this and will soon open a discussion here on the Yari repo to get community input.

[caugner]

In the mean-time, the icons do have accessible names:

However:

1. They are not focusable, so they won't be read by screen-reader (tested with VoiceOver).
2. The title is probably too verbose for screen-readers, so we might want to add aria-labels with just "Deprecated [feature]" and "Non-standard [feature]".
3. It might make more sense to have the feature state icons after the feature name.