Modern QA2026Skip Links — tiles
Log inJoin
37 / 74 · 10 Visual & Accessibility Testing · Keyboard Navigation Testing← prev⊞ allnext →☰ Read as one page

7.5Skip Links

Skip links allow keyboard users to bypass repetitive navigation and jump directly to main content:

test('skip link is available and functional', async ({ page }) => {
    await page.goto('/');

    // Press Tab once -- skip link should be the first focusable element
    await page.keyboard.press('Tab');
    const skipLink = page.locator(':focus');
    const text = await skipLink.textContent();
    expect(text?.toLowerCase()).toContain('skip to');

    // Skip link should be visible when focused
    await expect(skipLink).toBeVisible();

    // Activate the skip link
    await page.keyboard.press('Enter');

    // Focus should move to the main content area
    const focusedId = await page.evaluate(() => document.activeElement?.id);
    expect(focusedId).toBe('main-content');
});