E-mail List Archives
Thread: Data Tables in Higher Ed
Number of posts in this thread: 13 (In chronological order)
From: Pamela Riesmeyer
Date: Thu, Oct 11 2012 8:26AM
Subject: Data Tables in Higher Ed
No previous message | Next message →
Data Tables on the Web are the bane of my existence at the moment.
Spreadsheets and charts and so many reports and tables that "must" be put
on the Web.
The simple ones can be created and made accessible from within our
WordPress WYSIWYG editor, but the more complicated ones need HTML expertise
and even then, some are structured so that I'm not sure that the
relationships can be made clear.
Does anyone have any suggestions or resources on teaching people how to
create tables that can be made accessible easily?
I'd be most grateful for any thoughts.
Thanks,
Pam Riesmeyer
--
Pamela Riesmeyer
Web Accessibility Coordinator
Purdue University Calumet
219-989-2731/219-730-2751
SKYPE: pamela.riesmeyer
Email: = EMAIL ADDRESS REMOVED =
Web Site: http://webs.purduecal.edu/webaccessibility
<http://webs.purduecal.edu/webaccessibility>;
From: Corbett, James
Date: Thu, Oct 11 2012 9:12AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
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
From: Pamela Riesmeyer
Date: Thu, Oct 11 2012 9:16AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
On Thu, Oct 11, 2012 at 10:12 AM, Corbett, James <
= EMAIL ADDRESS 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 ADDRESS REMOVED =
Web Site: http://webs.purduecal.edu/webaccessibility
<http://webs.purduecal.edu/webaccessibility>;
From: Corbett, James
Date: Thu, Oct 11 2012 9:24AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
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>
From: Guillermo Alzuru
Date: Thu, Oct 11 2012 9:56AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
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
From: Corbett, James
Date: Thu, Oct 11 2012 9:58AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
Hi:
That's the rub. Essentially they are identical but they are the different examples available from the WCAG site.
Jim
From: Corbett, James
Date: Thu, Oct 11 2012 11:12AM
Subject: Re: FW: Data Tables in Higher Ed
← Previous message | Next message →
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>
From: Pamela Riesmeyer
Date: Thu, Oct 11 2012 11:41AM
Subject: Re: FW: Data Tables in Higher Ed
← Previous message | Next message →
Jim, thanks so much! This will really help!
Pam
On Thu, Oct 11, 2012 at 12:12 PM, Corbett, James <
= EMAIL ADDRESS REMOVED = > wrote:
> 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>
>
>
>
From: Bourne, Sarah (ITD)
Date: Thu, Oct 11 2012 11:41AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
The Government of Canada is putting together an impressive Web Experience Toolkit (WET). One of the features I came across is their "HTML Table Validator".
http://wet-boew.github.com/wet-boew/demos/tableparser/validator-htmltable.html
As long as you have correctly identified table heading cells (TH), the script will figure out the relationships and assign IDs and HEADERs correctly. You can then copy and paste the generated code. It's like magic, only better, because it's real.
Background information, related WCAG references, examples, etc., are available at
http://wet-boew.github.com/wet-boew/demos/tableparser/index-eng.html
sb
Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd
From: Guillermo Alzuru
Date: Thu, Oct 11 2012 11:43AM
Subject: Re: FW: Data Tables in Higher Ed
← Previous message | Next message →
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
From: Pamela Riesmeyer
Date: Thu, Oct 11 2012 11:59AM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
Sarah, thanks so much for this! This will help a lot. I appreciate all of
the input. This is a big issue for us.
Pam
On Thu, Oct 11, 2012 at 12:41 PM, Bourne, Sarah (ITD) <
= EMAIL ADDRESS REMOVED = > wrote:
> The Government of Canada is putting together an impressive Web Experience
> Toolkit (WET). One of the features I came across is their "HTML Table
> Validator".
>
> http://wet-boew.github.com/wet-boew/demos/tableparser/validator-htmltable.html
> As long as you have correctly identified table heading cells (TH), the
> script will figure out the relationships and assign IDs and HEADERs
> correctly. You can then copy and paste the generated code. It's like magic,
> only better, because it's real.
>
> Background information, related WCAG references, examples, etc., are
> available at
> http://wet-boew.github.com/wet-boew/demos/tableparser/index-eng.html
>
> sb
>
> Sarah E. Bourne
> Director of Assistive Technology &
> Mass.Gov Chief Technology Strategist
> Information Technology Division
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/itd
> > > >
--
Pamela Riesmeyer
Web Accessibility Coordinator
Purdue University Calumet
219-989-2731/219-730-2751
SKYPE: pamela.riesmeyer
Email: = EMAIL ADDRESS REMOVED =
Web Site: http://webs.purduecal.edu/webaccessibility
<http://webs.purduecal.edu/webaccessibility>;
From: Corbett, James
Date: Thu, Oct 11 2012 1:19PM
Subject: Re: Data Tables in Higher Ed
← Previous message | Next message →
Sarah:
Yes, I'm currently working on the WET 2.0 conversion and have been testing the WET 3.0 templates with the interest of implmenting such to the public facing sites.
Jim
From: Corbett, James
Date: Thu, Oct 11 2012 1:26PM
Subject: Re: FW: Data Tables in Higher Ed
← Previous message | No next message
Hi:
Two lunches and a large tea steeped.
Table 4:
<td>2011-10-19</td>
Table 5:
<th scope="row">2011-10-19</th>