WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Sep 15, 2020 10:15AM

Hi
What does Voiceover announce when you swipe to / touch this button?
You can add role="presentation" to the <svg> but given that it is a
button and that it already has its accessible name from aria-label
that should not be necessary.


On 9/15/20, Subramanian, Poornima (PCL) < <EMAIL REMOVED> > 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.
> > > > >


--
Work hard. Have fun. Make history.