Page 115 - HTML5 Notes for Professionals

<input role="searchbox" type="text">
<button role="button">Search</button>
</div>

Section 41.49: role="searchbox"

A type of textbox intended for specifying search criteria.

<div role="search">
<input role="searchbox" type="text">
<button role="button">Search</button>
</div>

Section 41.50: role="separator"

A divider that separates and distinguishes sections of content or groups of menuitems.

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

Section 41.51: role="slider"

A user input where the user selects a value from within a given range.

<div
role="slider"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25">
<div class="sliderhandle"></div>
</div>

Section 41.52: role="spinbutton"

A form of range that expects the user to select from among discrete choices.

<input
role="spinbutton"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25"
type="number"
value="25">

Section 41.53: role="status"

A container whose content is advisory information for the user but is not important enough to justify an alert, often
but not necessarily presented as a status bar.

<div role="status">Online</div>

Section 41.54: role="switch"

A type of checkbox that represents on/off values, as opposed to checked/unchecked values.

GoalKicker.com – HTML5 Notes for Professionals 108