3

I'm trying to create an accessible input field like so:

<input type="text" role="textbox" aria-labelledby="helper-msg-value">
<p id="helper-msg-value">You must enter a value</p>

Is there any way to use a class as the selector for the aria-labelledby attribute instead of an ID? So something like this:

<input type="text" role="textbox" aria-labelledby=".helper-msg-value">
<p class="helper-msg-value">You must enter a value</p>
unor
  • 92,415
  • 26
  • 211
  • 360
Ralph David Abernathy
  • 5,230
  • 11
  • 51
  • 78
  • I think the way it's done is that you use JavaScript to automatically update the text/property of the element referenced by the `aria-labelledby`. – Ronnie Royston Feb 14 '18 at 03:45

2 Answers2

9

It's not possible to use a class with aria-labelledby or aria-describedby. While it is possible to attach multiple labels to an element using aria-labelledby, the only values it works with are IDs. I imagine this is the case because they expect these labels to be unique for this purpose. One possible solution would be to attach an 'aria-label' to the input with the text that you want it to actually read. For example, having

<label for="textfield">Q.T.Y.</label> <input type="text" id="textfield" aria-label="Quantity">

would allow a screenreader to read out text that is different than the displayed label. Just be aware that many(most?) screen readers will not read the <label> element if an aria-label has been used on the input.

Edit: A class is intended to be used for multiple instances of an element on a page. When you focus on an element, the screenreader needs to know exactly which element will represent the aria attribute. This is why IDs are used - IDs must be unique to a page - that is, a specific ID can only belong to one element. This allows the browser (and assistive technologies) to quickly and accurately grab the correct element for the aria attribute. If you had three elements on the page with the same class but different content, what would you expect to be read out?

Edit#2: I wanted to revisit this to caution against using an aria-label that is different from the displayed label because of possible issues with dictation technologies (such as Dragon Naturally Speaking or others). A user who is controlling a webpage with their voice will often rely on the displayed labels to properly interact with the page.

To provide an example:

<button aria-label="click to buy">Checkout</button>

A user who sees "checkout" on the page but uses dictation software might dictate "click Checkout button", but the dictation software won't know of a "Checkout" button because the aria label is "click to buy".

Skerrvy
  • 902
  • 8
  • 17
  • "screen readers will not read the element", do you mean screen readers won't read the label text in this scenario? – Fiona - myaccessible.website Jun 30 '16 at 08:29
  • 1
    Fiona - Speaking solely of NVDA & Firefox with the code I've included in my comment, if the user focuses on the input, only "Quantity" will be read out. 'QTY' will only be read in the flow of the document, but will not be read out when the input receives focus. Sorry for any confusion. – Skerrvy Jul 18 '16 at 15:17
3

Why not just use a normal label and attach it normally. This would work in all browsers and screen readers...

<div class="field">
   <label for="qty" class="required"><abbr title="Quantity">Qty</abbr></label>
   <input type="text" name="qty" aria-required="true" id="qty" class="required">
</div>

So with this we have a correct label and input match so that wont fail automated checkers. It will read the label in context tell the users what the field is so they know what to enter (in your case you dont tell the user what they are entering). And we user aria-required which just pings the user with "required". And is standard no need to add extra text and labels for that.

Can style the required * or what not based on the required clas

Tim
  • 3,576
  • 6
  • 44
  • 58
  • Because if we have something like this: `` we don’t want the screen reader to read "Q - T - Y", we want it to read “Quantity”. – Ralph David Abernathy Jun 29 '16 at 15:58
  • 1
    You could use the abbr tag with a title like http://stackoverflow.com/questions/29465033/pronounce-doit-as-do-it-for-screen-readers-and-the-visually-impaired but not sure if screen reader support would need to be tested. `` Or just change it ti Quantity if you have enough form space. – Tim Jun 30 '16 at 13:22