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 color 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