The following HTML is inserted by the jQuery Grid plugin:
<td role="gridcell" style="" aria-describedby="list_createdBy">Sam</td>
What is the meaning of the 'aria-describedby' property?
The following HTML is inserted by the jQuery Grid plugin:
<td role="gridcell" style="" aria-describedby="list_createdBy">Sam</td>
What is the meaning of the 'aria-describedby' property?
This is described in the aria specification. It gives the id of an element that provides some additional information about the current element that some users might need.
Here below is an example of how you could use the aria-describedby property. It is used when you have a text that has information about the element. Aria-describedby must be the same as the id of the text that describes it.
First name: <input aria-describedby="name" type="text">
<em id="name">Your first name must be correct.</em>
At the first glance I'd say aria-describedby
is likely to be ignored here because it's defined on <td>
. Most browsers and screen readers will ignore aria-describedby
information when set on element which is not interactive (focusable).
But the specific example a bit more complex due to role="gridcell"
which overrides the semantics of <td>
and therefore the provided example is valid if it follows the ARIA specification for gridcell. It's a custom component.
Generally speaking the attribute aria-describedby
provides the screen reader with the additional information to be announced along the content of the element (not the only but the most common use-case).
For example instead of only "Logout"
the screen reader will announce "Logout, John Doe"
:
Logged-in as <span id="user">John Doe</span>.
<a aria-describedby="user" href="/logout">Logout</a>
Or example with a tooltip (Hint: Javascript part is missing here):
<button type="button" aria-describedby="my-tooltip">Snipping Tool</button>
<div hidden id="my-tooltip" role="tooltip">
It can take still screenshots of an open window,
rectangular areas, a free-form area,
or the entire screen.
</div>
Or example with a form element, another common use-case:
<form ...>
<label for="my-name">Full name</label>
<input aria-describedby="my-name-desc" id="my-name" type="text"/>
<p id="my-name-desc">
Please tell us your full name.
</p>
</form>
The example above will announce both <label>
and the additional description (defined by aria-describedby
) immediately when a user focuses the input field. Not only that it eliminates a need to read the surroundings to be able to understand what is expected to enter but also reading all elements other than form controls when inside of the <form>
might be more complex for a screen reader user. It's a different experience then reading the rest of the page. Because keyboard events can either interact with screen readers or with form controls, but hardly with both in the same time. Not to mention that screen readers offer bunch of useful keyboard shortcuts for example pressing "H" will jump to a next heading but obviously not when <input>
field is focused. Then "H" will be entered into <input>
.
aria-hidden
or aria-expanded
. But only if implemented and tested properly!a
or button
as well if referenced element is hidden (display:none
), its position (is the inner element referenced?) or if it has tabindex="-1"
or role
(e.g. role="none"
) on it etc. Make sure to test all screen readersaria-describedby
only in focus mode. As such, it does not make sense to add it to non-focusable elements. From: ADGCtrl+F
(which is a common way the users like to navigate the website to quickly find what they look for). From: ADGaria-describedby
, is to attach additional information to interactive elements (e.g. to relate visible information e.g. to form controls). From: ADGaria-describedby
(on a form control) and role="alert"
(on a SPAN) for a form control error. From: W3.orgBasically,
aria-describedby property is used to attach descriptive information to one or more HTML tags through the use of an id reference list( an id reference list contains one or more unique HTML tag ids).
aria-describedby property is very similar to aria-labelledby property( a label which describes the essence of a HTML tag) but aria-describedby property provides more information about a HTML tag that user might need.
The properties aria-describedby and aria-labelledby are mainly useful to the users who use assistive technologies like a screen reader.
For reference: