You are here

Where to put the search role when your search form is hidden

I've worked on several sites recently where the site search form is hidden by default and displayed by activating a button. This pattern caused me a bit of confusion about where to put the role="search" attribute, which is important for accessibility.

According to the W3C specification the search role is:

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

Assistive technology users can navigate by page landmarks if they are correctly marked as such; therefore, if you put role="search" on your site search those users can find it quickly and efficiently.

However, where should the role="search" attribute be placed?

Almost all of the documentation or examples I have found put the search role on the search form itself, including the MDN documentation and the W3C example. (There are some that tell you not to put it on the form because it will override the "form" role, but that's apparently outdated and no longer correct).

So that's what I was doing, but I had doubts about it in the case of hidden search forms.

Why? Because if the search form is initially hidden and user interaction is required to show it, by definition the user cannot discover it by landmark navigation when exploring the page. They'll only encounter the search role after finding the toggle button and activating it, and by then they should be aware based on the button text what they will find.

So I've come to the conclusion that, when the search form is hidden, the role="search" should be put on a <div> that contains the toggle button and the search form. That way, when a user is navigating the page by landmarks, they will be able to find it.

I believe the recommendations to put the role on the form are based on the more typical scenario where it is always visible. In that case, it makes the most sense to put it on the form.

Because I haven't been able to find any posts or opinions about this particular scenario, I'd welcome any feedback or dissenting opinions! Please feel free to leave them in the comments or send me a message.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.