WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Semantically pointless?

for

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

From: Pete Fairhurst
Date: Mon, Mar 13 2006 9:50AM
Subject: Semantically pointless?
No previous message | Next message →

[Been following the WebAIM list for a little while, but this is my first
post so be gentle!]

I'm working on some forums templates and was interested to know if the
following is semantic garbage, were it to be viewed by a screen reader:

<p><b><img src="/images/icons/topic-new.gif" alt="New topic"/></b>:
indicates that topics have been created in this forum since your last
visit.</p>
<p><b><img src="/images/icons/topic-frozen.gif" alt="Frozen topic"/></b>:
indicates that the topic is no longer accepting new posts - it has been
effectively 'frozen'.</p>

Ideally, I'd think something like a definition list would be best suited to
what I'm trying to convey. But, as definition term elements cannot contain
markup, I'm opting for this simpler alternative.

- Pete F.
_________

"A committee is a cul-de-sac down which ideas are lured
and then quietly strangled." -Sir Barnett Cocks
_________



From: Karl Groves
Date: Mon, Mar 13 2006 10:10AM
Subject: RE: Semantically pointless?
← Previous message | Next message →

Pete -

<b> serves no purpose, other than visual.
If your goal is to indicate "semantic" importance, you should use <strong>,
which is read with a stronger emphasis by screen readers.


Karl L. Groves
User-Centered Design, Inc.
Office: 703-729-0998
Mobile: 571-214-1714
E-Mail: = EMAIL ADDRESS REMOVED =
Web: http://www.user-centereddesign.com
<http://www.user-centereddesign.com/>;




_____

From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pete Fairhurst
Sent: Monday, March 13, 2006 11:43 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Semantically pointless?


[Been following the WebAIM list for a little while, but this is my first
post so be gentle!]

I'm working on some forums templates and was interested to know if the
following is semantic garbage, were it to be viewed by a screen reader:

<p><b><img src="/images/icons/topic-new.gif" alt="New topic"/></b>:
indicates that topics have been created in this forum since your last
visit.</p>
<p><b><img src="/images/icons/topic- frozen.gif" alt="Frozen topic"/></b>:
indicates that the topic is no longer accepting new posts - it has been
effectively 'frozen'.</p>

Ideally, I'd think something like a definition list would be best suited to
what I'm trying to convey. But, as definition term elements cannot contain
markup, I'm opting for this simpler alternative.

- Pete F.
_________

"A committee is a cul-de-sac down which ideas are lured
and then quietly strangled." -Sir Barnett Cocks
_________




From: Pete Fairhurst
Date: Mon, Mar 13 2006 10:40AM
Subject: Re: Semantically pointless?
← Previous message | Next message →

On 13/03/06, Karl Groves < = EMAIL ADDRESS REMOVED = > wrote:
>
> <b> serves no purpose, other than visual. If your goal is to indicate
> "semantic" importance, you should use <strong>, which is read with a
> stronger emphasis by screen readers.
>

In that case, would I be correct in assuming that simply replacing the <b>
elements surrounding either image would produce the desired result within a
screen reader?

- Pete F.
_________

"A committee is a cul-de-sac down which ideas are lured
and then quietly strangled." -Sir Barnett Cocks
_________



From: Karl Groves
Date: Mon, Mar 13 2006 10:50AM
Subject: RE: Semantically pointless?
← Previous message | Next message →

Yes, replacing it with <strong> should give the result you're after.
I recommend getting a screen reader so you can actually test it.


Karl L. Groves
Director of Web Development
User-Centered Design, Inc.
Office: 703-729-0998
Mobile: 571-214-1714
E-Mail: = EMAIL ADDRESS REMOVED =
Web: http://www.user-centereddesign.com
<http://www.user-centereddesign.com/>;




_____

From: Pete Fairhurst [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, March 13, 2006 12:34 PM
To: = EMAIL ADDRESS REMOVED = ; WebAIM Discussion List
Subject: Re: [WebAIM] Semantically pointless?


On 13/03/06, Karl Groves < = EMAIL ADDRESS REMOVED = > wrote:

<b> serves no purpose, other than visual.
If your goal is to indicate "semantic" importance, you should use <strong>,
which is read with a stronger emphasis by screen readers.


In that case, would I be correct in assuming that simply replacing the <b>
elements surrounding either image would produce the desired result within a
screen reader?

- Pete F.
_________

"A committee is a cul-de-sac down which ideas are lured
and then quietly strangled." -Sir Barnett Cocks
_________




From: Kynn Bartlett
Date: Mon, Mar 13 2006 3:20PM
Subject: Re: Semantically pointless?
← Previous message | Next message →

Has anyone tested this and can confirm that <b> and <strong> are treated
differently by screenreaders?

--Kynn


On 3/13/06, Karl Groves < = EMAIL ADDRESS REMOVED = > wrote:
>
> Yes, replacing it with <strong> should give the result you're after.
> I recommend getting a screen reader so you can actually test it.
>
>
> Karl L. Groves
> Director of Web Development
>



From: Kynn Bartlett
Date: Mon, Mar 13 2006 3:40PM
Subject: Re: Semantically pointless?
← Previous message | Next message →

On 3/13/06, Pete Fairhurst < = EMAIL ADDRESS REMOVED = > wrote:
>
> Ideally, I'd think something like a definition list would be best suited
> to what I'm trying to convey. But, as definition term elements cannot
> contain markup, I'm opting for this simpler alternative.
>

This is an incorrect statement.

<dt> elements can (and usually do) contain markup. They are restricted to
%inline content only, but in your example you seem to be using only <b> and
<img> elements, which are inline, and thus allowable.

This would also be a good place to use the CSS display property's value of
"run-in":

dt { display: run-in; }

(PS: I do agree that <strong> is probably better than <b> in most cases, but
in this case I'm not convinced it makes any difference.)

--Kynn



From: Pete Fairhurst
Date: Tue, Mar 14 2006 3:20AM
Subject: Re: Semantically pointless?
← Previous message | Next message →

On 13/03/06, Kynn Bartlett < = EMAIL ADDRESS REMOVED = > wrote:
>
> On 3/13/06, Pete Fairhurst < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Ideally, I'd think something like a definition list would be best suited
> > to what I'm trying to convey. But, as definition term elements cannot
> > contain markup, I'm opting for this simpler alternative.
> >
>
> This is an incorrect statement.
>
> <dt> elements can (and usually do) contain markup. They are restricted to
> %inline content only, but in your example you seem to be using only <b> and
> <img> elements, which are inline, and thus allowable.
>

Thanks for the clarity, Kynn. I've updated my markup as follows:

<dl id="forum-key">
<dt><img src="/images/icons/topic-new.gif" alt="New topic"/></dt>
<dd>Indicates that topics have been created in this forum since your
last visit.</dd>
<dt><img src="/images/icons/topic- frozen.gif" alt="Frozen topic"/></dt>
<dd>Indicates that the topic is no longer accepting new posts - it has
been effectively 'frozen'.</dd>
</dl>

Pretty satisfied with that - any further comments or recommendations,
anyone?

- Pete F.
http://gamer.newsvine.com/
_________

"A committee is a cul-de-sac down which ideas are lured
and then quietly strangled." -Sir Barnett Cocks
_________



From: Kilcommons,Cath
Date: Tue, Mar 14 2006 7:50PM
Subject: RE: Semantically pointless?
← Previous message | No next message

Snip
I'm working on some forums templates and was interested to know if the
following is semantic garbage, were it to be viewed by a screen reader:

<p><b><img src="/images/icons/topic-new.gif" alt="New topic"/></b>:
indicates that topics have been created in this forum since your last
visit.</p>
<p><b><img src="/images/icons/topic- frozen.gif" alt="Frozen
topic"/></b>: indicates that the topic is no longer accepting new posts
- it has been effectively 'frozen'.</p>

Ideally, I'd think something like a definition list would be best suited
to what I'm trying to convey. But, as definition term elements cannot
contain markup, I'm opting for this simpler alternative. snip

Semantically speaking, doesn't it seem a bit odd to be defining a
picture? Don't you really want to be defining two catagories? How about
using the icon as a bullet replacement with a css class and make it a ul
or an ol ? If there are more than two forums, this might work for your
purposes.....
<div class="available">
<ul>
<li id="C">C Forum - Unread Items Available </li>
<li id="K">K Forum - Unread Items Available</li>
</ul>

<div class="not available">
<ul>
<li id="X">X Forum - Not accepting new items</li>
<li id="Y">Y Forum - Not accepting new items</li>
</ul>

then define your two classes in your style sheet, and you can use the id
tags to help organize your forum.

Regards,
Cath

Cath Stager-Kilcommons
ACCESS Project
Assistive Technology Resource Center (ATRC)
Colorado State University
970-491-0788
http://www.colostate.edu/Depts/ATRC/
<http://www.colostate.edu/Depts/ATRC/>;
= EMAIL ADDRESS REMOVED =