aria-label = global?

Just wondering what this means exactly? It's used in several Tailwind components:

<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global"></nav>

<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global"></nav>

and described here in MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes

Some states and properties apply to all HTML elements regardless of whether an ARIA role is applied. These are defined as "Global" attributes. Global states and properties are supported by all roles and base markup elements.

Some states and properties apply to all HTML elements regardless of whether an ARIA role is applied. These are defined as "Global" attributes. Global states and properties are supported by all roles and base markup elements.

But I'm not sure this tells me anything? It doesn't even sound like it's applicable to one specific element? I was even more confused by the w3 spec 😆

ARIA states and properties - Accessibility | MDN

This page lists reference pages covering all the WAI-ARIA attributes discussed on MDN.

2 Replies

b1mind•2y ago

it would announce the name of the nav "global" They probably do that so it does not try to read a tailwind class as the nav name. You would want to rename it to what your nav name would be called probably. Open up a screen reader and try it !

JWode•2y ago

ohhh, of course, it's a value, not an aria property. I'm an idiot. and yeah, actually trying it with a screen reader is a good idea, thanks 🙂 - although I feel like this might be a painful experience with my code (that I most likely need). thanks for the quick response

Gaming

Programming

aria-label = global?