E-mail List Archives

Search E-mail List Archives for

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

From: Randall Pope
Date: Wed, Jan 09 2008 4:10PM
Subject: Tags to Represent Questions
No previous message | Next message →

Hi Everyone,

Sorry if my question sounds a little basic but I need to figure out what the
best way in building accessible FAQ pages.

I'm trying to find a best way to tag the question and answer that can be
understood by the screen readers. At first I thought about using the <p>
tag for both questions and answers. But then I thought the questions are
not really a paragraph but perhaps there is something that can represent the
question better than using the <p> tags. Is there a better way to represent
the question to inform the screen reader that a question is between the
tags? Many thanks for any information.

Take care,
Randy Pope

From: Jared Smith
Date: Wed, Jan 09 2008 4:30PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

On 1/9/08, Randall Pope < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Everyone,
>
> Sorry if my question sounds a little basic but I need to figure out what the
> best way in building accessible FAQ pages.
>
> I'm trying to find a best way to tag the question and answer that can be
> understood by the screen readers.

I've always used definition lists for this.

<dl>
<dt>Is this the best way to handle an FAQ question?</dt>
<dd>Probably not, but I can't think of anything better.</dd>
...
</dl>

While you might question if this is an appropriate use of <dl>, you
can't argue that it provides an appropriate association and visual
rendering for questions and answers.

Jared Smith
WebAIM

From: Robinson, Norman B
Date: Wed, Jan 09 2008 4:40PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

Standard markup HTML with simple language usually works the best for my
screen reader. Is there a reason you desire a "question" tag? It doesn't
sound like you are using forms - are you?

If you have a lot of content then either break it up into multiple pages
or provide an index to the questions.

Regards,

Norman B. Robinson

From: Jen Rohrig
Date: Wed, Jan 09 2008 4:50PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

For more info Mike Cherim of Beast-Blog talks about using definition
lists for Q&A's here: http://green-beast.com/blog/?p=185

Jen

Jared Smith wrote:
> On 1/9/08, Randall Pope < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi Everyone,
>>
>> Sorry if my question sounds a little basic but I need to figure out what the
>> best way in building accessible FAQ pages.
>>
>> I'm trying to find a best way to tag the question and answer that can be
>> understood by the screen readers.
>>
>
> I've always used definition lists for this.
>
> <dl>
> <dt>Is this the best way to handle an FAQ question?</dt>
> <dd>Probably not, but I can't think of anything better.</dd>
> ...
> </dl>
>
> While you might question if this is an appropriate use of <dl>, you
> can't argue that it provides an appropriate association and visual
> rendering for questions and answers.
>
> Jared Smith
> WebAIM
>

From: Benjamin Hawkes-Lewis
Date: Wed, Jan 09 2008 5:00PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

I'd suggest using headings:

<h1>Frequently Asked Questions</h1>

…

<div id="faq1">
<h2>Is this the best way to handle a frequently asked question?</h2>
<p>Perhaps.</p>
</div>

AFAIK all current screen reader releases allow users to skip from
heading to heading. I'm not aware of a screen reader that allows users
to skip easily from DT element to DT element.

--
Benjamin Hawkes-Lewis

From: Moore, Michael
Date: Thu, Jan 10 2008 6:50AM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

The definition list provides the closest semantically correct method of
marking up an FAQ list, although if you really want to split hairs you
may argue the point. Headings are definitely improper semantic markup.
Screen readers, (JAWS and Window Eyes) do not provide any special
support for definition lists, you can't navigate from one question to
the next. Headings would allow you to navigate by question but would
not significantly improve navigation through large lists of questions.
I would recommend grouping the questions into manageable sections,
marking them up as a definition list, and separating the sections with
meaningful headings. This will provide the best support to everyone.

Mike Moore

From: Jukka K. Korpela
Date: Thu, Jan 10 2008 7:10AM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

Moore, Michael wrote:

> The definition list provides the closest semantically correct method
> of marking up an FAQ list, although if you really want to split hairs
> you may argue the point.

There's no case for splitting hairs. A question is not a term and an
answer is not a definition for a term. If you want to split hairs or
play with semantics, you may claim that the W3C _means_ a description
list or annotated list or sequence of pairs, despite their use of
"definition" and "term".

> Headings are definitely improper semantic markup.

Heading markup is quite adequate for something that is a heading for the
subsequent text. The most important problem for using it for questions
is that a question is often long, longer than a heading should normally
be.

Then again, a long question is an understandability problem, hence an
accessibility problem. The question used as a heading should present the
essence of the question, not every detail and context info. It may be
followed by an explanatory paragraph that expresses the question in more
detail, or such explanations can be given in the answer.

In some cases, table markup could be appropriate. After all, a list of
questions and answers is essentially a two-dimensional structure can be
expressed as a table, with questions in one column and answers in the
other. When the question is marked up as a header cell, TH element, some
user agents may have some special accessibility support via the
association of headers with data. But this approach is in practice
limited by the fact that the questions would need to be fairly short to
make the common visual rendering reasonable, and the answers shouldn't
be too long either. For a list of short technical questions with short
technical answers, this might work, though.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

From: Keith Parks
Date: Thu, Jan 10 2008 12:50PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

On Jan 10, 2008, at 11:26 AM, Andy Mabbett wrote:

>
>
> uses the "id" attribute semantically, and could equally apply to other
> elements. You could also add class attributes of "question" and
> "answer", too; and add a class of "FAQ" to the DL.

But how does that relate to accessibility?

Aren't IDs and Classes part of the "presentation" (css), and separate
from the "content" (html)?

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

World Peace through Cascading Style Sheets.

From: Andy Mabbett
Date: Thu, Jan 10 2008 1:00PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

In message
< = EMAIL ADDRESS REMOVED = >, Jared
Smith < = EMAIL ADDRESS REMOVED = > writes

><dl>
><dt>Is this the best way to handle an FAQ question?</dt>
><dd>Probably not, but I can't think of anything better.</dd>
>...
></dl>

This:

<dl>
<dt id="question-1">Is this the best way to handle an FAQ question?</dt>
<dd id="answer-1">Probably not, but I can't think of anything
better.</dd>
<dt id="question-2">Can it be improved?</dt>
<dd id="answer-2">Yes.</dd>
...
</dl>

uses the "id" attribute semantically, and could equally apply to other
elements. You could also add class attributes of "question" and
"answer", too; and add a class of "FAQ" to the DL.

Use two-digit numbers ("01", "02" etc.) if you have more than nine
questions. (If you have more than 99 questions, you have more pressing
problems to consider...)

--
Andy Mabbett
* Say "NO!" to compulsory UK ID Cards: <http://www.no2id.net/>;
* Free Our Data: <http://www.freeourdata.org.uk>;
* Are you using Microformats, yet: <http://microformats.org/>; ?

From: Tim Beadle
Date: Fri, Jan 11 2008 7:50AM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

On 10/01/2008, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
> Aren't IDs and Classes part of the "presentation" (css), and separate
> from the "content" (html)?

They're hooks into specific parts of the document, and styling is just
one usage scenario; DOM scripting is another, and element IDs can be
used as fragment anchor (#elementid) urls in modern browsers. There
may be more uses in the future.

Tim

From: Andy Mabbett
Date: Fri, Jan 11 2008 2:40PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

In message < = EMAIL ADDRESS REMOVED = >, Keith
Parks < = EMAIL ADDRESS REMOVED = > writes

>
>On Jan 10, 2008, at 11:26 AM, Andy Mabbett wrote:
>
>>
>>
>> uses the "id" attribute semantically, and could equally apply to other
>> elements. You could also add class attributes of "question" and
>> "answer", too; and add a class of "FAQ" to the DL.
>
>But how does that relate to accessibility?
>
>Aren't IDs and Classes part of the "presentation" (css), and separate
>from the "content" (html)?

No; they're HTML and thus content; more precisely content-labels; and
identify which content is which, so that the styles can be applied to
it.

See also:

<http://www.w3.org/TR/html401/struct/global.html#h-7.5.2>;

7.5.2 Element identifiers: the id and class attributes

Attribute definitions

id = name [CS]

This attribute assigns a name to an element. This name
must be unique in a document.

class = cdata-list [CS]

This attribute assigns a class name or set of class
names to an element. Any number of elements may be
assigned the same class name or names. Multiple class
names must be separated by white space characters.

The id attribute assigns a unique identifier to an element
(which may be verified by an SGML parser). For example, the
following paragraphs are distinguished by their id values:

The id attribute has several roles in HTML:

* As a style sheet selector.

* As a target anchor for hypertext links.

* As a means to reference a particular element from a
script.

* As the name of a declared OBJECT element.

* For general purpose processing by user agents (e.g. for
identifying fields when extracting data from HTML pages
into a database, translating HTML documents into other
formats, etc.).

The class attribute, on the other hand, assigns one or more
class names to an element; the element may be said to belong to
these classes. A class name may be shared by several element
instances. The class attribute has several roles in HTML:

* As a style sheet selector (when an author wishes to
assign style information to a set of elements).

* For general purpose processing by user agents.


--
Andy Mabbett
* Say "NO!" to compulsory UK ID Cards: <http://www.no2id.net/>;
* Free Our Data: <http://www.freeourdata.org.uk>;
* Are you using Microformats, yet: <http://microformats.org/>; ?

From: Keith Parks
Date: Fri, Jan 11 2008 3:10PM
Subject: Re: Tags to Represent Questions
← Previous message | Next message →

On Jan 11, 2008, at 6:49 AM, Tim Beadle wrote:

> On 10/01/2008, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>> Aren't IDs and Classes part of the "presentation" (css), and separate
>> from the "content" (html)?
>
> They're hooks into specific parts of the document, and styling is just
> one usage scenario; DOM scripting is another, and element IDs can be
> used as fragment anchor (#elementid) urls in modern browsers. There
> may be more uses in the future.


> On Jan 11, 2008, at 1:35 PM, Andy Mabbett wrote:
>> No; they're HTML and thus content; more precisely content-labels; and
>> identify which content is which, so that the styles can be applied to
>> it.

OK, I stand corrected. That was imprecise on my part. Code-wise, they
*are* part of html.

But what about first part of my question?

> But how does that relate to accessibility?

Other than defining them in an audio style sheet (which from what
I've heard are essentially unsupported still, right?), what would be
the value of having IDs that associate specific questions with
specific answers? How would that tagging be recognized and applied in
some useful way by a screen reader?

Thanks,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: Benjamin Hawkes-Lewis
Date: Fri, Feb 01 2008 4:00PM
Subject: Re: Tags to Represent Questions
← Previous message | No next message

I wrote earlier:

> AFAIK all current screen reader releases allow users to skip from
> heading to heading. I'm not aware of a screen reader that allows users
> to skip easily from DT element to DT element.

Now I am. Sorry, I should have double-checked this before writing. One
of the most popular screen readers allows jumping to the next definition
list item, although otherwise support is rather poor. Here's a rundown
with a selection of screen readers:

* JAWS: Version 5.0 introduced support for announcing definition lists
as "definition list of X items", inserting an equals sign between term
and definition, and moving from one list (of any sort) to the next. JAWS
6.0 introduced support for jumping from one item in a definition list to
another, effectively allowing skipping to the next term. See the "HTML
Lists" topic in their respective manuals (you can get those from the
Freedom Scientific website and WayBack). However, the emphasis of the
JAWS documentation and UI on the use of DL for definitions of terms is
not germane to its use for FAQ. Moreover, you still cannot list all
defined terms on a page. By contrast, you can jump to and list headings,
either generically or by level, and when listing headings you can start
typing to match one.

* Window-Eyes 6.1: According to the manual, this screen reader supports
definition lists. You can move to the next list (of any sort) and, once
in a list, move to the next list item:

http://www.gwmicro.com/Window-Eyes/Manual/HTML/19_9lists.htm

But I can't actually get this to work with Firefox 2 or IE7, though
possibly I'm doing something wrong. Window-Eyes supports announcing,
jumping to, and listing headings, either generically or by level.

* Dolphin HAL 8.01: Apparently no special support for definition lists,
but does support jumping to and listing headings:

http://www.yourdolphin.com/online_tutorials.asp?id=14

* VoiceOver on OS X Tiger (tested with Safari 3.0.4): No special support
for definition lists. Announces headings but not level. The feature list
for Leopard mentions the following:

> Quickly navigate long documents or web pages. Jump to key elements
> like headers, tables, and links and by text attributes like
> underlining, bold, italics, and color — even text phrases.

http://www.apple.com/macosx/features/300.html#universalaccess

I don't have a Leopard system to test what that means in practice.

* Orca (development build with Firefox 3 development build): No special
support for definition lists. Announces headings and allows jumping to
headings either generically or by level.

* FireVox 3.6: No special support for definition lists. Supports
announcing, jumping to, and listing headings, generically or by level.

* NVDA (development build with Firefox 2): Announces definition
lists ("definition list of four items bullet programmer bullet coder
definition a person who writes software"), but while jumping from list
to list works, jumping from definition item to definition item currently
does not. NVDA announces heading level and allows you to jump to
headings.

The above notwithstanding, I see (as yet) no reason to agree with Mike
Moore's contention that "Headings are definitely improper semantic
markup" for an FAQ. I suspect most FAQs can be fit into a heading
scheme or a DL-based scheme, although one or the other may be more
appropriate for particular cases. For example, if multiple questions are
being grouped to be answered together, that might lend itself more to a
DL-based scheme using multiple "terms" simultaneously "defined". I don't
see anything semantically wrong with the use of headings for:

http://www.w3.org/MarkUp/2004/xhtml-faq

http://www.webstandards.org/learn/faq/

Nor do I see anything semantically wrong with the use of a DL for:

http://www.mozilla.org/support/firefox/faq

http://tldp.org/FAQ/Linux-FAQ/common-problems.html

However, in cases where both markup variations are judged equally
appropriate in semantic terms, headings have greater accessibility
benefits, given the level of support and the presentation to end-users
outlined above. I don't see how the additional navigation options for
headings, to quote Mike again, "would not significantly improve
navigation through large lists of questions". For example, if your
assistive technology does not have any definition list features, and
answers feature multiple paragraphs, you'll have to wade through the FAQ
paragraph by paragraph (or use a find function). I can't blame AT for
being unable to list DT items. Given the extremely varied use of DL
(definitions, dialogs, FAQ, link lists), it's difficult to see how a
user agent could present a meaningful list of "definitions". It's a
shame that HTML 4.01 didn't explicitly suggest markup like:

<dl>
<dt>
<dfn>Programmer</dfn>
</dt>
<dt>
<dfn>Coder</dfn>
</dt>
<dd>A person who writes software.</dd>
</dl>

since that would at least distinguish lists of definitions apart from
definition lists. Given the lousy examples actually provided by the
spec and given actual practice, that would be a risky distinction for
AT to draw. Eventually microformats or new containers like DIALOG might
facilitate more dedicated UI, however.

(Apologies again for the earlier misinformation about DL support. Let me
know if you spot any obvious mistakes in my summary.)

--
Benjamin Hawkes-Lewis