Difference between revisions of "ARIA Grid Role"

From Level Access Web Labs
Jump to navigation Jump to search
(Undo revision 2465 by Thomas Logan (talk))
(Undo revision 2466 by Thomas Logan (talk))
Line 144: Line 144:
 
<div id="grid1" tabindex="0" onkeyup="move(event);" class="grid" role="grid" aria-readonly="true" aria-activedescendant="h1a">
 
<div id="grid1" tabindex="0" onkeyup="move(event);" class="grid" role="grid" aria-readonly="true" aria-activedescendant="h1a">
 
   <div role="row" class="row">
 
   <div role="row" class="row">
   
 
 
     <div id="h1a" role="columnheader" class="header cell"> <div>Channel</div> </div>
 
     <div id="h1a" role="columnheader" class="header cell"> <div>Channel</div> </div>
 
     <div id="h1b" role="columnheader" class="header cell"> 1pm </div>
 
     <div id="h1b" role="columnheader" class="header cell"> 1pm </div>
Line 150: Line 149:
 
     <div id="h1d" role="columnheader" class="header cell"> 3pm </div>
 
     <div id="h1d" role="columnheader" class="header cell"> 3pm </div>
 
   </div>
 
   </div>
 +
 
 
   <div role="row" class="row">
 
   <div role="row" class="row">
 
     <ul role="presentation">
 
     <ul role="presentation">
 
       <li aria-labelledby="h1a cell1" id="d1a" class="cell" role="gridcell"> <h3 id="cell1">Channel 1</h3></li>
 
       <li aria-labelledby="h1a cell1" id="d1a" class="cell" role="gridcell"> <h3 id="cell1">Channel 1</h3></li>
       <li aria-labelledby="h1b cell1" id="d1b" class="cell" role="gridcell"> <span id="cell2">Utopia <span class="inner"> (1:00-2:00pm)</span></span></li>
+
       <li aria-labelledby="h1b cell2" id="d1b" class="cell" role="gridcell"> <span id="cell2">Utopia <span class="inner"> (1:00-2:00pm)</span></span></li>
       <li aria-labelledby="h1c cell1" id="d1c" class="cell" role="gridcell"> <span id="cell3">Simpsons <span class="inner"> (2:00-3:00pm)</span></span></li>
+
       <li aria-labelledby="h1c cell3" id="d1c" class="cell" role="gridcell"> <span id="cell3">Simpsons <span class="inner"> (2:00-3:00pm)</span></span></li>
       <li aria-labelledby="h1d cell1" id="d1d" class="cell" role="gridcell"> <span id="cell4">Parks and Rec <span class="inner"> (3:00-4:00pm)</span></span></li>
+
       <li aria-labelledby="h1d cell4" id="d1d" class="cell" role="gridcell"> <span id="cell4">Parks and Rec <span class="inner"> (3:00-4:00pm)</span></span></li>
 
     </ul>
 
     </ul>
 
   </div>
 
   </div>
 
   <div role="row" class="row">
 
   <div role="row" class="row">
 
     <ul role="presentation">
 
     <ul role="presentation">
     <li aria-label"channel 2" aria-labelledby="h1a cell5" id="d2a" role="gridcell" class="cell"> <h3 id="cell5">Channel 2</h3></li>
+
     <li aria-label="channel 2" aria-labelledby="h1a cell5" id="d2a" role="gridcell" class="cell"> <h3 id="cell5">Channel 2</h3></li>
 
     <li aria-labelledby="h1b cell6" id="d2b" role="gridcell" class="cell"> <span id="cell6">Utopia <span class="inner"> (1:00-2:00pm)</span></span></li>
 
     <li aria-labelledby="h1b cell6" id="d2b" role="gridcell" class="cell"> <span id="cell6">Utopia <span class="inner"> (1:00-2:00pm)</span></span></li>
 
     <li aria-labelledby="h1c cell7" id="d2c" style="width:44%;" role="gridcell" class="cell" colspan="2"> <span id="cell7">Star Wars <span class="inner"> (2:00-4:00pm)</span></span></li>
 
     <li aria-labelledby="h1c cell7" id="d2c" style="width:44%;" role="gridcell" class="cell" colspan="2"> <span id="cell7">Star Wars <span class="inner"> (2:00-4:00pm)</span></span></li>
Line 167: Line 167:
 
   <div role="row" class="row">
 
   <div role="row" class="row">
 
     <ul role="presentation">
 
     <ul role="presentation">
       <li aria-labelledby="h1a cell8" id="d3a" class="cell" role="gridcell"><h3 id="cell8"> Channel 3</h3></li>
+
       <li xaria-labelledby="h1a cell8" id="d3a" class="cell" role="gridcell"><h3 id="cell8"> Channel 3</h3></li>
 
       <li aria-labelledby="h1b cell9" id="d3b" class="cell" role="gridcell"> <span id="cell9">News <span class="inner"> (1:00-2:00pm)</span></li>
 
       <li aria-labelledby="h1b cell9" id="d3b" class="cell" role="gridcell"> <span id="cell9">News <span class="inner"> (1:00-2:00pm)</span></li>
 
       <li aria-labelledby="h1c cell10" id="d3c" class="cell" role="gridcell"><span id="cell10"> Paid Ad <span class="inner"> (2:00-3:00pm)</span></li>
 
       <li aria-labelledby="h1c cell10" id="d3c" class="cell" role="gridcell"><span id="cell10"> Paid Ad <span class="inner"> (2:00-3:00pm)</span></li>
       <li aria-labelledby="h1d cell11" id="d3d" class="cell" role="gridcell"> <span id="cell11">Infomercials <span class="inner"> (3:00-4:00pm)</span></li>
+
       <li aria-labelledby="h1d cell11" id="d3d" class="cell" role="gridcell"> <span id="cell11">Infommercials <span class="inner"> (3:00-4:00pm)</span></li>
 
     </ul>
 
     </ul>
 
   </div>
 
   </div>

Revision as of 18:24, 19 April 2016

[remove sidebar to correct CSS]

grid

Channel
1pm
2pm
3pm
  • Channel 1

  • Utopia (1:00-2:00pm)
  • Simpsons (2:00-3:00pm)
  • Parks and Rec (3:00-4:00pm)
  • Channel 2

  • Utopia (1:00-2:00pm)
  • Star Wars (2:00-4:00pm)
  • Channel 3

  • News (1:00-2:00pm)
  • Paid Ad (2:00-3:00pm)
  • Infommercials (3:00-4:00pm)