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 a note role.

Usage

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

List of all elements allowed on
  • a (without an href attribute)
  • abbr
  • address
  • b
  • bdi
  • bdo
  • blockquote
  • br
  • canvas
  • cite
  • code
  • del
  • dfn
  • div
  • em
  • i
  • img (with alt text)
  • ins
  • kbd
  • mark
  • output
  • p
  • pre
  • q
  • rp
  • rt
  • ruby
  • s
  • samp
  • section
  • small
  • span
  • strong
  • sub
  • sup
  • table
  • tbody
  • td
  • tfoot
  • thead
  • th
  • tr
  • time
  • u
  • var
  • wbr

References