Auto-accessibility

[LeaTark]

Auto-accessibility (SVG with JavaScript) generates code that is flagged as a warning by WAVE. Note, this is not a failure but still something that may need to be addressed.

The title attribute that is used to trigger auto accessibility is regarded as redundant once the title element and aria-labelledby attributes are injected.

Perhaps the original title could be removed at this point.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this.

WAVE = https://wave.webaim.org/ ?

I will ask for some community feedback on another issue related to SVG and titles to see if there is any other tool that requires both

[LeaTark]

@tagliala

WAVE = https://wave.webaim.org/ ?

Yes, WAVE is a Chrome plug-in that implements the rules of https://wave.webaim.org

[robmadole]

Does the title cause issues?

[LeaTark]

@robmadole

Does the title cause issues?

It's not an accessibility failure but a warning. The tool flags the redundancy of the title attribute when aria-labelledby and a title element are also present.

I believe this is only true where the two are identical.

The only issue comes when accessibility reports are full of warnings and we have to explain that's just how it is or programmatically remove the redundant title.

[robmadole]

Ok, if it was causing an actual issue I'd be more willing to work on it. As it sits this would be a breaking change to Font Awesome behavior. We will most likely not change this.

[nj]

@robmadole So you don’t find it causing an actual issue? 🤷‍♂️
#14595

It might only cause a warn in WAVE, but in addition leads to UI issues in certain browsers like double tooltips, which is rather annoying when giving the endusers a bad experience.

I’ve had to remove it programmatically for now, but seems a bit odd and seems tedious.

[robmadole]

@nj can you provide a reproducible example of the double tooltip?

[robmadole]

@nj I see you posted in the other ticket. Let's continue in #14595

[gtibrett]

Our guidance would be that having both a title attribute and <title> tag is redundant. That, in of itself, causes no harm for a11y, though.

By W3C's "Accessible Name and Description Computation" algorithm, the <title> inside the <svg> trumps the title attribute of the <svg>, so the title attribute is basically useless. If there was no <title>, then the title attribute would provide the accessible name. Also, the title tag wins even without an aria-labelledby pointing to it. So, the aria-labelledby attribute is also redundant. Using the title attribute alone seems like the simpler/easier path.

One of our employees, Bryan Garaventa, was one of the creators of that algorithm and he provides a simple tool for testing HTML snippets using the algorithm. https://whatsock.github.io/w3c-alternative-text-computation/Editable%20Live%20Input%20AccName%20Test.html Just paste your snippet into the textarea and click "Paste & Test" to see the calculated accessible name. Using the below snippets, I get the same result.

With redundant tags

<svg width="16px" id="test" title="Magic is included!" class="svg-inline--fa fa-magic fa-w-16" aria-labelledby="svg-inline--fa-title-1" data-fa-i2svg="" data-prefix="fas" data-icon="magic" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<title id="svg-inline--fa-title-1">Magic is included!</title>
	<path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"></path>
</svg>

Without redundant tags

<svg width="16px" id="test" title="Magic is included!" class="svg-inline--fa fa-magic fa-w-16" data-fa-i2svg="" data-prefix="fas" data-icon="magic" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"></path>
</svg>

[robmadole]

Thanks @gtibrett ! Let me noodle on this. What I'm worried about is a breaking change.

[gtibrett]

Thanks @gtibrett ! Let me noodle on this. What I'm worried about is a breaking change.

👍🏼Happy to help with a11y testing

[gtibrett]

Got a bit more info from our Chief Accessibility Officer.

If the <title> element becomes the accessible name then the title attribute becomes the accessible description. Most screen readers will then not speak the description if it's equal to the name.

Ref: https://www.w3.org/TR/svg-aam-1.0/

[sthiepaan]

Hello everyone 👋,
the title attribute is not valid for <svg>...</svg> tag. Instead each SVG Tag should provide its <title>...</title> and <desc>...</desc> (optional) or we can use aria-label attribute.

The simplest solution in that case would be last option. So the code for an icon should be something like:

<svg class="fa-magic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Magic icon label">
  <path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"/>
</svg>

If we want to use SVG as a decorative element all we need to do is add aria-hidden attribute on <svg>...</svg> or its parent element (aria-label attribute will be ignored then).

[robmadole]

Hey all, thank you again for taking the time to help us with this.

What we are going to do for version 6 is to remove the title attribute from the <svg> element. As @sthiepaan mentioned this is not a valid attribute for SVG and through our testing we see this fixes the main issue of having the redundant accessible name. It also nicely retains tooltips for sighted users. This should get released in 6.0.0-beta2.

[jasonlundien]

Confirmed, released in 6.0.0-beta2.