E-mail List Archives
Thread: Accessible Compare Feature
Number of posts in this thread: 3 (In chronological order)
From: McGehee, Michele
Date: Fri, Dec 13 2019 3:24PM
Subject: Accessible Compare Feature
No previous message | Next message →
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.
From: glen walker
Date: Fri, Dec 13 2019 5:59PM
Subject: Re: Accessible Compare Feature
← Previous message | Next message →
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 ADDRESS 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.
> > > > >
From: McGehee, Michele
Date: Mon, Dec 16 2019 12:59PM
Subject: Re: Accessible Compare Feature
← Previous message | No next message
Thank you Glen for your response. Very helpful!
Michele