[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         |  Resolution:
 Keywords:                 |     Focuses:  ui, accessibility
---------------------------+--------------------------------

Comment (by sharonaustin):

 Thank you so much for this work.  I've incorporated pretty much all of the
 suggestions above except for Rian's outstanding recommendation about a
 unique id search_form class, simply because it was not (as I understand
 it) the focus of this ticket.  That said, I think her idea would make a
 huge difference in accessibility if it were implemented, so I hope work
 continues on that concept.

 For NVDA only, I made the following changes, and it seemed to greatly
 reduce redundancy.  Please note that I tested these as a NON-EXPERT with
 NVDA 2015

 1. Starting off with a basic scenario, with classes removed (the same
 starting point as @afercia illustrates above, I hope) :
 http://jsbin.com/diwapi/edit?html,output

 2. I altered the roles, removing the "complementary" role from the div
 id="secondary", but more importantly, changed the aside to a nav. I did
 this for two reasons.  The first is that user agents SHOULD treat elements
 with the role of search as navigational landmarks. (Source:
 http://www.w3.org/TR/wai-aria/roles#search).  But the second reason I
 found is that in certain parsers that test outlines, "asides" will not
 show up.  I felt it was very important that if a user relies on "outlines"
 to navigate, then the search should be able to show up in that outline.
 Here's the test showing what happens when I remove the role of
 complementary and changed aside to nav.
 http://jsbin.com/qeximez/edit?html,output

 3. Removed the placeholder and title attribute.  Reading @afercia's
 concern about using titles and HTML5, I especially was concerned about
 this one, but it seemed to work, and there was literature saying that
 relying on title attribute is currently discouraged.  ("Relying on the
 title attribute is currently discouraged as many user agents do not expose
 the attribute in an accessible manner as required by this specification
 (e.g. requiring a pointing device such as a mouse to cause a tooltip to
 appear, which excludes keyboard-only users and touch-only users, such as
 anyone with a modern phone or tablet)".    Source
 http://www.w3.org/TR/html5/dom.html#index-aria-search
 http://jsbin.com/peqimu/edit?html

 4. This last one is one I'm not totally comfortable with yet, but based on
 reading, if you are using an HTML5 document and use input type=search,
 then the browser understands that it is a search function, and adding
 role=search is redundant.  Removing it DOES remove redundancy.

 http://jsbin.com/xeyana/edit?html

 Again, this worked for me as a NON-EXPERT with screen-readers.

 Thank you so much, everybody, for your committment to accessibiltiy.

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