RE: Label Association with Input Field Question

Yep, +1 to Jonathan here – he is 100% correct. 

 

Each input within the form requires an accessible name per the specification, although I think you’ve identified a likely edge-case where compliance may actually have some impact on usability for some users (i.e. screen reader users). However the requirement for the accessible name being conveyed to the Accessibility APIs is for more than just screen readers – for example speech input – and so your text input needs to be labeled somehow. 

 

JF

 

From: Jonathan Avila [mailto:jon.avila@ssbbartgroup.com] 
Sent: Tuesday, June 7, 2016 1:14 PM
To: WCAG WG <w3c-wai-gl@w3.org>
Subject: RE: Label Association with Input Field Question

 

Mike, in my opinion you need an aria-label, aria-labelledby, label, or title for the input – having the search role on a parent element or a placeholder is not sufficient.

 

Jonathan

 

Jonathan Avila

Chief Accessibility Officer
SSB BART Group 
jon.avila@ssbbartgroup.com <mailto:jon.avila@ssbbartgroup.com> 

703.637.8957 (Office) 
Visit us online:  <http://www.ssbbartgroup.com/> Website |  <https://twitter.com/SSBBARTGroup> Twitter |  <https://www.facebook.com/ssbbartgroup> Facebook |  <https://www.linkedin.com/company/355266?trk=tyah> Linkedin |  <http://www.ssbbartgroup.com/blog/> Blog

 <http://www.ssbbartgroup.com/webinars/> Check out our Digital Accessibility Webinars!

 

From: Mike Elledge [mailto:melledge@yahoo.com] 
Sent: Tuesday, June 07, 2016 2:09 PM
To: WCAG WG
Subject: Label Association with Input Field Question

 

Hi All--

 

Is it compliant to use an aria role in place of a label for a search field? 

 

This is the code: 

 

  <form role="search" class="inLine search" >
    <input type="text" />
    <input type="submit" value="Search" />
  </form>

 

I want to identify search as a region, but avoid the redundancy of aria-label or a "search" label hidden off-screen. The submit button identifies the purpose visually, and screen readers announce it aurally.

 

I've considered adding a placeholder attribute, but the consensus is that it is not compliant since it doesn't create an association between the label and input field (even though it is reflected that way in the DOM).

 

What do you think, is this appropriate?

 

Thanks!

 

Mike