Improve accessibility by adding skip links

Abstract

Enhance the accessibility of your website pages by adding skip links.

Skip links let website visitors bypass the blocks of content that are repeated on multiple web pages. For example, navigation links, heading graphics, and advertising frames. Visitors can skip navigation and jump straight to page content. Skip links also improve the experience for keyboard users.

To add a skip link:

  1. In the Experience Editor, on the relevant page, click Partial Designs, and then click Metadata.

    SXA-skip-link-partial-design.PNG
  2. In the Toolbox, in the Accessibility section, click the Skip Link rendering and then drag it to the page, immediately after the body tag. 

    SXA-skip-link.PNG
  3. In the Select the Associated Content dialog box, select a previously created skip link or create a new one.

    SXA-select-skip-link.PNG
  4. To style the skip link, in the Skip Link dialog box, click More, and then click Edit component properties content.

    SXA-skip-link-dialog.PNG
  5. In the Control Properties dialog box, you can assign a specific class to style the skip link.

    SXA-skip-link-class.PNG
  6. To change the ID or title of the skip link:

    • In the Content Editor, go to Tenant/Site/Data/Skip Links and, in the Data section, change the Content ID  field and/or the Title field.

      SXA-skip-link-in-CE.PNG
    • In the Experience Editor, in the Skip Link dialog, click Add or change the associated content and then click Edit the related item.

      SXA-skip-link-CE2.png
  7. Publish your site, open the home page and press the Tab key and you can jump directly to the main content section on the page.

    SXA-skip-link-main-content.png