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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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>

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 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

Isisombululo Esikhethiwe

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 Umnikazi wombuzo
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!