Nomeando várias regiões com aria-label

Many pages have a main menu and a footer menu. Both are nav landmarks, and without names they sound identical to a screen reader.

Add aria-label to give a landmark a short, spoken name. Now the screen reader can tell your two navs apart.

An aria-label should be a couple of words, like Main or Breadcrumb. Users hear it announced, so brevity respects their time.

Write Footer, not Footer navigation. The screen reader already says navigation, so adding it again is just noise.

If a region already has a visible heading, point to it with aria-labelledby instead of typing the name twice.

Use aria-label when there is no visible text, and aria-labelledby when a heading or text on screen can serve as the name.

Naming is not just for nav. Label an aside or a section so users know what each region holds.

If a page has only a single nav, it needs no label. Naming matters most when two regions share the same role.

Give each region a distinct name. Two navs both labeled Menu defeats the purpose, since users still cannot tell them apart.

With names in place, the landmark list reads Main navigation and Footer navigation, so users pick the right one instantly. 🔊

An aria-label is announced but never shown on screen, so it changes nothing visually while helping every screen reader user.

You have two nav regions. What is the best label for the bottom one?

You learned to label repeated landmarks with aria-label or aria-labelledby, keeping names short, distinct, and role-free. 🙌