“Skip to Content” anchor links are an easy Divi accessibility improvement that you can add to your site (one of five such improvements that we talk about in this blog post about making your Divi site more accessible). They provide a way for site visitors using screen readers to skip over the header section of your page, which often contains elements that are repeated across your site, such as navigation menus, and jump directly to the page body content instead. While the header and navigation menus serve an important purpose, of course, they can present an obstacle to quickly obtaining the information being sought when there is no need for the entire menu or header to be read out. The Skip to Content link doesn’t need to be visible all the time; as long as it is focusable through keyboard input, it can be read out and activated when needed.

Here is how you can use the Divi theme builder to add one of these links to your site without requiring any additional plugins. This tutorial assumes that you are already using a Divi theme builder header on the pages on which you want to include the link.

1. 1. Add a text module to the start of your header.
   2. In the text module settings WYSIWYG editor (Text > Body), add the text that you would like to display for the jump link; for example, “Skip to Content”.
   3. Select the text you just added and click the link button in the editor toolbar.
   4. Enter #main-content as the URL.
      Skip to Content
   5. In the Text module settings Advanced tab, set CSS ID & Classes > CSS ID to content-jump-link.
   6. Close the Text module settings.
   7. Add a Code module below the text module.
   8. Set the Code module Text > Code field to the <style> tag and contents shown below.

1. Close the Code module settings.
2. Save the theme builder layout.

You can use the following styling code as a starting point. Of course, you may want to customize it to match the look and feel of your site.

The jump link will be hidden until it is focused. To simulate this with keyboard input, after loading a page containing the theme builder header, press the Tab key on your keyboard until you see the link (you may only have to press it once, or you may need to press it multiple times). It should look something like this:

Skip to Content

Pressing the Tab key again should make the link lose focus and disappear again.

For more ways to improve the accessibility of your Divi site, check out this blog post with Divi accessibility tips!