WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: FW: Data Tables in Higher Ed

for

From: Pamela Riesmeyer
Date: Oct 11, 2012 11:41AM

Jim, thanks so much! This will really help!
Pam

On Thu, Oct 11, 2012 at 12:12 PM, Corbett, James <
<EMAIL 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>
>
>
> -----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>;
> > > messages to <EMAIL REMOVED> > > messages to <EMAIL REMOVED>
>
>
> > > > > > >



--

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>;