• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / WAI-ARIA : Role=searchbox

WAI-ARIA : Role=searchbox

A type of textbox intended for specifying search criteria.
Widget role

Description

New in ARIA 1.1
A type of textbox intended for specifying search criteria. See related textbox and search.

Example

HTML Example

<label for="siteSearch">Site search</label>
<input type="text" role="searchbox" id="siteSearch" placeholder="type something, nor nothing, or whatever">
<input type="submit" value="Find it">

HTML Example 2

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

Characteristics

Superclass Role

  • textbox

Base Concept

  • HTML input[type=”search”]

Inherited States and Properties

  • aria-activedescendant
  • aria-atomic
  • aria-autocomplete
  • aria-busy (state)
  • aria-controls
  • aria-current (state)
  • aria-describedby
  • aria-details
  • aria-disabled (state)
  • aria-dropeffect
  • aria-errormessage
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-keyshortcuts
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-multiline
  • aria-owns
  • aria-placeholder
  • aria-readonly
  • aria-relevant
  • aria-required
  • aria-roledescription

Name From

  • author

Accessible Name Required

  • True

Semantic HTML

No HTML element equivalent.

The role “searchbox” was added to represent the same element type as an HTML input element that includes type=”search”.

The use of role=”searchbox” must be the only focusable element. This differs from role=”search”, which is meant to be a landmark that includes focusable active elements.

When role=”searchbox” is used, focus must be set to the role=”searchbox” element and the content of that element must then be directly editable. Since role=”searchbox” is a form field in the same manner as role=”textbox”, it must include an explicit label using either aria-labelledby or aria-label.

Reference

W3C (opens new window)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Isaac Williams on Digital Accessibility Companies Roundup
  • Vaibhav Mishra on Understanding SC 3.3.1 Error Identification
  • Vaibhav Mishra on Understanding SC 1.3.2 Meaningful Sequence
  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y