Appropriate WAI-ARIA role for actionable notification area and section header?

Question

I am adding aria roles to my site to make it as accessible as I can, and I've done quite a bit research into them. Most of the roles are straightforward except for a few scenario that I'm not quite sure what role to use.

First being an actionable notification item, there is a section-global notification that will appear in almost every page of a section of my site, and it says something like "you have 10 apples available for pickup" and a button beside it says "pick up apples". Basic idea is there is a message and an action associated with it, the user is free to ignore it and continue browsing. Among the roles I have seen "alert" and "alertdialog" seem relevant, since they cause the assitive technology to announce what's in there. But "alert" shouldn't require user input and will go away according to a timer, and "alertdialog" locks the user's keyboard into a modal until they make an action.

Another case is the section header. I know what a banner is and I assigned that to the top navigation banner of my site, with logo and site wide navigation/search. But what about the header/sub-nav below that? They aren't quite page specific but "section specific" since there are multiple pages associated with them, it feels like a sub-banner. Say my site sells fruit and I have a section for apples. Should the section header/nav be part of "main" role? I know the "navigation" role may seem relevant but I actually have navigation at a lower level, say the section nav says "asia apples/north america apples/european apples" and the lower level nav says "chinese apples/japanese apples" and such.

Thanks in advance for anyone familiar with ARIA roles who can answer my questions!

Answer 1

It is worth distinguishing "landmark" roles from other ARIA roles.

The landmark roles mark areas of the page, and can be used in the HTML:

it is fine to add ARIA landmark roles or ARIA labelling and describing attributes inline.

So you could markup the banner, main, search, navigation etc. in the HTML.

For other roles, especially anything dynamic, you probably want to add them via JavaScript.

From your description, it sounds like your notification area is something that users should be aware of, but not restricted by. (Therefore don't use alerts or dialogs.)

I don't think there is a specific role for that, but perhaps make sure it is in an area people will browser over. For example, if you have a main and h1, include the notification area just under that (in the source order).

If the notification area updates dynamically (without page load) you could look at aria-live to notify users without moving them from the current focus.

For the section heading, I would just make sure there is one h1 that is page-specific. You could include a section heading as an h2 above the main, in the banner if that makes sense to you.

There isn't really a role suitable for section markers, but if the main and h1 are page specific it should be ok.