Skip to content
DigitalA11y logo blue fill

DigitalA11Y

Your Accessibility Partner

  • Home
  • About
  • Blog
  • ResourcesExpand
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
  • Contact
DigitalA11y logo blue fill
DigitalA11Y
Your Accessibility Partner

WAI-ARIA :Role=Searchbox

Home » WAI-ARIA :Role=Searchbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated :January 17, 2023
Table of Contents
  • Description
  • Role=Searchbox Example
  • Characteristics
  • Inherited States and Properties
  • Semantic HTML
  • Reference

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.

Role=Searchbox 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)

Services

  • Accessibility Audits
  • Accessibility Consulting
  • Accessibility Training

Resources

  • Understanding WCAG
  • Understanding WAI ARIA
  • WCAG 2.1 Checklist

Terms & Conditions

Privacy Policy

Accessibility Statement

Disclaimer

© 2023 DigitalA11Y
All Rights Reserved

Linkedin Twitter Facebook
DigitalA11Y

Plot No 108, 3rd Cross Rd, Saipuri Colony,
Hastinapuri Colony, Sainikpuri, Secunderabad

500094
Telangana, India

Tel:(+91)99082 66680,
E-mail: [email protected]

Scroll to top
  • Home
  • About
  • Blog
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
  • Contact
Search