WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: "Q&A" content presentation question

for

From: glen walker
Date: Jan 8, 2020 11:42AM

There might be some users where spelling out "question" and "answer"
instead of Q and A will be helpful They aren't necessarily visually
impaired users. It could be a cognitive issue.

There's not really a compliance reason to spell it out because it's
generally accepted that Q and A means questions and answers but you can
certainly do it for usability reasons.

I would more concerned with semantically marking up the code properly to
make it easy to navigate with a screen reader. A dl/dt/dd list is probably
the closest semantically to what you want, but support for those lists is
different among the different screen readers. Some treat every dt and dd
as a list item, so it sounds like the list is twice as big as it is. So I
usually use a simple ul (or you can use an ol if you want to number your
questions). The problem with ul is that if you turn off the bullet points
using list-type:none, then some screen readers (Voiceover) will not treat
the list as a list so you have to add back in ARIA attributes to make it a
list (https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).

There are a lot of ways to organize it. Here's a quick one that I'm sure
can be improved upon. It hides Q from the screen reader and says
"question" instead. That doesn't help cognitive sighted users but you can
choose whether to do that or not. The screen reader user can use the L key
to find the list itself and the I (eye) key to navigate to each list item
to quickly jump from question to question.

<ul>
<li>
<p><span aria-hidden="true">Q</span><span
class="sr-only">Question</span>: Lorem ipsum...</p>
<p><span aria-hidden="true">A</span><span
class="sr-only">Answer</span>: Lorem ipsum...</p>
</li>
<li>...</li>
<li>...</li>
</ul>


On Wed, Jan 8, 2020 at 10:54 AM Piscitelli, JoAnn < <EMAIL REMOVED> >
wrote:

> Dear WebAIM Forum,
>
> I have a question regarding content formatting for a Q&A page presentation.
>
> Traditionally, Q&A on a web page is presented like this:
>
> Q: Phasellus lacinia, dui id pretium volutpat, ante mi tempor mauris,
> luctus tempor dolor urna et odio?
> A: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor
> congue felis ut hendrerit. Mauris fermentum orci enim, vel tempor ex
> ullamcorper ut. Donec varius ut libero fermentum vulputate. Nulla mauris
> orci, scelerisque in felis in, semper scelerisque lectus. Ut porta turpis
> sit amet est volutpat, quis euismod leo rutrum. In posuere ante ut erat
> malesuada congue. Sed gravida nibh eu mauris tincidunt euismod.
>
> With accessibility in mind, should the ‘Q' and ‘A' be spelled out,
> ‘question' and ‘answer', to be formatted like this:
>
> Question: Phasellus lacinia, dui id pretium volutpat, ante mi tempor
> mauris, luctus tempor dolor urna et odio?
> Answer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
> porttitor congue felis ut hendrerit. Mauris fermentum orci enim, vel tempor
> ex ullamcorper ut. Donec varius ut libero fermentum vulputate. Nulla mauris
> orci, scelerisque in felis in, semper scelerisque lectus. Ut porta turpis
> sit amet est volutpat, quis euismod leo rutrum. In posuere ante ut erat
> malesuada congue. Sed gravida nibh eu mauris tincidunt euismod.
>
> I'm asking this for users that may use a screen reader.
>
> I look forward to your feedback and advice!
>
> Happy New Year to all!
>
> Jo
>
> > > > >