WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Aditya
Date: Sep 15, 2020 10:41AM

Try adding role="img" and aria-label="close" on svg.




Sent from my iPhone

> On Sep 15, 2020, at 11:15 AM, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>
> 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.
> > > >