This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Denne tråden ble arkivert. Still et nytt spørsmål dersom du trenger hjelp.

Is there a bug with firefox when supporting "aria-labelledby" attribute for <span> element?

zxffirefoxsupport
zxffirefoxsupport
more options

I use firefox 10.0.3, and using JAWS 13 to read the screen. I set the "aria-labelledby" attribute for the span, and only first element content was read even I set three 'id' for this attribute. This can work well under IE8. 

<table role="grid" summary="Details table">
<tr>
	<td type="columnTitle"><span tabIndex="0" role="gridcell">Date</span></td>
	<th id="_NS_hdr1" role="columnheader" type="columnTitle"><span tabIndex="-1" role="columnheader">3/4</span></th>
	<th id="_NS_hdr2" role="columnheader" type="columnTitle"><span tabIndex="-1" role="columnheader">3/11</span></th>
	<th id="_NS_hdr3" role="columnheader" type="columnTitle"><span tabIndex="-1" role="columnheader">3/18</span></th>
	<th id="_NS_hdr4" role="columnheader" type="columnTitle"><span tabIndex="-1" role="columnheader">3/25</span></th>
</tr>
<tr>
	<th id="_NS_hdr5" role="rowheader" type="columnTitle"><span tabIndex="-1" role="rowheader">Count</span></th>
	<td headers="_NS_hdr1 _NS_hdr5" type="datavalue">
	<span tabIndex="-1" id="_NS_N158B5CC0.1614A0C80" role="gridcell" aria-labelledby="_NS_hdr1 _NS_hdr5 _NS_N158B5CC0.1614A0C80">0</span>
	</td>
	<td headers="_NS_hdr2 _NS_hdr5" type="datavalue">
	<span tabIndex="-1" id="_NS_N158B5CC0.1614A1200" role="gridcell" aria-labelledby="_NS_hdr2 _NS_hdr5 _NS_N158B5CC0.1614A1200">75</span></td>
	<td headers="_NS_hdr3 _NS_hdr5" type="datavalue">
	<span tabIndex="-1" id="_NS_N158B5CC0.1614A1780"  role="gridcell" aria-labelledby="_NS_hdr3 _NS_hdr5 _NS_N158B5CC0.1614A1780">231</span>
	</td>
	<td headers="_NS_hdr4 _NS_hdr5" type="datavalue">
	<span tabIndex="-1" id="_NS_N158B5CC0.1614A1D00" role="gridcell" aria-labelledby="_NS_hdr4 _NS_hdr5 _NS_N158B5CC0.1614A1D00">81</span>
	</td>
</tr>
</table>
I use firefox 10.0.3, and using JAWS 13 to read the screen. I set the "aria-labelledby" attribute for the span, and only first element content was read even I set three 'id' for this attribute. This can work well under IE8. <pre>&lt;table role="grid" summary="Details table"&gt; &lt;tr&gt; &lt;td type="columnTitle"&gt;&lt;span tabIndex="0" role="gridcell"&gt;Date&lt;/span&gt;&lt;/td&gt; &lt;th id="_NS_hdr1" role="columnheader" type="columnTitle"&gt;&lt;span tabIndex="-1" role="columnheader"&gt;3/4&lt;/span&gt;&lt;/th&gt; &lt;th id="_NS_hdr2" role="columnheader" type="columnTitle"&gt;&lt;span tabIndex="-1" role="columnheader"&gt;3/11&lt;/span&gt;&lt;/th&gt; &lt;th id="_NS_hdr3" role="columnheader" type="columnTitle"&gt;&lt;span tabIndex="-1" role="columnheader"&gt;3/18&lt;/span&gt;&lt;/th&gt; &lt;th id="_NS_hdr4" role="columnheader" type="columnTitle"&gt;&lt;span tabIndex="-1" role="columnheader"&gt;3/25&lt;/span&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th id="_NS_hdr5" role="rowheader" type="columnTitle"&gt;&lt;span tabIndex="-1" role="rowheader"&gt;Count&lt;/span&gt;&lt;/th&gt; &lt;td headers="_NS_hdr1 _NS_hdr5" type="datavalue"&gt; &lt;span tabIndex="-1" id="_NS_N158B5CC0.1614A0C80" role="gridcell" aria-labelledby="_NS_hdr1 _NS_hdr5 _NS_N158B5CC0.1614A0C80"&gt;0&lt;/span&gt; &lt;/td&gt; &lt;td headers="_NS_hdr2 _NS_hdr5" type="datavalue"&gt; &lt;span tabIndex="-1" id="_NS_N158B5CC0.1614A1200" role="gridcell" aria-labelledby="_NS_hdr2 _NS_hdr5 _NS_N158B5CC0.1614A1200"&gt;75&lt;/span&gt;&lt;/td&gt; &lt;td headers="_NS_hdr3 _NS_hdr5" type="datavalue"&gt; &lt;span tabIndex="-1" id="_NS_N158B5CC0.1614A1780" role="gridcell" aria-labelledby="_NS_hdr3 _NS_hdr5 _NS_N158B5CC0.1614A1780"&gt;231&lt;/span&gt; &lt;/td&gt; &lt;td headers="_NS_hdr4 _NS_hdr5" type="datavalue"&gt; &lt;span tabIndex="-1" id="_NS_N158B5CC0.1614A1D00" role="gridcell" aria-labelledby="_NS_hdr4 _NS_hdr5 _NS_N158B5CC0.1614A1D00"&gt;81&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre>

Endret av cor-el

Valgt løsning

Hi!

I think you do not need the ARIA markup for what you are trying to accomplish. Firefox has very sophisticated algorithms to correctly make data tables accessible. You already use row and column headers inside the table, and you use the headers attribute etc. You do not need the extra role and aria-labelledby markup to make the table work as you want. JAWS 13 also supports this table interface and should just work without all the WAI-ARIA stuff. I even believe because we have this sophisticated table interface, most of the ARIA markup is ignored inside correctly marked-up data tables.

Give it a try without all the ARIA markup and report back if you still have any problems.

Note that Firefox 11 even improves a couple of these things in data tables even further, so you might want to update.

Les dette svaret i sammenhengen 👍 0

All Replies (3)

Madasan
Madasan
  • Moderator
  • Administrator
more options

Hi!

Hmm, this is a bit tricky, let me try to find the right person to look into this. I can get back to you when we have more info.

Thanks

Madalina

MarcoZ
MarcoZ
more options

Valgt løsning

Hi!

I think you do not need the ARIA markup for what you are trying to accomplish. Firefox has very sophisticated algorithms to correctly make data tables accessible. You already use row and column headers inside the table, and you use the headers attribute etc. You do not need the extra role and aria-labelledby markup to make the table work as you want. JAWS 13 also supports this table interface and should just work without all the WAI-ARIA stuff. I even believe because we have this sophisticated table interface, most of the ARIA markup is ignored inside correctly marked-up data tables.

Give it a try without all the ARIA markup and report back if you still have any problems.

Note that Firefox 11 even improves a couple of these things in data tables even further, so you might want to update.

zxffirefoxsupport
zxffirefoxsupport Eieren av spørsmålet
more options

Hi MacroZ,

I understand your point. JAWS support different ways to navigate the page, such as use 'tab' key to navigate clickable items, or use 'Ctrl+Alt+arrow keys' to navigate the data table cells.

I removed the 'gridcell' role from data cells and when I use 'Ctrl+Alt+arrow keys', it works well(I move to one cell, and it can read column title, then row title, then cell value). So it's acceptable because at least we have one way to read this data table :)

There is one more thing I want to ask, I have one page that include one iframe, and the page inside the iframe has several hyper links, I start JAWS13, then use 'tab' key to navigate these links inside the iframe page, when I navigate to one link, I press 'enter' key to goto the new page, then I found all links in the new page do not work when I navigate to any of them and press 'enter' key(it can works well when using mouse click). Seems there's no problem under IE8, I'm not sure this issue comes from JAWS or firefox, so hope you can help to confirm on this, many thanks!