WAI-ARIA: Role=Toolbar • Digital A11y

Description

A collection of commonly used function buttons or controls represented in compact visual form.

The toolbar is often a subset of functions found in a menubar, designed to reduce user effort in using these functions. Authors MUST supply a label on each toolbar when the application contains more than one toolbar.

Authors MAY manage focus of descendants for all instances of this role, as described in Managing Focus.

Elements with the role toolbar have an implicit aria-orientation value of horizontal.

Example

HTML Example

<div role="toolbar" tabindex="0" id="customToolbar">
<img src="/img/btn1.gif" tabindex="0" role="button" id="b1" alt="Home">
<img src="/img/btn2.gif" tabindex="-1" role="button" id="b2" alt="Refresh">
<img src="/img/btn3.gif" tabindex="-1" role="button" id="b3" alt="Help">
</div>

HTML Example 2

<ul role="toolbar">
<li><img alt="New" src="/new.png"></li>
<li><img alt="Open" src="/open.png"></li>
<li><img alt="Save" src="/save.png"></li>
<li><img alt="Close" src="/close.png"></li>
</ul>

Characteristics

Superclass Role

group

Related Concepts

menubar

Supported States and Properties

aria-orientation

Inherited States and Properties

aria-activedescendant
aria-atomic
aria-busy (state)
aria-controls
aria-current (state)
aria-describedby
aria-details
aria-disabled (state)
aria-dropeffect
aria-errormessage
aria-expanded (state)
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription

Name From

author

Implicit Value for Role

Default for aria-orientation is horizontal.

Semantic HTML

No HTML element equivalent.

Reference

W3C (opens new window)