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:
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.
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!