ARIA-label, ARIA-labelledby and ARIA-describedby properties defines accessible ways of providing labels for form fields when straight way is not possible. In certain situations general <label> tag cannot be provided for various reasons.
Let us understand how to implement ARIA-label, ARIA-labelledby and ARIA-describedby properties. In this post I would also provide the screen reader behavior with such properties.
ARIA-label
ARIA-label is used when a <label> tag cannot be used for the form field. Just add aria-label within the input tag and provide the value for the label and you are done.
Syntax
<input type=”text” aria-label=”First Name” id=”fname” />.
Screen Reader Behavior
- JAWS13 recognizes aria-label perfectly in Firefox, Google Chrome and Internet Explorer.
- NVDA 2012.3.1 recognizes aria-label property in Firefox, Google Chrome and internet Explorer. While using down arrow key NVDA is unable to find the label but using “F” and tab key it worked well.
- Voiceover recognizes aria-label property perfectly with Safari on IOS.
- Talkback recognizes aria-label property perfectly with Google Chrome on Android.
ARIA-labelledby
ARIA-labelledby is used when any content of the page can be used as the label for a form element. It also can be used when same label should be used for multiple form elements. Provide the content that should be used as label and provide an id to it. Use this id wherever you want.
Syntax
<p id=”label1″>User Name</p>
<input type=”text” aria-labelledby=”label1″ id=”fname” />.
Screen Reader Behavior
- JAWS13 recognizes aria-labelledby perfectly in Firefox, Google Chrome and Internet Explorer.
- NVDA 2012.3.1 recognizes aria-labelledby property in Firefox, Google Chrome and internet Explorer. While using down arrow key NVDA is unable to find the label but using “F” and tab key it worked well.
- Voiceover recognizes aria-labelledby property perfectly with Safari on IOS.
- Talkback recognizes aria-labelledby property perfectly with Google Chrome on Android.
ARIA-describedby
In certain cases the form fields should have more explanation. In such cases ARIA-describedby property helps in providing the extra information which a aria-label or aria-labelledby cannot provide.
For example if a phone number field is provided which should be filled with “Country code”, “area code” and phone number with 2,0 and 10 digits respectively the instruction can be “Provide two digits country code, 0 as area code and 10 digits mobile number”.
The instruction can be provided as follows using aria-describedby property.
Syntax
<p id=desc1″>Provide the phone number as two digits country code, 0 as area code and 10 digits mobile number</p>
<input type=”text” maxlength=”13″ aria-label=”Phone Number” aria-describedby=”desc1″ />
Screen Reader Behavior
- JAWS recognizes aria-describedby property. In Firefox, Google Chrome and Internet Explorer. If the user want to read it for the second time in Firefox press jaws key + alt + R.
- NVDA 2012.3.1 recognizes aria-describedby property in Firefox, Google Chrome and internet Explorer. While using down arrow key NVDA is unable to find the description but using “F” and tab key it worked well.
- Voiceover on IOS does not recognize ARIA-describedby property on safari.
- Talkback on Android does not recognize aria-describedby on Google Chrome.
To have a personal experience of the same go to ARIA-label properties(External website).