Flat Hierarchy Grid

Hello everyone,

I wanted to bring up a use case related to the grid role where the grid 
hierarchy is enforced with CSS rather than markup. It is fairly common 
among many mobile web applications that use CSS heavily to structure 
markup into things like lists and grids. The HTML in many cases looks 
flat, for example:

<section role="grid">
   <div role="gridcell">Cell 1</div>
   ...
   <div role="gridcell">Cell N</div>
</section>

And the CSS, used to make it look like a grid is:

<style>
   section div {
     width: calc(100% / 4);
     display: inline-block;
     ...
   }
</style>

As you can see, an element with a row role is missing in this case. 
Which makes it pretty difficult to handle the grid -> role -> gridcell 
relation since it's enforced exclusively with CSS.

I had a question regarding the strictness of the requirement of having 
an explicit row container and I was wondering if it would be reasonable 
to have an aria-rows and an aria-cols attributes or something similar as 
an alternative? These attributes could be defined by the author. 
aria-rows would define the number of rows in the grid and aria-cols 
would define the number of columns. The browser in this case would be 
capable of determining the gridcell position within the grid based on 
those attributes and the actual position in the existing flat markup. 
The first example then would look like this:

<section role="grid" aria-rows="3" aria-cols="4">
   <div role="gridcell">Cell 1</div> // Row 1 Column 1
   ...
   <div role="gridcell">Cell N</div> // Row 3 Column 4
</section>

Thanks,

Yura Zenevich

Received on Wednesday, 28 May 2014 13:34:22 UTC