RE: Grid and aria-owns question

Bryan, Yes, that is an extremely important point. Do not use the grid role
unless you are going to implement grid navigation. 

 

From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com] 
Sent: Friday, April 28, 2017 2:56 PM
To: Lars Holm Sørensen <lhs@diversa.dk>; w3c-wai-ig@w3.org
Subject: RE: Grid and aria-owns question

 

“I am trying to construct a simple data table”

 

If this is the case, then role=”table” should be used in combination with
role=”cell” for this purpose, since role=”grid” plus role=”gridcell” is
meant to be an interactive construct.

 

E.G Table

http://whatsock.com/training/matrices/#table

 

As opposed to Grid

http://whatsock.com/training/matrices/#grid

 

Bryan Garaventa

Accessibility Fellow

SSB BART Group, Inc.

bryan.garaventa@ssbbartgroup.com <mailto:bryan.garaventa@ssbbartgroup.com> 

415.624.2709 (o)

www.SSBBartGroup.com <http://www.SSBBartGroup.com> 

 

From: Lars Holm Sørensen [mailto:lhs@diversa.dk] 
Sent: Thursday, April 27, 2017 7:40 AM
To: w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> 
Subject: Grid and aria-owns question

 

Hello WAI list

 

I am trying to construct a simple data table, from some list data by
applying role=”grid”, role=”row”, role=”columnheader”, role=”gridcell” and
aria-owns.

 

In my simple example I try to construct a grid with 2 columns and 3 rows.
Column 1 for fruits and column 2 for vegetables.

The first row is a header row and then follows two rows with data.

 

 

When testing with Jaws I get the expected result in Chrome. A grid with 2
columns and 3 rows and I can navigate it using the Jaws table navigation
keys.

 

However in IE and FF I get different results.

 

They both show the header row perfectly.

 

Then follows two rows where each row only has a single column, but still in
that single column it reads the data from both column 1 and column 2.

 

Then follows four columns, each showing data from one of the four gridcells.

 

Here comes the Jaws output from going through the grid by just pressing down
arrow IN ff:

 

grid with 2 columns and 5 rows
Fruits
Vegetables
Apple Potato
row 
Banana Cucumber
row 
Apple
Banana
Potato
Cucumber
grid end

 

 

Here comes the code:

 

<div role="grid" aria-readonly="true">

 

<!-- The header row. -->

<div role="row">

<ul>

<li role="columnheader">Fruits</li>

<li role="columnheader">Vegetables</li>

</ul>

</div> 

<!-- eof header row-->

 

 

<!-- Add content to row one in the accessibility tree by using aria-owns.-->

<div role="row" id="row1" aria-owns="row1_col1 row1_col2"></div>

 

<!-- Add content to row to in the accessibility tree by using aria-owns.-->

<div role="row" id="row2" aria-owns="row2_col1 row2_col2"></div>

 

 

 

<!-- The two lists with the data we want to go into the grid.-->

<ul   id="col1">

<li role="gridcell" id="row1_col1">Apple</li>

<li role="gridcell" id="row2_col1">Banana</li>

</ul>

 

<ul  id="col2">

<li role="gridcell" id="row1_col2">Potato</li>

<li role="gridcell"  id="row2_col2" >Cucumber</li>

</ul>

 

</div>

<!-- eof grid-->

 

 

Do you have any ideas why it doesn’t  work the way I expect it to in IE and
FF?

 

Am I using aria-owns in an inappropriate way?

 

 

Best regards:

Lars Holm Sørensen 

 

 

 

De bedste hilsner

Lars Holm Sørensen

Diversa ApS

Tlf: 25 21 17 41

www.Diversa.dk <http://www.diversa.dk/> 

 

Udelukker du 10% - 20% af brugerne fra din hjemmeside? Se videoen!
<https://www.youtube.com/watch?v=CM9lgzNBvZA> 

 <https://www.youtube.com/watch?v=CM9lgzNBvZA>