Description

Notifies the user of consequences that might arise from an action or event. Examples include warnings, cautions and dangers.

Examples

Example 1 — Notice with a heading

The label is identified in the aria-labelledby attribute.

<div role="doc-notice" class="danger" aria-labelledby="alert01">
   <img id="alert01" src="warn.jpg" alt="Warning"/>
   <p>Serious bodily injury may result …</p>
</div>
Example 2 — Notice without a heading

A label is provided in the aria-label attribute.

<div role="doc-notice" class="warning" aria-label="warning">
   <p>Exercise caution when mixing …</p>
</div>

Relation to ARIA

doc-notice inherits its semantics from the note role.

Usage

doc-notice is typically used on div elements. The role is particularly useful when color is used as the primary indicator of importance (e.g., warnings might have a yellow border and dangers red instead of explicit labels).

For a simplified list of all the elements the role is allowed on, refer to the mapping table in the EPUB Type to ARIA Role Authoring Guide. For the official list of allowed elements, refer to ARIA in HTML.

Related Links