Search code examples
hyperlinkaccessibilitytailwind-css

How to add a "Skip to main content" link that only shows to screen readers, using Tailwind CSS?

The video below describes adding a "Skip to main content" link at the top of a web page and making it visible only by users with screen readers, using plain CSS.

The idea is to improve accessibility by allowing screen readers a way to bypass all the navigation, etc. and get to the main content

How can this be done with Tailwind CSS?

https://www.youtube.com/watch?v=VUR0I5mqq7I

Solution

  • Tailwind CSS let you designate elements as on visible to screen readers via "sr-only"

    Code example (just inside the tag):

    <a href="#main-content" class="text-center bg-black text-white underline text-2xl sr-only focus:not-sr-only">Skip to main content</a>

    And then add <main id="main-content"> where the main content begins on that page.

    And lastly, add the closing </main> tag right after the page's main content ends.

    Link to TailwindCSS's screen reader only documentation