WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Two Column Table

for

Number of posts in this thread: 2 (In chronological order)

From: Tim Harshbarger
Date: Mon, Aug 13 2001 3:13PM
Subject: Two Column Table
No previous message | Next message →

Hi,
I need some help. I am trying to come up with as many options as possible for presenting a 2-column table so that it is accessible.
As briefly as possible, this is the layout of the table.
The left column has the heading of "Departmental Competencies." The right hand column is entitled "HR Performance Competencies." The table shows how the departmental competencies relate to the HR competencies. Each HR competency relates to only one departmental competency. However, a single departmental competency may encompass many Human Resources competencies.
I could do a straight table...the left cell naming the departmental competency and the right cell listing all of the HR related competencies. However, I don't think that reads well in a linear fashion.
Are there other ways to show the relationship of the information by using tables differently or using some other construct altogether?
Thanks!
Tim

From: Paul Bohman
Date: Mon, Aug 13 2001 3:55PM
Subject: Re: Two Column Table
← Previous message | No next message

Two Column TableIf you mark up the table appropriately, modern screen
readers will be able to handle it just fine if you put the Departmental
Competencies in the left column and the HR Performance Competencies in the
right column. The code would look something like this:
<table>
<tr>
<th id="dept">Departmental Competencies</th>
<th id="hr">HR Performance Competencies</th>
</tr>
<tr>
<td headers="dept">The first departmental competency</td>
<td headers="hr">List of HR performance competencies</td>
</tr>
etc.
(Notice the ID and the HEADERS elements inside of the TH and TD tags,
respectively.) This would allow the screen reader user to hear the column
headers spoken when listening to each cell individually. The peson would
hear:
Departmental Competencies: The first departmental competency.
HR Performance Competency: List of HR performance competencies.
I think that this organization would work just fine.
An alternative would be to use headings and bullets like this:
<h2>The first Departmental Competency</h2>
<ul>
<li>The first related HR Performance Comptency</li>
<li>The second related HR Performance Comptency</li>
<li>The third related HR Performance Comptency</li>
</ul>
<h2>The second Departmental Competency</h2>
<ul>
<li>The first related HR Performance Comptency</li>
<li>The second related HR Performance Comptency</li>
<li>The third related HR Performance Comptency</li>
</ul>
etc.
This would be a somewhat better linearized format, and would read better in
Lynx. I think that either format suggested above would work, although the
second example has the advantage of explicitly associating the two
competency types, even if the user has an older screen reader.
Paul Bohman
Technology Coordinator
WebAIM: Web Accessibility in Mind (www.webaim.org)
Center for Persons with Disabilities (www.cpd.usu.edu)
Utah State University (www.usu.edu)

----- Original Message -----
From: Tim Harshbarger
To: ' = EMAIL ADDRESS REMOVED = '
Sent: Monday, August 13, 2001 3:09 PM
Subject: Two Column Table

Hi,
I need some help. I am trying to come up with as many options as possible
for presenting a 2-column table so that it is accessible.
As briefly as possible, this is the layout of the table.
The left column has the heading of "Departmental Competencies." The right
hand column is entitled "HR Performance Competencies." The table shows how
the departmental competencies relate to the HR competencies. Each HR
competency relates to only one departmental competency. However, a single
departmental competency may encompass many Human Resources competencies.
I could do a straight table...the left cell naming the departmental
competency and the right cell listing all of the HR related competencies.
However, I don't think that reads well in a linear fashion.
Are there other ways to show the relationship of the information by using
tables differently or using some other construct altogether?
Thanks!
Tim