How to set an accessible name to an interactive HTML element?

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 😃.