How can we help?

"Skip to main content" option

Franziska Dienst
Franziska Dienst
  • Updated

When semantic HTML and ARIA is used, it’s easy to identify the main content of the website. That’s why you should add a “Skip to main content” option to your website to make it easier for people to be directed to the important content. 

The “Skip to main content” option is implemented in all Sitejet templates by default. You can see this option when opening the website and using the Tab key to move through the website. The “Skip the main content” button will appear as the first option in the top left corner. 

Skip to main content.PNG

To add the “Skip to main content” to your website follow these steps: 

  1. Open the “Code” panel
  2. Go to “Global” > “HTML”
  3. Add the following in front of {{content}}
    <a href="#main-content" class="button wv-link-content">Skip to main content</a>
  4. Save the website

Multilanguage options

  1. You can adjust the button code and add different languages with HTML tags: 
    <button>
        <span lang="en">Skip to main content</span>
        <span lang="de">Zum Hauptinhalt springen</span>
    </button>
  2. You can remove the HTML code from “Global” > “HTML” and add it in an HTML element at the top of the page with the respective language
  3. Use a JS snippet (AI can help you create one) to adjust the text depending on the language

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.