WAI-ARIA: Role=Toolbar

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA: Role=Toolbar
WAI-ARIA: Role=Toolbar

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.

Role=Toolbar Example

HTML Example 1

<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 

Name From 

  • author

Implicit Value for Role 

  • Default for aria-orientation is horizontal.

Semantic HTML

No HTML element equivalent.

Reference

  • W3C (opens new window)
Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: Role=Textbox

WAI-ARIA: Role=Textbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A type of input that allows free-form text as its value. If the aria-multiline attribute is true, the widget accepts line breaks within the input, as in an HTML textarea. Otherwise, this is a simple text box. The intended use is for languages that do not have a text input element, or cases in…

WAI-ARIA: Role=Dialog

WAI-ARIA: Role=Dialog

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. Description A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e.,…

WAI-ARIA: Role=Heading

WAI-ARIA: Role=Heading

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A heading for a section of the page. Description A heading for a section of the page. Often, heading elements will be referenced with the aria-labelledby attribute of the section for which they serve as a heading. If headings are organized into a logical outline, the aria-level attribute is used to indicate the nesting level….

WAI-ARIA: Role=Input

WAI-ARIA: Role=Input

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A generic type of widget that allows user input. Description A generic type of widget that allows user input. Note: input is an abstract role. Authors should not use this role in content. Characteristics Is Abstract Superclass Role Subclass Roles Inherited States and Properties Name From Reference

WAI-ARIA: Role=Slider

WAI-ARIA: Role=Slider

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A user input where the user selects a value from within a given range. A slider represents the current value and range of possible values via the size of the slider and position of the thumb. It is typically possible to add or subtract to the value by using directional keys such as arrow…

WAI-ARIA: Role=Widget

WAI-ARIA: Role=Widget

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description An interactive component of a graphical user interface (GUI). Widgets are discrete user interface objects with which the user can interact. Widget roles map to standard features in accessibility APIs. When the user navigates an element assigned any of the non-abstract subclass roles of widget, assistive technologies that typically intercept standard keyboard events SHOULD…

Leave a Reply

Your email address will not be published. Required fields are marked *