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.
0 items
Shop at our single-product store
