Deprecated/Experimental/Non-standard badges are not accessible

anna-yeddi commented 2 years ago

MDN URLs:

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: https://github.com/mdn/content/commit/4a46664825fed9e5730e0a5072b45928ff9c0758 * Document last modified: 2022-02-25T06:34:32.000Z

wbamberg commented 2 years ago

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

danielhjacobs commented 2 years ago

There's an open PR to replace these with something else: https://github.com/mdn/yari/pull/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 commented 2 years ago

@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 commented 2 years ago

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

However:

They are not focusable, so they won't be read by screen-reader (tested with VoiceOver).
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]".
It might make more sense to have the feature state icons after the feature name.

mdn / yari