{
    "slug": "skip_links",
    "term": "Skip Links & Bypass Blocks",
    "category": "accessibility",
    "difficulty": "beginner",
    "short": "Hidden links at page top letting keyboard users jump past navigation to main content — a WCAG 2.4.1 requirement.",
    "long": "Skip links are the first focusable element, visually hidden until focused, linking to main content anchor. Without them keyboard users Tab through all navigation on every page. WCAG 2.1 SC 2.4.1 requires a mechanism to bypass repeated blocks. Implementation: position:absolute; left:-9999px becoming left:0 on :focus.",
    "aliases": [
        "skip navigation",
        "skip to main content",
        "WCAG 2.4.1"
    ],
    "tags": [
        "accessibility",
        "html",
        "css"
    ],
    "misconception": "Skip links are only for screen readers — all keyboard users benefit; tabbing through 40 nav links on every page is exhausting.",
    "why_it_matters": "Skip links are the most impactful accessibility feature for keyboard users on content-heavy pages — without one, tabbing to the main content of a news article or documentation page requires pressing Tab 30–50 times through the navigation. They are invisible to mouse users by default (shown only on focus) and take under ten minutes to implement. Despite this, they are missing from the majority of websites. Screen reader users and power keyboard users notice their absence immediately.",
    "common_mistakes": [
        "Target not focusable — tabindex=-1 required",
        "Hidden with display:none",
        "Only one skip link for complex pages"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "keyboard_navigation",
        "wcag_guidelines"
    ],
    "prerequisites": [
        "keyboard_navigation",
        "html_semantic",
        "wcag_guidelines"
    ],
    "refs": [
        "https://webaim.org/techniques/skipnav/"
    ],
    "bad_code": "<!-- No skip link — 35 nav links before content -->",
    "good_code": "<a href=\"#main\" class=\"skip-link\">Skip to main content</a>\n<main id=\"main\" tabindex=\"-1\">...</main>\n<style>.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem}</style>",
    "quick_fix": "Add a visually-hidden skip link as the first element in your HTML body: <a href='#main' class='skip-link'>Skip to main content</a> — show it on focus so keyboard users can bypass navigation",
    "severity": "high",
    "effort": "low",
    "created": "2026-03-16",
    "updated": "2026-03-23",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/skip_links",
        "html_url": "https://codeclaritylab.com/glossary/skip_links",
        "json_url": "https://codeclaritylab.com/glossary/skip_links.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Skip Links & Bypass Blocks](https://codeclaritylab.com/glossary/skip_links) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/skip_links"
            }
        }
    }
}