Skip to the content

  • 321abc

    (@deraxia)


    3 months, 3 weeks ago

    So TwentyTwenty has the skip to the content button for accessibility which is great, but how does it work?

    It links to a #site-content anchor, but there doesn’t seem to be anything with that anchor. Are we expected to add it manually with a function? Just wondering what is the intended implementation?

Viewing 1 replies (of 1 total)
  • clk87

    (@clk87)

    2 months, 2 weeks ago

    Hi there,

    Great question!

    The “Skip to the content” link points to #site-content, and that ID is applied to the <main> element in the theme’s markup. That means when someone activates the link (usually by pressing Tab to focus it and then hitting Enter), the browser jumps focus straight to the main content area of the page.

    You might not notice it at first glance when looking through the template files, but it’s there in the HTML output. If you view the source or inspect the page in your browser dev tools, you’ll see something like:

    <main id="site-content">
     
    </main>

    I recorded a video to demonstrate further. You can check it out here: https://d.pr/v/D16xSr

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.