Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

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


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA