--- title: "Skip Link" path: https://www.eonshowroom.eon.com/en/specials/skip-link.html lastModified: 2026-09-03T12:03:19.776Z --- # Skip Link # Skip Link (Context Aware Configuration) The Skip Link Feature is a critical Accessibility component designed to improve Keyboard Navigation and meet global WCAG Compliance standards. It allows Keyboard Users and Screen Readers to bypass repeated Navigation blocks and jump directly to key page sections upon pressing the **TAB** Key. The feature is implemented via the **Web Component and integrated into the page header template. ### Skip Link Features - Screen Reader Optimization: Supports custom a11yAriaLabel overrides for Assistive Technologies. - Central Site Management: Configure global Labels, Target IDs, and Accessibility Options centrally. - Flexible Visibility Toggles: Allows Editors to disable specific Anchors (such as the Navigation Link) directly within the CAC options. - Single Main Content Rule: Built-in validation ensures only one Anchor is set as isMainContent. ## Configuration ### Skip Link editing in a nutshell Main configuration options in FoundationNG Site Config (CAC) - Label: The visible text displayed when the link receives keyboard focus (e.g., "Skip to content"). - Target ID:The target section anchor ID (navigation, main-content, footer). - Is Main Content: Checkbox marking the primary content anchor (only one item can be set to true). - A11y ARIA Label: Custom screen reader announcement to provide extended context (e.g., "Skip to main content"). ### In this how to Quick jump to the most relevant how to topics - Predefined default targets - Configuring labels and ARIA tags - Enabling and accessing Skip Links - Testing keyboard navigation #### Predefined Out-of-the-Box Defaults If no custom configuration is maintained in your Site Config, the system automatically provides: - Navigation → Target: #navigation (Enabled by default) - Main Content → Target: #main-content (Enabled by default, isMainContent: true) - Footer → Target: #footer (Enabled by default) ![](https://www.eonshowroom.eon.com/cdm-assets/is/content/eon/digit-1?ts=1789378602977) #### Access Site Configuration Open your site’s Context-Aware Configuration root page *(/content/foundationNG/config.html)* and select **Site Configuration** (*SiteConfig*). ![](https://www.eonshowroom.eon.com/cdm-assets/is/content/eon/digit-2?ts=1789378603122) #### Maintain Link Properties Under the Skip Links section, maintain or override the default links: - **Enter Label:** Define a clear action label (e.g., "Skip to main content"). - **Select Target ID:** Assign the corresponding anchor ID (*navigation*, *main-content*, or *footer*). - **Set Main Content Flag:** Ensure exactly one item has the *isMainContent* flag activated. - **Optional ARIA Label:** Add an explicit screen reader override if additional context is needed. - **Disabling Links**: Remove an entry or toggle off the link if a specific section should not have a skip link. ![](https://www.eonshowroom.eon.com/cdm-assets/is/content/eon/digit-3?ts=1789378603238) #### Save and Publish Save the configuration and publish the configuration root page to deploy changes to the live site. ### ##### Targets & Accessibility for SEO & WCAG Each skip link setting ensures accessibility compliance without cluttering the visual UI: - **Hidden by default:** Links remain hidden off-screen until a user presses the Tab key. - **Select Target ID***:* Enter the anchor name **without** a hash symbol (navigation, main-content, or footer). The component automatically adds the # anchor prefix. - **Fixed Rendering Order:**Skip links are always rendered in the logical order (Navigation → Main Content → Footer). ##### Try it yourself: Interactive Demo Experience how skip links work directly on this page: 1. Reload this page. 2. Without clicking anywhere with your mouse, press the Tab key on your keyboard. 3. The Skip Link menu will appear at the top-left corner of the screen. 4. Use Tab to cycle through targets and hit Enter to jump straight to that section. ## Does, Don'ts ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/dcc25bcb-4735-4645-9822-b49fb3ae81b1?fmt=webp) ### What you should do - Keep labels short: Use clear, recognized action phrases such as "Skip to content" or "Skip to footer". - Verify Main Content Flag: Ensure exactly one link is marked as the main content target. - Test via Keyboard: Always test published pages by pressing Tab immediately after reload. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/9884279e-1390-4634-bda2-7b7d4dc1e149?fmt=webp) ### What you shouldn't do - Don't use multiple Main Content flags: Never assign isMainContent to more than one target. - Don't invent custom Target IDs: Always use the supported fixed anchor targets (navigation, main-content, footer). - Don't leave labels empty: A skip link without a label will fail WCAG compliance criteria. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_1-3%3A2-1?fmt=webp-alpha) ## Common Settings Across Components Explore these deep-dive resources to understand how centralized folder management and smart asset handling can significantly speed up your content creation while maintaining the highest visual standards ### Context-Aware Configuration (CAC) Learn how to manage global and brand-specific settings across your sites. [Learn more about Configuration Pages](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ### Accessibility Standards & Guidelines Learn more about WCAG 2.1 compliance, keyboard navigation, and ARIA labels. [Learn more about Accessibility Guidelines](https://www.eonshowroom.eon.com/en/aem-basics/accessibility.html)