I was recently asked what an Accessibility Engineer does. This is a pretty common question, since accessibility hasn’t been as well defined as most IT roles. When I interview for positions, I sometimes shake my head at questions that feel like I’m taking a mid-term. I can only assume the person interviewing is attempting to assess my knowledge of issues in a manner that can easily be looked up and validated.

Data tables must use correct markup for headers and data cells

Complex data tables are any data table with more than one row or column of header cells and/or multiple levels.

Data tables must identify the header cells that label the data cells in the same column or row. Indicating that a cell is a header cell via the th element allows screen readers and other assistive technologies to identify data tables from layout tables and provide properly navigate within them.

All cells in a table header row or column must use (th) consistently and must define either an id or a scope attribute for each cell in a heahttp://westcoastcreative.org/wcc/administrator/index.php?option=com_content&view=article&layout=edit&id=215#der row or column. When data table header row/columns inconsistently use some (th) elements and some (td) elements and the header cells are not identified with an id element with corresponding header element assigned to each (td), assistive technology may not allow the user to properly determine the relationship between data and header elements.

HTML Example

<table> 
   
  <tbody> 
    <tr> 
      <th colspan="10" id="ri">Requester
Information</th> 
    </tr> 

    <tr> 
      <th colspan="1" id="name">Name</th> 
      <td colspan="7" headers="name">Jon
Smith</td> 
      <th colspan="1" id="date">Date</th> 
      <td colspan="1"
headers="date">9/9/2005</td> 
    </tr> 

    <tr> 
      <th colspan="1"
id="dept">Department</th> 
      <td colspan="9" headers="ri dept">Customer
Service</td> 
    </tr> 
...
</tbody>
</table>

HTML Fail

<table> 
 
  <tbody> 
    <tr> 
      <th>Requester Information</th> 
    </tr> 

    <tr> 
      <th colspan="1" >Name</th> 
      <td colspan="7" >Jon Smith</td> 
      <th colspan="1" >Date</th> 
      <td colspan="1" >9/9/2005</td> 
    </tr> 

    <tr> 
      <th colspan="1" >Department</th> 
      <td colspan="9" >Customer Service</td> 
    </tr> 

...
</tbody>
</table>

Remediating

Specify table headers for the table utilizing the th element. Upon identifying table headers, ensure that the headers are properly associated with table content.

For complex tables with multiple levels/headers, split up a complex table into multiple simple tables, or identify header elements with an id so that each data cell (td) has a header attribute that references the id attributes of the th elements that are headers for the data cell.

For each complex data tables with two or more rows of logical headers, an id attribute will give the header a unique identifier and allow it to be explicitly associated with table data cells - each of which would then be given a headers attribute to complete the association.

Testing

Recommended tool/method: Manual / AMP

Ensure data table headers are properly identified (Manual)

1. Locate a data table within a page
2. View the source of the page
3. View the individual headers within the data table
4. Determine if the header elements are surrounded by the th element

Ensure data table headers are properly identified (Guided Automatic)

Data Table Headers (AMP Desktop Preview Functions)

InFocus Check: Preview the page with table borders and headers.

1. Open the desired page within InFocus
2. Activate Preview > Show Table Borders and Headers (Control+Alt+W)
3. Review the page to verify that all borders and headers are properly identified.

I've read many articles and posts on creating an effective alt attribute. How long should it be? When do you leave it blank (null)? Why is this so important?

Let's take a step back and look at the why of the alt attribute. Their only purpose is to provide information to blind users. All sighted users can see the image and do not rely on a text description in order to understand an image. So all we are concerned with here is the blind user using a screen reader to access the content of the page.

Title

Description.

iOS

iOS description

iOS Example

iOS Example

iOS Failure

iOS Failure

Android

Android description

Android Example

Android Example

Android Failure

Android Failure

HTML

HTML Description

HTML Example

HTML Example

HTML Failure

HTML Failure  

Testing