0

I have a table which contains a 'Select All' checkbox as the first column in the header row.

The problem is column headers make perfectly sense when they represent the data type of their columns but the content of this th is just a checkbox with a "Select All" label.

As it is now, it sets a relationship with all the checkboxes in its column, we're basically saying that all the checkboxes are someway related to "Select All".

Is there any way to markup a 'Select All' checkbox in the table header so the relationship in terms of labeling is broken with all the checkboxes below it?

I've read that changing the th in the table header that houses the 'Select All' checkbox to a td will solve this (and it does), but was curious if there's another solution that wouldn't require me to affect the markup of the header.

Screen reader reads as follows for the checkbox table header and table cell:

This is a table of Manage Courses. table with 3 rows and 6 columns row 1 Select all items in this table column 1 Select all items in this table checkbox not checked

row2 Select all items in this table column 1 Dev ILT 1 checkbox not checked

As you can see announcing the select checkbox for the course 'Dev ILT 1' as 'Select all items in this table' is misleading

Code example. This is just the header and body section. Not all rows or headers are listed in the code example as it's not relevant

<thead>
<tr class="thead-main">        
    <th align="center" scope="col" valign="top" class="colheadcheckbox">  
        <input type="checkbox" aria-label="Select all items in this table" onclick="SelectAllCheckbox.CheckUncheckAll(this, 'selectedID')" id="SelectAll">
        <label for="SelectAll"><span class="hidden">Select all items in this table.</span></label>
    </th>            
    <th scope="col" align="left" valign="middle" class="colhead"> 
        <a href="?reverseSortBy=Name" title="Sort this column by descending order" class="sortdown"> 
        <span>   Name  </span>  
        <img src="/geonext/images/skins/simple/schemes/dalmatian/indicator_sort_up.png" width="9" height="9" border="0" alt="This column is sorted by ascending order" title="This column is sorted by ascending order">  </a> 
    </th>         
    <th scope="col" align="left" valign="top" class="colhead">  
        <a href="?sortBy=Code" title="Sort this column by ascending order">   Course Code  </a> 
    </th>          
    <th scope="col" align="left" valign="top" class="colhead">  
        <a href="?sortBy=class" title="Sort this column by ascending order">   Type  </a> 
    </th>          
</tr>
</thead>
<tbody>   
<tr class="first odd">            
    <td align="center" valign="middle" class="">  
        <input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID2" value="2"> 
        <label for="selectedID2"><span class="hidden"> 2</span></label>
    </td>            
    <td class="sorted" align="Left"> 
        <label for="selectedID2"><a href="/editcourse.geo?id=2">Dev ILT 1</a> 
        </label> 
    </td>             
    <td align="Left"> ILT1 </td>             
    <td align="Left"> Instructor Led </td>                
</tr>    
<tr class="even">            
    <td align="center" valign="middle" class="">  
        <input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID1" value="1"> 
        <label for="selectedID1"><span class="hidden"> 1</span> </label>  
    </td>            
    <td class="sorted" align="Left">
        <label for="selectedID22507408476"><a href="/editcourse.geo?id=1">Dev UDT 1</a></label> 
    </td>             
    <td align="Left"> UDT1 </td>             
    <td align="Left"> User Defined Task </td>                   
</tr>        '
</tbody>
Blobula
  • 189
  • 5
  • 13

3 Answers3

0

I'm having a hard time understanding how 'Select All' is a valid heading. The heading is meant to provide context for the data in the associated cells. Used properly, a screenreader will read out the heading as you navigate into the column/row.

If someone navigates from a cell in the second column into a cell in the first, it would theoretically read

"[h1]Select All checkbox unchecked[/h1] [td]input-label checkbox unchecked[td]"

(square bracket content added for clarity - if you are navigating from one column to the next, the column header is read out before the data for each new column you navigate into)

This hardly provides context as to what the checkbox is. The 'Select All' checkbox should more likely be used as the last element or even a footer element rather than a heading.

It's hard to fully understand without a code example, but I would suggest never including functional elements in a table heading. It's intended for phrasing content.

Skerrvy
  • 902
  • 8
  • 17
  • Thanks for posting the code. It seems like I was on the right track. the 'Select all items in this table' is not a column heading. This `th` is meant to provide context for what the items in this column signify. This is why it is read out again when the screenreader reaches the first `td` in row 2. I don't know the context of your table so I can't suggest a proper table heading, but I found this guide useful when learning about semantically correct tables: http://webaim.org/techniques/tables/data . I hope this can help. I would suggest putting the 'select all' in the foot after the table data – Skerrvy Oct 07 '16 at 01:08
0

Kind of a side issue but hopefully if you're using <th> for all your other column headings, you're also using the scope= property too. Don't force the screen reader to guess whether your <th> is a row header or column header. Valid values for scope are 'row', 'col', 'rowgroup', and 'colgroup'. (The 'group' names are for spanned rows and columns.)

It sounds like you'd like a scope=none, analogous to role=none (in ARIA 1.1). There isn't such a thing. If a cell in a table is not supposed to be a header, then <th> shouldn't be used. Making it a <td> is the proper way to mark it up.

Now, you might be able to fake it if you use a header= on the <td> elements in your first column to disassociate them from their column header, but I haven't tried that. I'm not sure what happens if you have a properly marked <th> and then a <td header='foo'> below it, where 'foo' is another object on your page. The screen reader might still read the column header. It might be worth a try, though.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • My comment is assuming your first column header of "select all" contains data cells below it that are also checkboxes, which each checkbox a selector for the row. The checkbox for the row should have an aria-label that specifies what the user will be selecting. – slugolicious Oct 06 '16 at 19:58
0

As you spotted well, the first cell is not a header, change it to a td

<td align="center" valign="top" class="colheadcheckbox">  
    <input type="checkbox" aria-label="Select all items in this table" 
           title="Select all items in this table" onclick="..." />
</td>
  • There is no use of using aria-label when you already provide a label
  • You may use the title attribute to give an hint for non screenreader users who want understand what is this checkbox; title is correctly supported by screenreaders when used on control elements.

You could also consider a two rows solution using rowspan=2 attribute for other columns:

 <tr>
    <th scope="col">Select</th><th rowspan="2" scope="col">... </th>
 </tr><tr>
    <td><label><input type="checkbox" onclick="..." />All</label></td>
 </tr>

Making the "Select" and "All" text visible will make the things clearer.

You also should reconsider the label of your other checkboxes as 1, 2, 3, ... are not very descriptive.

<input type="checkbox" id="selectedID1" value="1" title="Select Dev UDT 1" />
Adam
  • 17,838
  • 32
  • 54