search

AlaskaAirlines / auro-icon

Custom HTML element for the use of easily displaying an icon from the Auro Icon library
https://auro.alaskaair.com/components/auro/icon
Apache License 2.0
0 stars 4 forks source link

Auro icon screen reader availability #46

Open jrbromberg opened 2 years ago

jrbromberg commented 2 years ago

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:

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

jrbromberg commented 2 years ago

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

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

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

blackfalcon commented 2 years ago

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:

blackfalcon commented 2 years ago

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

jrbromberg commented 1 year ago

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 commented 1 year ago

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.