RE: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile

According the SVG accessible API mappings – browsers should consider them decorative when they exist inside of a button and not interactive and don’t have explicit accessible name.

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


Jonathan

From: Subramanian, Poornima (PCL) <psubramanian@hagroup.com>
Sent: Tuesday, September 15, 2020 2:44 PM
To: jsaiya@formatdata.com; w3c-wai-ig@w3.org
Subject: RE: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Hi Jim,

The id "#icon-open-close" in our svg library. This is how all of the Svgs work on the site. ​
And, what is odd, the link has the proper aria-label on it, and the svg has been set to aria-hidden, so the svg should not be the issue

Thank you

Best,
Poornima

From: Jim Saiya <jsaiya@formatdata.com<mailto:jsaiya@formatdata.com>>
Sent: Tuesday, September 15, 2020 9:21 AM
To: Subramanian, Poornima (PCL) <psubramanian@hagroup.com<mailto:psubramanian@hagroup.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Re: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile

Poornima,

What does the href "#icon-open-close" refer to?

  Jim Saiya
Senior Software Engineer
Ann Arbor, MI

✆ 703.731.5119
✉ jsaiya@formatdata.com<mailto:jsaiya@formatdata.com>
[in] www.linkedin.com/in/jimsaiya<https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.linkedin.com%2Fin%2Fjimsaiya&data=02%7C01%7Cpsubramanian%40hagroup.com%7C59ae4e5005ad4fa35c8108d859934ae9%7C9e37b9e905de4906b089536f19689074%7C0%7C0%7C637357836866432600&sdata=ulqf6FXjnrHwDJD2XNDRRAqiW2IgB90itzlSCgKr2BY%3D&reserved=0>

On Tue, 15 Sep 2020 15:57:15 +0000, "Subramanian, Poornima (PCL)" <psubramanian@hagroup.com<mailto:psubramanian@hagroup.com>> wrote:

Hi All,

A SVG image button not functioning on iOS 13 mobile device with Voice Over. We tried couple of fixes like e.g. aria-hidden on SVG. It’s strange the same button is working on Desktop with JAWS / NVDA, but only on iOS 13, it’s not working.

Below is its markup, any suggestions for the fixes?

<button class="mfp-close icon-no-text" data-test-id="mfp-close" aria-label="Close">
<svg class="svg-icon svg-icon-open-close">
<use xlink:href="#icon-open-close"></use>
</svg></button>

.mfp-content .mfp-close.icon-no-text {
    background: transparent;
    height: 44px;
    width: 44px;
    opacity: 1;
    position: absolute;
    margin: 0;
    top: 7px;
    right: -10px;
    text-indent: 0;
    border-radius: initial;
    padding: 0;
    text-align: center;
}
.mfp-content .mfp-close.icon-no-text > svg {
    color: #000;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    pointer-events: none;
}

Thank you

Best,
Poornima
The information contained in this email and any attachment may be confidential and/or legally privileged and has been sent for the sole use of the intended recipient. If you are not an intended recipient, you are not authorized to review, use, disclose or copy any of its contents. If you have received this email in error please reply to the sender and destroy all copies of the message. Thank you.

To the extent that the matters contained in this email relate to services being provided by Princess Cruises and/or Holland America Line (together "HA Group") to Carnival Australia/P&O Cruises Australia, HA Group is providing these services under the terms of a Services Agreement between HA Group and Carnival Australia.