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: Keith Parks
Date: Aug 28, 2007 9:00AM

On Aug 28, 2007, at 6:58 AM, Philip Kiff wrote:

> Jukka K. Korpela wrote:
>> On Mon, 27 Aug 2007, Keith Parks wrote:
>>> So is there a semantically-correct markup for a list of Questions
>>> and
>>> their Answers?
>>
>> 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 seems to presume that the question will be shorter than the
answer. I had thought of using a header of some level for the
question, but when the question is long (potentially more than one
sentence), it somehow did not seem correct. A specific example...

Q: Can we bring grandparents and family friends to Family Weekend
events that include food, without having to pay to register them, if
they don't eat anything?


A: Yes.

Grammatically, both of those would constitute paragraphs, right?

> I've used a version of this for a Q & A list before, and I second this
> recommendation. Depending on your page layout, you might be able
> to reduce
> the markup further by replacing the series of answer divs with one
> large
> <div id="q-and-a"> enclosing the whole list of questions and
> answers and
> then styling the <p> answers by selecting using #q-and-a p {...} in
> the
> stylesheet.

This is akin to what I've done in the past, only (mis)using the <dl>,
<dt> and <dd> tags.

I can see the value of the <h?> tags in that they would allow a way
structurally to pull out or "scan" the questions. SO should I just
get over the concept that a <header> should be short?





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

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

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