The Content inside the Aria-Label Is for Humans

Vanza Setia,

Estimated reading time: 1 minute

You do not write the following:

<nav aria-label="primary-navigation">
  <!-- a list of internal links -->
</nav>

Do not do that. The value of the aria-label is for humans. Instead, write the following:

<nav aria-label="Primary">
  <!-- a list of internal links -->
</nav>

Explanations:

  • Remove the "-navigation" because the <nav> element already has the semantic meaning as the navigation landmark.
  • No code is written there. This means we do not want screen readers or other assistive technologies to say something like, "primary dash navigation, navigation landmark." We want those tools to say, "primary, navigation landmark."
Share your thoughts

Topic(s).

Thank you for reading this The Content inside the Aria-Label Is for Humans. You can subscribe to all my articles with the Articles RSS. If you have a positive or negative comment, please send me an email or contact me through one of my social media accounts.

Share with your network

Copy this link and send it to great people only.

https://vanzasetia.xyz/blog/aria-label-human/

For you