[wp-trac] [WordPress Trac] #33952: get_search_form() accessibility improvements

[WordPress Trac]

#33952: get_search_form() accessibility improvements
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Bundled Theme      |    Version:  4.3
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Noticed while testing Twenty Sixteen and discussed a bit in today's
 accessibility team chat on Slack. The standard search form generated by
 `get_search_form()` and primarily used by themes (e.g. in the 404 error
 page, in the search results page) and by the Search Widget has some
 redundant info and could be simplified a bit.

 We're also a bit concerned about the usage of the placeholder attribute as
 "visual label" while, according to the specs, its purpose is to give an
 hint about the type of data to enter. In fact, some screen readers
 announce the placeholder as "hint". By the way we understand this would
 require some discussion in the community so let's focus on the redundant
 info for now.

 Please refer to the screenshot below, it's the Twenty Sixteen theme
 without styles:

 [[Image(https://cldup.com/uncNAiRqdw.png)]]

 As you can see, there's a bit of redundancy. NVDA will read out this as:
 {{{
 search landmark Search for:                              <-- role="search"
 set on the form
 Search for: Search … edit has auto complete Search for:  <-- the search
 label + input
 Search                                                   <-- the search
 button
 }}}

 With styles applied, nothing changes: the label is hidden by default with
 `screen-reader-text`. In Twenty Sixteen the search button is hidden too.
 Both will be read out by screen readers.

 The sequence: label + placeholder + title attribute is particularly
 redundant, we'd recommend to remove the title attribute (looks like it's
 used only in the html5 format).

 Additionally, it would be preferable to associate the label explicitly
 using a `for` attribute, this would need a unique identifier but it
 shouldn't be too hard to have a counter or some clever solution in case of
 multiple search forms on the same page.

 Side note: there's a space before the ellipsis in the placeholder, not
 sure if that's intentional, doesn't look right to me :)

 Any thoughts more than welcome, we're open to suggestions about how to
 further reduce repeated and redundant info and looking forward to start
 the discussion about [http://www.w3.org/WAI/tutorials/forms/instructions
 /#placeholder-text placeholders].

--
Ticket URL: <https://core.trac.wordpress.org/ticket/33952>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform