In regard to web accessibility, how should I treat a promotional banner at the top of an e-commerce website. For example, the banner might say "20% discount off all products for a limited time only". What aria-role do I give that banner?
2 Answers
It can be a simple landmark role to make it easy to find with a screen reader. Your first inclination might be to use the banner role since you described your element as a "discount banner" but the banner landmark should be reserved for the main <header> element. A complementary landmark would be ok.
But technically you don't need a landmark role, or any role, for that matter. Is the discount banner at the top of the page? Is it at or near the beginning of your DOM? If so, then the screen reader user will encounter it early in their navigation (whether via the tab key or the down arrow key).
If the discount banner contains a link, just use semantic HTML with a real <a> element. Try to avoid the discount containing a picture of the discount (WCAG 1.4.5).
Usually sticking with the appropriate HTML elements gives you most of the accessibility you need without having to add ARIA attributes or roles.
If you have an example of what your discount banner looks like, I can give further details.
The most likely candidate, based on the available WAI-ARIA roles seems to be the alert role (without alertdialog).
alert seems most fitting as it conveys important dynamic information to a user (cases like toasts/snackbars, or important error/warnings that may be temporarily displayed to the user).
In the case of a promotional e-commerce banner, you would probably want to use JavaScript to add the role when the page loads, and then remove it from the element so it only alerts once and doesn’t create confusion or frustration for the user.
Edit: See this SO post for some additional concerns with using the alert role in case they apply to your implementation.
Related