People with perfect vision can quickly glance at a web page layout and find content based on visual cues. Screen reader users, keyboard-only users, and others need well-structured navigation to efficiently find and access content.
Overview
Not everyone navigates the web the same way. If they can use a mouse, they can easily click on any link or control. But screen reader users, keyboard-only users, and others need well-structured navigation to efficiently find and access content.
Why this matters
Consistent, accessible navigation allows all users to find content efficiently. Screen reader users rely on proper semantic HTML navigation landmarks and skip links to bypass repetitive navigation elements and jump directly to main content. Keyboard-only users depend on logical navigation order and clearly visible focus indicators. Users with cognitive disabilities benefit from consistent navigation patterns that appear in the same location and function the same way across all pages. When navigation is inaccessible or inconsistent, it becomes a significant barrier that prevents users from finding the information they need.
Techniques
HTML Navigation
- Good semantic structure (page regions and headings) helps screen reader users navigate to specific sections
- Sighted keyboard users don’t typically benefit from page regions/headings directly
- Additional techniques needed for keyboard users
Skip to Main Content Links
A same-page link targeting the id of the main content HTML element enables keyboard users to bypass navigation links and jump to main content. This is a common practice: position the link offscreen, then make it visible when focused via CSS.
For example, use CSS rules like position absolute offscreen, then on :focus revert to static position to show the skip link only when keyboard focus reaches it.
UGA CMS developers should confirm the skip-to-main-content link is present and functional in custom themes.
Documents Navigation
- Good heading structure helps screen reader users navigate document sections
- PDF files support Bookmarks for all users
Bookmarks in PDF
PDF files should include bookmarks for lengthy documents to enable all users to jump to chapters and sections.
- Select Bookmarks from the Navigation Pane in Acrobat Pro
- Use New Bookmarks from Structure
- Select H1, H2, and additional heading levels as appropriate
Balance detail with simplicity when choosing which heading levels to include as bookmarks.
Common mistakes
When building accessible navigation, avoid these frequent issues:
- No skip navigation link: Pages without a skip-to-main-content link force keyboard and screen reader users to tab through navigation on every page. Always include an accessible skip link.
- Inconsistent navigation across pages: Navigation that changes order, location, or function between pages confuses users who rely on consistent patterns. Keep navigation structure identical across the site.
- Dropdown menus not keyboard accessible: Dropdown menus that only open on hover are inaccessible to keyboard users. All navigation must be fully keyboard operable with proper focus management.
- No visible focus indicators on nav items: Users navigating with keyboard need to see where focus is. Never remove the default focus outline without providing a visible replacement.
- Navigation not contained in nav landmark: Navigation should be wrapped in a <nav> element so screen reader users can identify and skip to it. This helps users jump past navigation to main content.
- Mobile hamburger menus inaccessible to screen readers: Icon-only hamburger menu buttons without text labels are confusing. Always provide descriptive text or use aria-label=”Navigation”.
WCAG 2.1 Success Criteria
- 2.4.1 Bypass Blocks (Level A) – A mechanism is available to bypass blocks of content that are repeated on multiple Web pages
Getting help
If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.
- Contact DASH at [email protected] for consultations, training, or technical assistance.
- Visit the DASH training page for resources and learning opportunities.
Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.