Forem

Cover image for Navigation between pages
Julia πŸ‘©πŸ»β€πŸ’» GDE
Julia πŸ‘©πŸ»β€πŸ’» GDE

Posted on β€’ Edited on

4

Navigation between pages

Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.

Best practices

In this article I will provide several tips on how to work with navigation between pages.

Semantic HTML and Role

When creating a navigation menu, the semantic HTML tag <nav> or its equivalent role role="navigation" should be used.

Also make sure to keep the number and order of the links in the navigation menu consistent throughout all pages.

Landmarks

It's possible to have several navigation menus on a site. That's when landmarks come in handy. Mark the main navigation as such, or a side navigation menu. This makes it possible for screen reader users to find the menus within the list of landmarks.

Refrain from making all set of links on a page a navigation landmark, only the most important ones.

Visibility

To make it easier for the user to know, no matter if visible or via screen reader, which page the current/active page is, you could add a special styling for that specific link or add ARIA (like, aria-label, aria-labelledby, or aria-describedby).

Future: The aria-current attribute hopefully is official soon.

Example

<a href="#hello" aria-label="Current page: Hello, World!">
    Hello, World!
</a>
Enter fullscreen mode Exit fullscreen mode

When assigning aria-label to a focusable element, like the <a>tag here, the screen reader will announce the text in the aria-label instead of the link text (which is still visible for user not using a screen reader).


Follow me for more accessibility content on:

Website - accessibilityfirst.xyz
Instagram - accessibilityfirst
LinkedIn - accessibilityfirst

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (0)

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay