Using role=status to Provide Status Message on Shopping Cart

This simple script demonstrates how a shopping cart counter is updated and surfaced using the aria status role. Here the role is placed on the paragraph containing the dynamically updated text, and the shopping cart image's alt provides additional context. Due to the default aria-atomic="true", a screenreader should announce "Shopping Cart # items" or (depending on browser compatibility) "# items" each time the Buy Pink Flamingos button is selected.


Shopping Cart
0 items

Shop at our single-product store

Pink Flamingo