Navigation Conventions

What are Navigation Conventions?

Navigation conventions refer to the common patterns and structures that make websites predictable and easy to use. Think of them as the “rules of the road” for web browsing, what users have come to expect of online content since the web became mainstream. 

Key navigation conventions include:

• Linking logos: The website's logo is expected to link to the home or default page.

• Logo placement: Logos are expected to be in the top left-hand corner of the page.

• Skip navigation links: These allow users to bypass repetitive blocks of content.

• Responsive navigation: How primary navigation adapts and functions on different screen sizes, often collapsing into a "hamburger" menu icon.

• Consistent navigation: Menus are kept in a consistent spot across every web page.

Adhering to these familiar navigation practices makes it easier for users to understand how to move through your site without confusion or unnecessary effort.

How Do Navigation Conventions Impact Accessibility?

Adhering to navigation conventions is vital for accessibility because:

• It ensures that online interactions behave predictably for all users, including those with disabilities.

• Keyboard navigation becomes more efficient, preventing discomfort or potential injury for users who cannot use a mouse. Skip links, for instance, make it easy to bypass blocks of content repeated on multiple web pages.

• It guarantees that interactive elements, such as responsive navigation buttons, are operable with a keyboard, touch, or mouse, supporting diverse input methods.

• It improves clarity, as elements like responsive menu buttons are consistently labeled (e.g., "Menu" or "Navigation"), making them understandable for screen reader users.

What WCAG Success Criteria are Relevant for Navigation Conventions?

Navigation conventions directly support several Web Content Accessibility Guidelines (WCAG) success criteria, including:

• 2.4.5 Multiple Ways: Providing a logo that links to the home page offers an additional way to locate it, beyond a sitemap or main menu.

• 3.2.3 Consistent Navigation: The home link on the logo ensures that navigation elements maintain their same relative order when repeated across pages, unless a user initiates a change.

• 2.4.1 Bypass Blocks: Skip navigation links enable users to easily bypass blocks of content that are repeated on multiple web pages.

• 2.1.1 Keyboard: All content functionality, including skip links and responsive navigation buttons, must be operable through a keyboard interface. This criterion emphasizes that no specific timings for individual keystrokes should be required.

• 1.3.1 Info and Relationships: The labeling of responsive navigation buttons (e.g., "Menu" or "Navigation") ensures that information, structure, and relationships conveyed through presentation are programmatically determinable or available in text.

How Do I Maximize Accessibility When I Code Navigation?

Accessible navigation is about more than just making clicks clickable; it’s about ensuring all users can reliably understand, reach, and interact with your site’s content. 

To implement accessible navigation conventions:

• Linking Logos:

  • Link to the homepage or default page: Users expect the website's logo to return them to the home or default page.

  • Clearly describe the link destination: Use meaningful link text like “Homepage - Company Name” so screen reader users understand where the link leads.

  • Add a brief description in the logo's alt attribute: This provides context for users who cannot see the logo.

• Skip Navigation Links:

  • Add keyboard-focusable skip navigation links: These allow users to bypass repetitive menus and move directly to the main content, improving efficiency for keyboard and screen reader users.

  • Target the main content landmark: Point the skip link to the same main element to ensure users reach the primary content without extra navigation  (e.g., <main> HTML element).

  • Hide links visually but keep them accessible: To be effective for sighted keyboard users without being intrusive, create a link that is hidden off-screen with CSS until the user navigates to it with a keyboard.

• Responsive Navigation:

  • Label collapsed navigation clearly: When primary navigation collapses into a button (e.g., "hamburger" icon), always label the button simply "Menu" or "Navigation".

  • Ensure full operability: Ensure both the button and the expanded main navigation are operable with a keyboard, touch, or mouse.

  • Prioritize semantic HTML elements: Use <button> for interactive controls rather than generic <div> or <span>, as they have built-in accessibility features and are well understood by browsers and assistive technologies.

How Do I Test the Accessibility of Navigation?

Thorough testing is crucial to ensure navigation conventions are truly accessible. Even if your code follows best practices, real-world testing with assistive technologies and keyboard navigation is essential to fully catch usability barriers.

Below are a few ways to test how accessible your navigation is:

Keyboard Navigation

Testing navigation with only a keyboard helps simulate the experience of users who cannot use a mouse. To this effectively:

• Use the Tab key to navigate interactive elements forward and Shift + Tab to navigate backward.

• Use Enter to activate links or buttons and submit forms.

• The Spacebar should activate checkboxes and buttons, and expand select menus.

• Arrow keys should navigate radio buttons, select boxes, sliders, tab panels, and tree menus.

• The Escape key should close dialogs and menus.

• Verify that "skip" links work correctly and are visible to sighted keyboard users when focused.

• Confirm that every focusable element has a visible focus indicator/outline with at least a 3:1 color contrast.

• Ensure the navigation order of the entire page is logical and intuitive.

Screen Reader Testing

Screen readers provide insight into how users relying on assistive technology experience your navigation. Best practices for testing include:

• Use screen readers on more than one platform or device. For example, use VoiceOver for Apple products, TalkBack for Android, and NVDA for Windows.

• Use arrow keys and gestures: Navigate through the page using the arrow keys and mobile gestures to check if it moves in a meaningful, predictable, and logical order.

• Use screen reader quick keys: Test headings (H), links (L), buttons (B), and form fields to ensure users can jump efficiently between interactive elements. 

• Access the screen reader's element lists: Review landmarks, buttons, links, and form fields using VoiceOver’s Rotor or NVDA’s Elements List. Listen for clear descriptions and correct roles.

• Testing linking logos: Listen to ensure the link destination and logo description are read by the screen reader.

Additional Tips

• Test with both desktop and mobile to capture different interaction patterns.

• Combine keyboard and screen reader testing for a realistic experience.

• Document any issues and fix them iteratively; even small improvements, like a visible focus indicator or a correct ARIA label, can make a significant difference.

How Do I Add Accessible Coding to My Routine?

Incorporating accessibility into your coding workflow ensures it becomes a natural part of building online content, rather than an afterthought. Here’s how to make accessible coding a routine habit:

• Integrate accessibility into your development process: In agile workflows, include accessibility acceptance criteria for each user story. In waterfall workflows, treat accessibility as part of the requirements phase. This ensures that accessibility is considered at the same time as functionality, not added later.

• Start small and build confidence: Focus on a single element type (e.g., buttons, links, forms, etc.) and make sure they meet all accessibility requirements before moving on to more complex elements. 

• Use checklists and automated tools: Keep a short checklist of accessibility best practices and use automated tools to catch common issues early.

• Make it part of your code review: Encourage your team to check for accessibility during peer reviews, just like security or performance. Over time, accessibility will become second nature.

• Iterate and learn: Accessibility is a skill that improves with practice. Review your work regularly, test with real users or assistive technologies, and refine your approach. Treat every project as an opportunity to reinforce accessible coding habits.