WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Definition list vs. Table

for

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

From: adam solomon
Date: Fri, Dec 24 2010 4:48AM
Subject: Definition list vs. Table
No previous message | Next message →

Let us say I have a web page which contains information about a particular
individual. The content would look like this:

first name: john
last name: doe
telephone: 111-1111
city: beverly hills
state: california

Which of the following would be the preferable html markup from a semantics
perspective?

<dl>
<dt>first name</dt><dd>john</dd>
<dt>last name</dt><dd>doe</dd>
<dt>telephone</dt><dd>111-1111</dd>
<dt>city</dt><dd>beverly hills</dd>
<dt>state</dt><dd>california</dd>
</dl>


or:

<table>
<tr>
<th>first name</th><td>john</td>
</tr>
<tr>
<th>last name</th><td>doe</td>
</tr>
<tr>
<th>telephone</th><td>111-1111</td>
</tr>
<tr>
<th>city</th><td>beverly hills</td>
</tr>
<tr>
<th>state</th><td>california</td>
</tr>
</table>

How much support is the table alternative given in screen readers?
Would the following also be supported and valid?
<table>
<tr>
<th>first name</th><td>john</td><th>last
name</th><td>doe</td><th>telephone</th><td>111-1111</td><th>city</th><td>beverly
hills</td><th>state</th><td>california</td>
</tr>
</table>

Thanks in advance for any insight.
--
adam solomon
linkedin <http://il.linkedin.com/pub/adam-solomon/24/449/a4>;
blogix <http://adam.blogix.co.il/>;

From: Patrick Dunphy
Date: Fri, Dec 24 2010 5:48AM
Subject: Re: Definition list vs. Table
← Previous message | Next message →

Adam - I would avoid tables. Have you investigated microformats?
Look at the hCard spec.

Did a quick search and this is a good example.

http://www.rachaelmoore.name/web-design/microformats/hcard-contact-info/

-PD

On Friday, December 24, 2010, adam solomon < = EMAIL ADDRESS REMOVED = > wrote:
> Let us say I have a web page which contains information about a particular
> individual. The content would look like this:
>
> first name: john
> last name: doe
> telephone: 111-1111
> city: beverly hills
> state: california
>
> Which of the following would be the preferable html markup from a semantics
> perspective?
>
> <dl>
> <dt>first name</dt><dd>john</dd>
> <dt>last name</dt><dd>doe</dd>
> <dt>telephone</dt><dd>111-1111</dd>
> <dt>city</dt><dd>beverly hills</dd>
> <dt>state</dt><dd>california</dd>
> </dl>
>
>
> or:
>
> <table>
> <tr>
> <th>first name</th><td>john</td>
> </tr>
> <tr>
> <th>last name</th><td>doe</td>
> </tr>
> <tr>
> <th>telephone</th><td>111-1111</td>
> </tr>
> <tr>
> <th>city</th><td>beverly hills</td>
> </tr>
> <tr>
> <th>state</th><td>california</td>
> </tr>
> </table>
>
> How much support is the table alternative given in screen readers?
> Would the following also be supported and valid?
> <table>
> <tr>
> <th>first name</th><td>john</td><th>last
> name</th><td>doe</td><th>telephone</th><td>111-1111</td><th>city</th><td>beverly
> hills</td><th>state</th><td>california</td>
> </tr>
> </table>
>
> Thanks in advance for any insight.
> --
> adam solomon
> linkedin <http://il.linkedin.com/pub/adam-solomon/24/449/a4>;
> blogix <http://adam.blogix.co.il/>;
>

From: Jared Smith
Date: Fri, Dec 24 2010 8:57AM
Subject: Re: Definition list vs. Table
← Previous message | Next message →

On Fri, Dec 24, 2010 at 4:39 AM, adam solomon
< = EMAIL ADDRESS REMOVED = > wrote:
> Let us say I have a web page which contains information about a particular
> individual. The content would look like this:
>
> first name: john
> last name: doe
> telephone: 111-1111
> city: beverly hills
> state: california

Why isn't this sufficient? This is by far the easiest, most
straightforward presentation of this information. I see no benefit
from using a list or table. All it would do is overburden the author
and present additional information to the user that is not necessary.

You could use microformats in addition to this, but no assistive
technology I know of utilizes them.

Jared

From: Birkir RĂșnar Gunnarsson
Date: Fri, Dec 24 2010 9:27AM
Subject: Re: Definition list vs. Table
← Previous message | Next message →

Hi

I have a slightly different perspective on this, as a screen reader user.
If you have a lot of user information on a page, providing it without
a structure is a big inconvenience to a screen reader user.
Providing the info as a list or a table allows screen reader users to
quickly jump between users using an html shortcut key, like "l" to
jump to next list or "t" to jump to next table.
I have many problems with www.nhl.com/scores but I love their format
during live games, each game has its own table with game information
that is updated every minute or so, it is easily navigable, if I want
to follow the fifth game of the night I simply press t five times and
get straight to it. If I had to use the arrow keyes or tab to get
through all the other information before getting there it would take
forever, plus the page refreshes and would put me back on top before I
got a chance to find the info I want.
I believe all the major screen readers have one key shortcuts to find
next table or list on a page, usually t for table and l for list.


So, if we are talking about one or two person whose info you want to
display, sure, you can use plain text and no html mark up so I agree
with Jared in that scenario.
But if you are displaying more, say 3 to 6 users, you can create an
unorderred list for every user. That way the uscreen reader user can
use "l" to jump between them until they find the user first name they
are looking for.

If you have more users I'd recommend a table with one row ffor each
user. Screen Readers generally cope quite well with tables so this
would be the quickest way to present such info in my opinion,
especially if you can keep the users listed in a predictable order,
such as alphabetical.

Thanks and happy holidays.
-Birkir


On 12/24/10, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> On Fri, Dec 24, 2010 at 4:39 AM, adam solomon
> < = EMAIL ADDRESS REMOVED = > wrote:
>> Let us say I have a web page which contains information about a particular
>> individual. The content would look like this:
>>
>> first name: john
>> last name: doe
>> telephone: 111-1111
>> city: beverly hills
>> state: california
>
> Why isn't this sufficient? This is by far the easiest, most
> straightforward presentation of this information. I see no benefit
> from using a list or table. All it would do is overburden the author
> and present additional information to the user that is not necessary.
>
> You could use microformats in addition to this, but no assistive
> technology I know of utilizes them.
>
> Jared
>

From: adam solomon
Date: Sat, Dec 25 2010 3:24PM
Subject: Re: Definition list vs. Table
← Previous message | Next message →

Despite you reassurances, I'm still wary of not marking up this html at all.
After all, we do have relationships between the data. In addition, I would
prefer one standard which I can advise all of our developers to adopt all of
the time. Sonetimes we have larger lists of data (though always one user for
the sake of argument), and sometimes shorter ones. Wouldn't it be better to
have one standard for them so that we don't lose out on the larger lists?
If, as Jared seems to indicate, the markup is a burden, then I should in
fact take it on a case by case basis. But, if it is only unnecessary (for
shorter lists), then I would be more comfortable instituting one markup
standard for all of our lists. As such, it wouldn't hurt and often would
help, as I understood from Birkir. I would still like to hear which of the
two options is preferable under the circumstances (unless you all are dead
set against any markup). Thanks in advance.

2010/12/24 Birkir RĂșnar Gunnarsson < = EMAIL ADDRESS REMOVED = >

> Hi
>
> I have a slightly different perspective on this, as a screen reader user.
> If you have a lot of user information on a page, providing it without
> a structure is a big inconvenience to a screen reader user.
> Providing the info as a list or a table allows screen reader users to
> quickly jump between users using an html shortcut key, like "l" to
> jump to next list or "t" to jump to next table.
> I have many problems with www.nhl.com/scores but I love their format
> during live games, each game has its own table with game information
> that is updated every minute or so, it is easily navigable, if I want
> to follow the fifth game of the night I simply press t five times and
> get straight to it. If I had to use the arrow keyes or tab to get
> through all the other information before getting there it would take
> forever, plus the page refreshes and would put me back on top before I
> got a chance to find the info I want.
> I believe all the major screen readers have one key shortcuts to find
> next table or list on a page, usually t for table and l for list.
>
>
> So, if we are talking about one or two person whose info you want to
> display, sure, you can use plain text and no html mark up so I agree
> with Jared in that scenario.
> But if you are displaying more, say 3 to 6 users, you can create an
> unorderred list for every user. That way the uscreen reader user can
> use "l" to jump between them until they find the user first name they
> are looking for.
>
> If you have more users I'd recommend a table with one row ffor each
> user. Screen Readers generally cope quite well with tables so this
> would be the quickest way to present such info in my opinion,
> especially if you can keep the users listed in a predictable order,
> such as alphabetical.
>
> Thanks and happy holidays.
> -Birkir
>
>
> On 12/24/10, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> > On Fri, Dec 24, 2010 at 4:39 AM, adam solomon
> > < = EMAIL ADDRESS REMOVED = > wrote:
> >> Let us say I have a web page which contains information about a
> particular
> >> individual. The content would look like this:
> >>
> >> first name: john
> >> last name: doe
> >> telephone: 111-1111
> >> city: beverly hills
> >> state: california
> >
> > Why isn't this sufficient? This is by far the easiest, most
> > straightforward presentation of this information. I see no benefit
> > from using a list or table. All it would do is overburden the author
> > and present additional information to the user that is not necessary.
> >
> > You could use microformats in addition to this, but no assistive
> > technology I know of utilizes them.
> >
> > Jared
> >

From: Accessibility India
Date: Sun, Dec 26 2010 8:27AM
Subject: Re: Definition list vs. Table
← Previous message | Next message →

yes, for a single candidates information plane mark-up will be fine as
jared suggested. I feel if we have information of more candidates it
is better to provide some level of headings saying candidate 1 etc
instead of lists or tables which may not be correct in the present
scenario.
eg: <h2>Candidate 1 info</h2>
> first name: john
> last name: doe
> telephone: 111-1111
> city: beverly hills
> state: california
<h2> Candidate 2 info</h2>
> first name: john
> last name: doe
> telephone: 111-1111
> city: beverly hills
> state: california
This helps the screen reader user to jump directly to the required information.
Thanks & regards
Rakesh





On 12/24/10, adam solomon < = EMAIL ADDRESS REMOVED = > wrote:
> Let us say I have a web page which contains information about a particular
> individual. The content would look like this:
>
> first name: john
> last name: doe
> telephone: 111-1111
> city: beverly hills
> state: california
>
> Which of the following would be the preferable html markup from a semantics
> perspective?
>
> <dl>
> <dt>first name</dt><dd>john</dd>
> <dt>last name</dt><dd>doe</dd>
> <dt>telephone</dt><dd>111-1111</dd>
> <dt>city</dt><dd>beverly hills</dd>
> <dt>state</dt><dd>california</dd>
> </dl>
>
>
> or:
>
> <table>
> <tr>
> <th>first name</th><td>john</td>
> </tr>
> <tr>
> <th>last name</th><td>doe</td>
> </tr>
> <tr>
> <th>telephone</th><td>111-1111</td>
> </tr>
> <tr>
> <th>city</th><td>beverly hills</td>
> </tr>
> <tr>
> <th>state</th><td>california</td>
> </tr>
> </table>
>
> How much support is the table alternative given in screen readers?
> Would the following also be supported and valid?
> <table>
> <tr>
> <th>first name</th><td>john</td><th>last
> name</th><td>doe</td><th>telephone</th><td>111-1111</td><th>city</th><td>beverly
> hills</td><th>state</th><td>california</td>
> </tr>
> </table>
>
> Thanks in advance for any insight.
> --
> adam solomon
> linkedin <http://il.linkedin.com/pub/adam-solomon/24/449/a4>;
> blogix <http://adam.blogix.co.il/>;
>

From: Benjamin Hawkes-Lewis
Date: Sun, Dec 26 2010 8:39AM
Subject: Re: Definition list vs. Table
← Previous message | No next message

On Fri, Dec 24, 2010 at 11:39 AM, adam solomon
< = EMAIL ADDRESS REMOVED = > wrote:
> How much support is the table alternative given in screen readers?

Table implementations are pretty lousy, but fine for simple affairs like this.

I last had a close look at "dl" implementations in 2008:

http://webaim.org/discussion/mail_thread?thread=3463

I've generally avoided "dl" as being hopelessly ambiguous as something
for a user agent to base a UI on. Is it a description list? Is it a
definition list? Is it a series of name-value pairs? Is it a dialog?
etc.

--
Benjamin Hawkes-Lewis