WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: markup for a Q & A list (kind of was Navigation lists and headers)

for

From: Jukka K. Korpela
Date: Aug 28, 2007 1:10AM

On Mon, 27 Aug 2007, Keith Parks wrote:

> So is there a semantically-correct markup for a list of Questions and
> their Answers?

There are several alternatives, ranging from semantically empty markup
(using <div>) to various attempts at saying _something_ about the
semantics. There is no alternative that could be called _the_ semantically
correct markup, since there is no element for such a particular type of a
list in HTML.

> Something better than:
>
> <p>The question?</p>
> <p>The answer.</p>

Well, that's a semantically wrong, or at least questionable, markup, since
the question does not constitute a paragraph. The answer might. In special
cases, even <p>No.</p> might go for an answer and for a paragraph, when
it appeas in a context where answers are normally normal paragraphs.

There's the specific accessibility problem with it that it does not
distinguish questions from answers (except by the grammatical form and
the meaning of the text), visually or audibly.

This is better:

<h2 id="q-foo">The question?</h2>
<div class="ans">
<p>The first paragraph of the answer.</p>
<p>The first paragraph of the answer.</p>
<p>Etc., optionally with images, tables, etc. as needed.</p>
</div>

This would probably require the use of CSS to make the headings less
prominent than by default, especially as regards their font size.

The idea in wrapping the answer in <div> markup with class is to allow
easy styling of the document so that some features are applied to an
answer as a whole. This is not just authoring convenience; some users who
visit the page often might even wish to set up their user style sheet for
it, so clarity of markup (including even class and id names - q-foo should
be replaced by something mildly descriptive of the question) and
sufficient "hooks" for styling are an asset.

The idea in the id="..." attribute is to allow direct references to the
question by URLs with fragment ids, so that users can cite a particular
question & answer to benefit each other. It's also useful for setting up a
table of contents, consisting of just the questions (as links) and
section headings, which probably should be created unless the answers are
short and most of them are very short.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/