You may have come across an aria-label
or another aria
attribute and you are wondering what is the difference. The aria-label
can be used to guide the user when there is no meaningful text associated with an element, with no text it can be hard to reason with the element or in worst case, it can be invisible to the visually impaired. An example could be a button that has no text, this could be the case if its content is just an icon, such as a simple "refresh button" or the usual zoom buttons on a map. These have a symbolic representation rather than a textual one. An example of this could be the following:
<button Aria-label="Refresh">⟳</button>
Which would look like the following:
Often there is a native HTML element, attribute or simple HTML content that can guide the user. Such as a Label
with a For
attribute for an Input
in a form, a Title
attribute for an Anchor
tag or simply a text inside a Button
element. The aria-label
should not be used if there is a natural text as a well-describing text associated with the element. It is for when there is no such text and it gives users using screen readers a chance to navigate and reason with your website.
Note: The Aria-label
overrides the label
attribute if they are both present. The same applies to most other attributes like title, however it entirely depends on the screen reader.
That is all, feel free to leave a comment down below!