IE support for role=img

121 views
Skip to first unread message

Francis Storr

unread,
Dec 4, 2014, 4:13:57 PM12/4/14
to free...@googlegroups.com
Hi all

I'm working on a project where there's extensive use of css background images. Some of the images need to be exposed to assistive technology and I've managed to get most browsers working with this code:

<h2><span id="username">Han Solo</span>'s employee profile</h2>
<div class="photo" role="img" aria-labelledby="username"></div>

If I do this, I get Firefox, Chrome, and Safari on OSX telling me I have an image with the correct username taken from the aria-labelledby attribute.

I cannot get this working at all on IE for Windows. I've added tabindex="-1" to the div to see if that'll force IE to work, but I get told by JAWS and NVDA that there are no images on the page. I've tried to find information online about IE's support of role="img" and if there are any workarounds, but I've found nothing. I'm testing on IE10 on Windows 8 (can can't upgrade to 11 and 8.1).

Can anyone offer any advice (other than use <img> elements, which isn't a thing that's going to work on this particular project).

Thanks

Francis

Aaron Leventhal

unread,
Dec 4, 2014, 7:41:40 PM12/4/14
to free...@googlegroups.com

Did you try the trick where you put text inside the dig and a large negative text indent to hide the text? Doesn't require aria.

--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to free-aria+...@googlegroups.com.
To post to this group, send email to free...@googlegroups.com.
Visit this group at http://groups.google.com/group/free-aria.
For more options, visit https://groups.google.com/d/optout.

Bryan Garaventa

unread,
Dec 4, 2014, 8:05:54 PM12/4/14
to free...@googlegroups.com

Hi, this is both an IE and a JAWS bug.

 

IE should be naming the image using aria-labelledby, but the Object Inspector shows no name for the image object in the accessibility tree for the Div with role=img+aria-labelledby.

 

It does however do this if you use aria-label or include offscreen text within the container element.

 

Can you report this to IE under Accessibility?

https://connect.microsoft.com/ie

 

Second, JAWS, even if you get the name to be correctly reflected in the accessibility tree within IE, will not correctly announce the presence of the image, as it will in Firefox, at least not in JAWS15 which is what I have installed.

 

Can you confirm this in JAWS16 plus IE11?

 

E.G

 

<div class="photo" role="img" aria-label="This is an image name"></div>

 

If it doesn’t work in 16 either, I’ll file a bug with FS if you don’t wish to do it first.

 

All the best,

Bryan

--

Bryan Garaventa

unread,
Dec 5, 2014, 12:55:05 AM12/5/14
to free...@googlegroups.com

Hi,

As a quick update, this reminded me of an issue we went over earlier this year on the W3C-WAI list, the thread of which is available at

http://lists.w3.org/Archives/Public/public-pfwg/2014Jun/0057.html

So the IE bug is already filed for this issue.

 

Please let me know if this still occurs in JAWS16 however, and I’ll be happy to file it with FS.

Reply all
Reply to author
Forward
0 new messages