Bug 158390 – AX: Voice Over focus issue ignoring <object> elements

• Component: Accessibility
• Status: NEW

[hexalys]

Created attachment 280542 [details]
Repro of bug for Voice Over latest iOS 9.3.2

On iOS 9.3.2, Voice Over ignore a link with an SVG object. It appears to considers the link empty of content.

The external SVG pattern is commonly used as fallback for browser not supporting SVG.
<object type="image/svg+xml" data="svg/vector.svg">Link 2</object>

See attached reduced repro.

[Radar WebKit Bug Importer]

<rdar://problem/26640630>

[hexalys]

To be clear, what I was trying to achieve is the following cross-compatible external SVG logo:

<a id="logo" href="/" aria-label="Homepage" title="Company Name">
 <object type="image/svg+xml" data="logo.svg">
   <img href="logo.png" width="300" height="104" alt="Company Name">
 </object>
</a>

The reason for my choice of <object> as fallback is that if images are disabled in Safari, Dolphin or Vivaldi Browser (where it is an explicit user feature). I still want the site's main SVG logo to show. The <svg><image> fallback solutions fail at that (except for Opera Mini which considers an svg <image> as SVG despite images turned off).

Using role="img" on the object happens to be a work-around making the link focus work in iOS VO, and fits well with my use case. So this works in iOS and addresses the bug:

<a id="logo" href="/" aria-label="Homepage" title="Company Name">
 <object role="img" type="image/svg+xml" data="logo.svg">
   <img href="logo.png" width="300" height="104" alt="Company Name">
 </object>
</a>

Of course, it require a z-index method such as the one described at http://stackoverflow.com/a/12732030/1647538 to make that link hover-able and clickable in all browsers.

The issue here that an <object> inside a link should still receive focus without the ARIA role.