Accessibility
Accessibility
Any QGDS Skip link should pass these WCAG 2.2 guidelines.
Test the Skip link component in your space
QGDS completes tests on all components to meet accessibility requirements. While QGDS provides accessible components by default, we recommend the Skip link component is also tested within the context of your own project or product to ensure an accessible experience.
Perceivable
Text meets 4.5:1 against background
When the skip link receives focus and becomes visible, the contrast between the text and background colour is at least 4.5:1.
WCAG 2.2: 1.4.3 Contrast (Minimum) (AA)
Operable
Link correctly bypasses blocks of content
When you press Enter on the focused skip link, the visual viewport and keyboard focus jump directly to targeted area. For example, using a matching HTML ID: <a href="#main-content">Skip to main content</a> points to <main id="main-content">.
WCAG 2.2: 2.4.1 Bypass Blocks (A)
Screen reader focus shifts correctly on activation
When the link is activated, the screen reader's programmatic focus moves to the target container. The very next element read by the screen reader should be the main <h1> or the beginning of the primary page content.
WCAG 2.2: 2.4.1 Bypass Blocks (A)
Focus order is logical
The skip link is the first focusable element on the page when user presses the Tab key, appearing before any header links or the main navigation. The only exception to this rule are global alerts which must be placed before any skip link so they cannot be accidentally bypassed.
WCAG 2.2: 2.4.3 Focus Order (A)
Screen reader announces link purpose clearly
When the skip link receives focus, the screen reader announces it as a link and clearly states its destination (e.g. "Skip to main content, link").
WCAG 2.2: 2.4.4 Link Purpose (In Context) (A)
Link is visually hidden until focused
When the page loads, the link is not visible. When you press the Tab key for the first time, the link becomes visible on the screen and clearly shows a visible focus indicator.
WCAG 2.2: 2.4.7 Focus Visible (AA)
Focus is not hidden by other elements
When the skip link receives keyboard focus, no part of it is hidden by other content non-modal dialogs or banners.
WCAG 2.2: 2.4.11 Focus Not Obscured (Minimum) (AA)
Focus indicator meets size and contrast requirements
The focus outline around the skip link is at least 2 CSS pixels thick and has a contrast ratio of at least 3:1 against the background colour.
WCAG 2.2: 2.4.13 Focus Appearance (AAA)
Link meets minimum target size
Even though the skip link is primarily a keyboard mechanism, it can be clicked with a mouse once visible. The clickable area of the link must be at least 24 by 24 pixels.