Accessibility - Add aria-live attribute to notifications

[adamjohnson]

nopCommerce version: 4.3

Steps to reproduce the problem:

1. Visit the Demo Store and add a product to your cart.

Results

At the top of the browser window, users are notified:

The product has been added to your shopping cart

This is from the following HTML:

<div id="bar-notification" class="bar-notification-container" data-close="Close" style="">
  <div class="bar-notification success" style="display: block;">
    <p class="content">The product has been added to your <a href="/cart">shopping cart</a></p>
    <span class="close" title="Close"></span>
  </div>
</div>

Expected Results

Assistive technology users don't know an action has been completed due to the lack of the aria-live attribute. aria-live can be set on a container and lets AT users know something changed within that container. For example:

• "The product has been added to your shopping cart"
• "The product has been removed from your shopping cart"
• "There was an issue adding this item to your cart"

Documentation on aria-live

MDN has a great resource about aria-live.

Potential fix

Add aria-live and potentially aria-atomic to all notifications:

<div id="bar-notification" class="bar-notification-container" data-close="Close" style="" aria-live="polite" aria-atomic="true">
  <div class="bar-notification success" style="display: block;">
    <p class="content">The product has been added to your <a href="/cart">shopping cart</a></p>
    <span class="close" title="Close"></span> <!-- Change me to a button! -->
  </div>
</div>

[AndreiMaz]

Regarding all accessibility tasks. We have the "accessiBe" plugin available out of the box. It's the 1 Fully Automated Web Accessibility Solution for ADA & WCAG Compliance

[adamjohnson]

Be careful with overlays:

https://overlayfactsheet.com/

https://overlaysdontwork.com/