Mechanisms such as skip links and landmarks that let users jump past repeated content directly to main sections.
Bypass blocks, commonly implemented as skip links, are mechanisms that allow users to skip repetitive navigation and jump directly to main content. These are essential for keyboard users and screen reader users who would otherwise have to navigate through lengthy navigation menus on every page.
The most common implementation is a "Skip to main content" link that appears when focused, allowing users to bypass site navigation, headers, and other repetitive elements. This is particularly important for screen reader users who hear all navigation items announced on every page load.
Bypass blocks are required by WCAG 2.1 Success Criterion 2.4.1 and are considered one of the most impactful accessibility improvements a website can make. They demonstrate that the site was designed with keyboard and screen reader users in mind from the beginning.
Proper bypass block implementation requires careful consideration of user needs and technical requirements:
Visibility: Skip links should be visually hidden by default but become visible when focused. This prevents visual clutter while ensuring keyboard users can access them.
Positioning: Place skip links at the very beginning of the page, before any other interactive elements. Screen readers will encounter them first.
Targeting: Skip links should target the main content area using proper IDs. Common targets include `#main`, `#content`, or `#main-content`.
Multiple Options: Consider providing multiple skip options for complex sites: "Skip to main content," "Skip to navigation," "Skip to search," etc.
Testing: Test skip links with actual screen readers and keyboard navigation to ensure they work as expected across different browsers and assistive technologies.
Visual Design: When skip links become visible on focus, ensure they have adequate color contrast and are clearly distinguishable from other page elements.
Join over 1 million websites using WebAbility to ensure digital accessibility compliance and provide equal access to all users.
A navigational aid that shows the page’s position in the hierarchy. Mark up with nav and aria-label="breadcrumb".
Single‑letter keyboard shortcuts that must be remappable, turned off, or only active on focus to prevent accidental activation.
Numeric ratio expressing luminance difference between two colors. Common thresholds: 4.5:1 for normal text, 3:1 for large text or UI.
In WCAG, a guideline groups related success criteria under the POUR principles and provides intent and techniques.
Transient content that appears on hover or focus, which must be dismissible, hoverable, and persistent while being hovered.
This glossary is continuously improved and maintained by WebAbility to advance accessible design and development.Contact us to suggest improvements or report issues.