How to add “SKIP TO MAIN CONTENT” to websites

As part of this blog post let’s see what is web accessibility, and how to add “skip to main content” link for web pages and why?.

Accessibility

As per w3.org

Web accessibility means that websites, tools, and technologies are designed and …


This content originally appeared on DEV Community and was authored by Kritika Pattalam Bharathkumar

As part of this blog post let's see what is web accessibility, and how to add "skip to main content" link for web pages and why?.

Accessibility

As per w3.org

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web
contribute to the Web

For a normal user when he visits a page, he/she directly jumps to the section of the page where they want to read. But if we consider visually impaired users or someone who uses screen reader, the assistive device has to read through the entire page before they can reach a point which interests them.

Let's assume when a user lands on the page , the screen reader will read the entire navigation/header and then goes to the actual content of the page. The user reads through the first page of your website once, now he/she goes to the second page and the screen reader will again start reading the entire navigation for them before they can go to the main content. This is where "SKIP TO MAIN CONTENT" link comes in handy for them.

How to add "SKIP TO MAIN CONTENT" on the page

HTML

  • Inside the body tag add an anchor tag as the first element.
  • Add an id to the content you want the screenreader to jump/skip to. eg: 'main-content'
  • Add the same id as the href value to the anchor tag eg: 'main-content' 
<body>
    <a class="skip-link" href="#main-content">SKIP TO MAIN CONTENT</a>
    <header> .....</header>
    <main id="main-content">
         Main Body Content .....
    </main>
    <footer>......</footer>
</body>

CSS

  • Add CSS to the link to hide it from view. [P.S Do not use display:none or visibility hidden because screen readers will not read the element. Our main focus is for the screen reader to read the link]
  • When the screenreader focuses on that element, make the element visible and also the screen reader will read the content inside the anchor tag . i.e "SKIP TO MAIN CONTENT" in our example. 
.skip-link {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.skip-link:active, .skip-link:focus {
    color: #000;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto
}

References

Checkout my other blog posts

Please share your feedbacks and suggestions in the comments below.

Lets connect on Twitter | LinkedIn for more web development related tips & tricks.


This content originally appeared on DEV Community and was authored by Kritika Pattalam Bharathkumar


Print Share Comment Cite Upload Translate Updates
APA

Kritika Pattalam Bharathkumar | Sciencx (2021-08-21T01:23:37+00:00) How to add “SKIP TO MAIN CONTENT” to websites. Retrieved from https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/

MLA
" » How to add “SKIP TO MAIN CONTENT” to websites." Kritika Pattalam Bharathkumar | Sciencx - Saturday August 21, 2021, https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/
HARVARD
Kritika Pattalam Bharathkumar | Sciencx Saturday August 21, 2021 » How to add “SKIP TO MAIN CONTENT” to websites., viewed ,<https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/>
VANCOUVER
Kritika Pattalam Bharathkumar | Sciencx - » How to add “SKIP TO MAIN CONTENT” to websites. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/
CHICAGO
" » How to add “SKIP TO MAIN CONTENT” to websites." Kritika Pattalam Bharathkumar | Sciencx - Accessed . https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/
IEEE
" » How to add “SKIP TO MAIN CONTENT” to websites." Kritika Pattalam Bharathkumar | Sciencx [Online]. Available: https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/. [Accessed: ]
rf:citation
» How to add “SKIP TO MAIN CONTENT” to websites | Kritika Pattalam Bharathkumar | Sciencx | https://www.scien.cx/2021/08/21/how-to-add-skip-to-main-content-to-websites/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts