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
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>
aria-live on the shopping cart updates in order to pass 4.1.2.
Feel free to comment on Twitter @davidmacd
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.
For a quote or just to chat about your organization's needs