Originally posted here!
To set an accessible name to an interactive HTML element, you can use the aria-label attribute and set its value to a common name as to what the element does.
TL;DR
<html>
<body>
<!--
Using the `aria-label` attribute to give the button
a more accessible name for what it does.
-->
<button aria-label="Go Home">Home</button>
</body>
</html>
For example, let's say we have a button on the webpage that goes back to the homepage of the webpage like this,
<html>
<body>
<button>Home</button>
</body>
</html>
Now to make the Home button more accessible to assistive technologies like screen readers, assistants, etc. we can use the aria-label attribute and give a value of Go Home since in our case it navigates to the home page of our webpage.
It can be done like this,
<html>
<body>
<!--
Using the `aria-label` attribute to give the button
a more accessible name for what it does.
-->
<button aria-label="Go Home">Home</button>
</body>
</html>
Now the button is accessible to assistive technologies and has a meaning to what it does.
See the above code live in codesandbox.
That's all 😃.
Top comments (0)