Shopping carts should notify users
that they are updated under WCAG 4.1.2
Shopping carts should provide an aria-live region that notifies the user that the cart was updated under WCAG Success Criteria 4.1.2.
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
A shopping cart is a component under the WCAG definition.
- user interface component
-
a part of the content that is perceived by users as a single control for a distinct function
The value is set by the user when they buy something. Success Criteria requires that "notification of changes to these items is available to user agents, including assistive technologies."
Here's how to do it:
<li class="gocart-nav"
id="gocart-trigger">
<a
data-targetroll="cartRoll" href="..." aria-live="assertive"
aria-atomic="true">
<i
class="font-icon-bag"
aria-hidden="true"></i>
<span
class="visuallyhidden">Shopping bag. Current number
of items is</span>
<span
class="js-cart-total">(5)</span></a></li>
I'm recommending
aria-live
on the shopping cart updates in order to pass 4.1.2.
Feel free to comment on Twitter @davidmacd
Author information:
David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.
CONTACT US
For a quote or just to chat about your organization's needs
