Difference between revisions of "ARIA Grid Role"

From Level Access Web Labs
Jump to navigation Jump to search
m (Reverted edits by Thomas Logan (talk) to last revision by Jon Avila)
(Undo revision 2465 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 149: Line 150:
 
     <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 cell2" id="d1b" class="cell" role="gridcell"> <span id="cell2">Utopia <span class="inner"> (1:00-2:00pm)</span></span></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="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="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="h1d cell4" 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 cell1" 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 xaria-labelledby="h1a cell8" id="d3a" class="cell" role="gridcell"><h3 id="cell8"> Channel 3</h3></li>
+
       <li aria-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">Infommercials <span class="inner"> (3:00-4: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>
 
     </ul>
 
     </ul>
 
   </div>
 
   </div>

Revision as of 18:23, 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)
  • Infomercials (3:00-4:00pm)