Difference between revisions of "ARIA Grid Role"

From Level Access Web Labs
Jump to navigation Jump to search
(Undo revision 2466 by Thomas Logan (talk))
(Undo revision 2077 by Jon Avila (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">
Line 160: Line 160:
 
   <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>

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)