Page 28 - HTML5

reader) to access your content.

Examples

role="alert"

A message with important, and usually time-sensitive, information.

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>

Note that I've included both role="alert" and aria-live="assertive" at the same time.
These are synonymous attributes, but some screen readers only support one or the
other. By using both simultaneously we therefore maximize the chances that the live
region will function as expected.

Source - Heydon Pickering 'Some practical ARIA examples'

role="alertdialog"

A type of dialog that contains an alert message, where initial focus goes to an element within the
dialog.

<div role="alertdialog">
<h1>Warning</h1>
<div role="alert">Your session will expire in 60 seconds.</div>
</div>

role="application"

A region declared as a web application, as opposed to a web document. In this example, the
application is a simple calculator that might add two numbers together.

<div role="application">
<h1>Calculator</h1>
<input id="num1" type="text"> + <input id="num2" type="text"> =
<span id="result"></span>
</div>

role="article"

A section of a page that consists of a composition that forms an independent part of a document,
page, or site.

Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA
semantics is unnecessary and is not recommended as these properties are already set
by the browser.

https://riptutorial.com/ 12