WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: FW: Data Tables in Higher Ed

for

From: Guillermo Alzuru
Date: Oct 11, 2012 11:43AM

Well, I may have to owe you two because I still don't see a difference. Here is that cell in table 4:

<th scope="row">2011-10-19</th>

And this the same cell in table 5:

<th scope="row">2011-10-19</th>

Am I missing something? Is it possible that I may not understand what you are saying?

Guillermo
Guillermo Alzuru
Web Instructional Development
University of Georgia
Center for Continuing Education #189B
http://webiduga.com



-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Corbett, James
Sent: Thursday, October 11, 2012 1:12 PM
To: W-Aim ( <EMAIL REMOVED> )
Subject: [WebAIM] FW: Data Tables in Higher Ed

Hi:

Here is the difference, and you owe me a lunch break:

In #5, the first cell of the row is considered a header:
<th scope="row">2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>


-----Original Message-----
From: Corbett, James
Sent: October 11, 2012 11:59 AM
To: 'WebAIM Discussion List'
Subject: RE: [WebAIM] Data Tables in Higher Ed

Hi:

That's the rub. Essentially they are identical but they are the different examples available from the WCAG site.

Jim

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Guillermo Alzuru
Sent: October 11, 2012 11:56 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Data Tables in Higher Ed

This is very useful James!

One question, what is the difference between tables 4 and 5? I don't see a difference.

Table with markup and full scope and Table with proper header and scope

Thanks,

Guillermo
Guillermo Alzuru
Web Instructional Development
University of Georgia
Center for Continuing Education #189B
http://webiduga.com


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Corbett, James
Sent: Thursday, October 11, 2012 11:25 AM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] Data Tables in Higher Ed

Pamela:

Your wish is my command.

<html>
<head>
<title>
Adaptive Technologies and the Web (Tables Example) </title>
</head>
<body>
<h1>Plain Table</h1>
<table width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<td>Start Date</td>
<td>Language</td>
<td>Cost</td>
<td>Location</td>
<td>Type</td>
<td>Status</td>
</tr>
<tr>
<td>2011-10-19</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-10-26</td>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-07</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-14</td>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-23</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-28</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-12-05</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-12-19</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2012-02-21</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with markup and summary</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th>Start Date</th>
<th>Language</th>
<th>Cost</th>
<th>Location</th>
<th>Type</th>
<th>Status</th>
</tr>
<tr>
<th>2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with markup and scope on header</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th scope="col">Start Date</th>
<th scope="col">Language</th>
<th scope="col">Cost</th>
<th scope="col">Location</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
<tr>
<th>2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with markup and full scope</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th scope="col">Start Date</th>
<th scope="col">Language</th>
<th scope="col">Cost</th>
<th scope="col">Location</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
<tr>
<th scope="row">2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with proper header and scope</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th scope="col">Start Date</th>
<th scope="col">Language</th>
<th scope="col">Cost</th>
<th scope="col">Location</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
<tr>
<th scope="row">2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table using id</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th id="sd">Start Date</th>
<th id="ln">Language</th>
<th id="c">Cost</th>
<th id="l">Location</th>
<th id="t">Type</th>
<th id="s">Status</th>
</tr>
<tr>
<td headers="sd">2011-10-19</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-10-26</td>
<td headers="ln">French</td>
<td headers="c">$900.00</td>
<td headers="l">Gatineau</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-07</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-14</td>
<td headers="ln">French</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-23</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-28</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-12-05</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-12-19</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2012-02-21</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
</table>

</body>
</html>

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Pamela Riesmeyer
Sent: October 11, 2012 11:16 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Data Tables in Higher Ed

On Thu, Oct 11, 2012 at 10:12 AM, Corbett, James < <EMAIL REMOVED> > wrote:

> Hi:
>
> I can provide you with the source code of a page I use for demos. The
> page has five tables that are all WCAG 2.0 AA compliant and work with
> JAWS. If interested just let me know.
>
> Jim
>
>
Thanks, Jim. I would very much like to see that demo page source code!
Pam

--

Pamela Riesmeyer
Web Accessibility Coordinator
Purdue University Calumet
219-989-2731/219-730-2751
SKYPE: pamela.riesmeyer
Email: <EMAIL REMOVED>
Web Site: http://webs.purduecal.edu/webaccessibility
<http://webs.purduecal.edu/webaccessibility>;