WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Compare Feature

for

From: McGehee, Michele
Date: Dec 16, 2019 12:59PM

Thank you Glen for your response. Very helpful!

Michele

-----Original Message-----
From: glen walker < <EMAIL REMOVED> >
Sent: Friday, December 13, 2019 5:00 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible Compare Feature

At first I thought you were talking about a comparison tool for text files. One that shows additions, deletions, and changes. That would be a bit challenging but is doable.

But I think what you're asking for is a product comparison. So you can check several products then view a table that compares them. Is that correct?

I don't have a specific example but here are things I would keep in mind.
Not all are required for accessibility but some are nice usability features.

- The "compare" element, to add a product to the compare list (could be
a checkbox or a button), would be nice if the element had two pieces of
context.


1. If the label of the element is just "compare", that might not be
enough context for screen reader users. "Compare <product name>" would be
better. (WCAG 3.3.2)
2. Even with the product name, a nice addition would be to tell the user
how many products are already in the compare list. Perhaps something like
"Compare <product name>. X items already in compare list". I suppose this
might not be needed if, after adding a product, the user is told how many
items are in the compare list (WCAG 4.1.3), but I still think it would be
handy. I might browse around and forget how many products are in the list
before I find another product to add.


- Provide a shortcut key to get to the element that actually displays
the list. You mentioned a floating element, which might obscure other
parts of the page. I've seen both floating and non-floating compare
lists. What's usually not provided is an easy way to find that element.
So after you've added a product to the list, how do you get to the compare
page? Most websites force the user to hunt for the compare feature. It'd
be nice to mention a shortcut key when you announce the addition to the
list (aria-live, WCAG 4.1.3). After announcing the addition, you could
also say "Use ctrl+shift+c to view the list" (or some keyboard shortcut -
possibly use the accesskey attribute).
- When you display the compare list, that's typically done with a
table. Just follow basic table best practices and have both column headers
and row headers (<th scope="col|row">). The latter is often overlooked.
- If you allow the removal of a product from the list, make sure the
removal button has context. Not just "remove" but "remove <product name",
then announce how many items are left in the compare list.



On Fri, Dec 13, 2019 at 3:25 PM McGehee, Michele < <EMAIL REMOVED> > wrote:

> I'm interesting in know if anyone has any good examples of an
> accessible compare feature that is both accessible and functional.
> There are many examples of a 'floating compare section' that sit at
> the bottom of the screen and allows you to add items you want to
> compare. Unfortunately, the floating section covers content and
> keyboard navigation is challenging to say the least. Any insights would be greatly appreciated!
>
> Michele McGehee, Digital Accessibility Specialist
>
>
>
>
>
>
> NOTICE: This message (including any attachments) may contain
> information that is privileged, confidential, proprietary and/or
> otherwise protected from disclosure to anyone other than its intended
> recipient(s). Any dissemination, copying, retention or use of this
> message or its contents (including any attachments) by persons other
> than the intended recipient(s) is strictly prohibited. If you have
> received this message in error, please immediately notify the sender
> by reply e-mail or telephone and permanently delete all copies of this
> message and any attachments. Thank you for your cooperation.
> > > archives at http://webaim.org/discussion/archives
> >

NOTICE: This message (including any attachments) may contain information that is privileged, confidential, proprietary and/or otherwise protected from disclosure to anyone other than its intended recipient(s). Any dissemination, copying, retention or use of this message or its contents (including any attachments) by persons other than the intended recipient(s) is strictly prohibited. If you have received this message in error, please immediately notify the sender by reply e-mail or telephone and permanently delete all copies of this message and any attachments. Thank you for your cooperation.