{"id":2843,"date":"2025-11-17T15:47:40","date_gmt":"2025-11-17T20:47:40","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2843"},"modified":"2025-12-03T21:52:58","modified_gmt":"2025-12-04T02:52:58","slug":"skip-navigation","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/skip-navigation\/","title":{"rendered":"Skip navigation"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Skip navigation<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Skip Navigation (sometimes called Skip to Main) allows a user to jump to the main content of a page without needing to read the heading and navigation on every page they click on.<\/p>\n

Appropriate use<\/strong><\/h2>\n

Skip to Main is a hidden link that allows screen readers to skip reading through the navigation bar every time they get to a new page, allowing them to quickly jump to the main content.<\/p>\n

There are a few ways to implement this, but one common method is to add the following code directly after the opening body tag on your site:<\/p>\n

\r\n <body>\r\n        <a href=\"#main\" class=\"skip-to-main-content-link\"> Skip to main content <\/a>\r\n        ...\r\n        ...\r\n        <main id=\"main\">\r\n        ...\r\n        <\/main>\r\n    <\/body>\r\n<\/code><\/pre>\n
To hide this button off screen, you can add the below line of code to your .CSS file:<\/p>\n
\r\n.skip-to-main-content-link {\r\n        position: absolute;\r\n        left: -9999px;\r\n        z-index: 999;\r\n        padding: 1em;\r\n        background-color: black;\r\n        color: white;\r\n        opacity: 0;\r\n      }\r\n      .skip-to-main-content-link:focus {\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        opacity: 1;\r\n      }\r\n\r\n<\/code><\/pre>\n
How to test for compliance<\/strong><\/h2>\n
When the page loads, you should press your\u00a0Tab Key<\/em>. An element should appear on the screen that reads \u201cSkip to Main\u201d or \u201cSkip Navigation.\u201d<\/p>\n
\"\"<\/figure>\n
Common mistakes<\/strong><\/h2>\n
Link doesn\u2019t point to a location:<\/strong>\u00a0A very common mistake we see is for a \u201cSkip to Nav\u201d to exist in the template, but the end user has not identified the point on the page to link to. This essentially creates a dead link on your page. It\u2019s important that at the beginning of your main content you are identifying id=\u201dmain\u201d for the link to work.<\/p>\n
Link takes you to the top of the page:<\/strong>\u00a0This link should not bring you to the top of the page, as it then does not serve any purpose. It needs to bring you to a location after the main navigation.<\/p>\n
Other resources<\/strong><\/h2>\n