SV: Grid and aria-owns question

Hi all,

Thanks for your comments and suggestions.

Bryan you are right, role table and cell is more appropriate in this case. I changed it, but the result is still the same.

Matt I added role=presentation to the <ul> elements. That made a small difference. Now I actually get a table I can navigate with the table navigation keys. Still after the table the screen reader reads all the data once again so all content is presented twice.

I will report it as a bug to FF and IE.

My reason for this “creative structure” is that I have a web developer who created a large table-like structure that shows many columns of data. Each column is made from an <ul> element. When I ask him to change it to a <table> his response is that he can’t, because a <table> wouldn’t adapt to the responsive design.

That is why I came up with the idea to add this kind of table structure to the existing <ul> elements.

Do you have any alternative suggestions that might work for this problem?

 

Matt you mentioned to build the rows from the list data via a script. Can you say a bit more about how you would go about that?

 

Best regards,

Lars

 

                             

 

De bedste hilsner

Lars Holm Sørensen

Diversa ApS

Tlf: 25 21 17 41

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

 

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

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

 

Fra: Matt King [mailto:a11ythinker@gmail.com] 
Sendt: Saturday, April 29, 2017 12:37 AM
Til: 'Bryan Garaventa' <bryan.garaventa@ssbbartgroup.com>; 'Beranek, Nicholas' <Nicholas.Beranek@capitalone.com>; 'Lars Holm Sørensen' <lhs@diversa.dk>; w3c-wai-ig@w3.org
Emne: RE: Grid and aria-owns question

 

That would destroy the structure where each UL represents a column.

 

I believe the structure that Lars has should work. It matches the definition of aria-owns. And, It works in Chrome.

 

That said, script to build the rows from the list datasets might ultimately perform better; there are a lot of potential issues with scaling what Lars has. Nonetheless,       if they have sound engineering reason for building a grid in that way, they should be able to             do it.

 

Matt

 

 

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

 

Yes, if you want the UL elements that include multiple gridcells to work as separate rows, then these need to be divided by container elements that have role=”row”.

 

 

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: Beranek, Nicholas [mailto:Nicholas.Beranek@capitalone.com] 
Sent: Thursday, April 27, 2017 7:52 AM
To: Lars Holm Sørensen <lhs@diversa.dk <mailto:lhs@diversa.dk> >; w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> 
Subject: Re: Grid and aria-owns question

 

Hi Lars,

 

I’m going to venture a guess that this is because your `gridcell` and `columnheader` elements are not *direct* descendants of their respective `rows`.

 

For example:

 

<div role=”row”>

<div role=”columnheader”>Fruits</div>

</div>

 

<div role=”row”>

            <div role=”gridcell”>Apple</div>

</div>

 

Try to do it this way and test again. You may also find the same behavior on Safari for Mac.

 

--
Nick Beranek
Digital Accessibility Team

 

From: Lars Holm Sørensen <lhs@diversa.dk <mailto:lhs@diversa.dk> >
Organization: Diversa
Date: Thursday, April 27, 2017 at 10:40 AM
To: "w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> " <w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> >
Subject: Grid and aria-owns question
Resent-From: "w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> " <w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> >
Resent-Date: Thursday, April 27, 2017 at 10:40 AM

 

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> 

 

 

  _____  

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.