Auro icon screen reader availability

[jrbromberg]

General Support Request

Support request

The title and desc tags rendered by auro-icon are not accessible to NVDA screen reader. I believe this is because aria-hidden="true" is rendered by auro-icon in the svg tag that contains the title and desc tags. When i set this to false, NVDA read the title and desc tags.

Page tested on: https://www.alaskaair.com/content/travel-info/flight-experience

Auro-icon example element from live page:

Shadow root from the above auro-icon:

<title>First Class legroom</title>Indicates additional legroom for First Class cabin

Possible Solution

I think preferred solution for web content would be to remove default of aria-hidden="true" from auro-icon.

If that isn't possible, allowing us to pass aria-hidden="false" into auro-icon would be a usable solution. I tested this out just to see if it already exists. It did not work for me so I would guess this isn't currently an option.

Auro-icon doc: https://auro.alaskaair.com/icons

Context

By end of year, we need to have all images accessible by screen reader. This means ALL images. That includes small icons, svgs, background images, scenic images.

Your Environment

• Version used: 3.1.0 (i think)
• Browser Name and version: Chrome Version 104.0.5112.102 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows desktop
• Link to your project: na

[jrbromberg]

Fixing my code examples so they show up.

Auro-icon example element from live page:
<auro-icon class="small-icons" style="color:var(--auro-color-brand-midnight-400)" customcolor="" customsize="" category="in-flight" name="first-class-legroom"></auro-icon>

Shadow root from the above auro-icon:
<!----><div class=""><!----><svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" style="min-width:var(--auro-size-lg);height:var(--auro-size-lg);fill:currentColor" class="ico_squareLarge"><title>First Class legroom</title><desc>Indicates additional legroom for First Class cabin</desc><path d="m8.872 7.324.31 1.045.015.051.629 2.207c.234.782.462 1.24.682 1.373.154.03.43.046.827.05H13.32c.072-.004.144-.002.215 0 .722.03 1.205.203 1.447.518.187.242.468.846.843 1.81.033.086.069.171.107.256l1.483 3.292c.057.138.124.272.197.402.218.39.393.615.525.675.123.055.663.066 1.622.031a.714.714 0 0 1 .74.688v.026a.745.745 0 0 1-.746.745h-1.9c-.07 0-.14.002-.21.004-.46.019-.76-.061-.899-.24a3.12 3.12 0 0 1-.224-.395l-.115-.233a38.295 38.295 0 0 1-.294-.616l-.028-.06-1.57-3.47a5.24 5.24 0 0 1-.159-.394c-.33-.925-.604-1.439-.819-1.542h-1.958c-.04 0-.078 0-.117.002-1.437.032-2.237-.22-2.4-.757-.438-.845-.82-1.85-1.149-3.015l-.12-.444-.43-1.67a.736.736 0 0 1 .553-.902.815.815 0 0 1 .958.563Zm3.008 11.679a.745.745 0 0 1 0 1.49H7.786a.745.745 0 0 1 0-1.49h4.094ZM4.986 7.595l1.426 5.42c.014.054.029.107.045.16.292.93.594 1.635.904 2.117.324.503.955.75 1.894.742a2.24 2.24 0 0 0 .324-.012l2.307.009c.409.001.74.333.74.742a.74.74 0 0 1-.74.74H9.729c-.09 0-.181.003-.272.01-1.457.113-2.53-.281-3.221-1.183-.484-.632-.899-1.52-1.244-2.66-.015-.05-.029-.101-.042-.152L3.52 7.894a.71.71 0 0 1 .547-.871.789.789 0 0 1 .92.572ZM7.32 3.5c.69 0 1.25.551 1.25 1.231s-.56 1.231-1.25 1.231a1.24 1.24 0 0 1-1.25-1.23c0-.68.56-1.232 1.25-1.232Z"></path></svg><div class="util_displayHiddenVisually"><slot></slot></div></div><!---->

[blackfalcon]

Icons are 100% presentational. They are not required to be read aloud by a screen reader. Icons are to be accompanied by editable text.

https://accessibility.expedia.biz/pages/5-2

By end of year, we need to have all images accessible by screen reader. This means ALL images. That includes small icons, svgs, background images, scenic images.

I disagree with this statement.

[blackfalcon]

That being said, there is an opportunity to have the aria-hidden attribute made editable for the auro-icon element.

[blackfalcon]

This issue also raises interesting questions. Given that there are some opportunities for icons to be read aloud to screen readers, e.g. the icons that appear in auro-hyperlink, aria-hidden is on the SVG itself, not on the auro-icon element.

While I disagree that ALL icons should be read in screen readers, that's not Auro's call to enforce an opinion on that.

The actual work to be done is with Auro Icons to remove that aria-hidden attribute. Then in the auro-icon element should be updated with an aria attribute that would be set to false by default but will allow the end user to decide if the icon should be read aloud or not.

See the title key in this json file for all the content that would be read back by screen readers. https://github.com/AlaskaAirlines/Icons/blob/master/src/data/icons.json

Additional issues created for this:

• All icons should have a default 'Alt' description  Icons#165
• Remove aria-hidden attribute from icons  Icons#137
• Icon alt-text support  #54
• Accessibility docs #55
• Icons in hyperlinks are not audible accessible auro-hyperlink#134

[blackfalcon]

There is a desire from the business to address this and related issues by the end of 2022.

[jrbromberg]

per our separate email thread, please change the default behavior of auro-icon to be that aria-label is "displayed" / readable by screen readers. i believe you already have descriptions for all of the icons in the aria-labels and they just need to be made accessible. let me know if i can assist with any missing descriptions. Deunan would be another good resource for getting actual copy to include.

[blackfalcon]

Moving this issue to BACKLOG. All work will be tracked in the issues linked to this issue. This issue will remain open until all related work is complete.