Improve your websites accessibility

[00:00:05] Hi and welcome.
[00:00:06] Today I am going to guide you through how to add a "Skip to main content" link on a website.
[00:00:11] A Skip to main content link helps users jump straight to the main part of a webpage, skipping over navigation menus or repeated elements.
[00:00:18] This is especially important for people using screen readers or keyboard navigation.
[00:00:23] To create one, you first need to add an identifier, an ID in the HTML where you want the user to jump to.
[00:00:30] Each element can only have one ID, and in this website’s code, the main section already has one. So instead, we’ll add our new ID to the h2 element just below it.
[00:00:40] We’ll use id="maincontent", but you can name it whatever makes sense for your site.
[00:00:46] Next, we’ll add the actual skip link. This is a hidden button that appears right at the start of the webpage’s body, before the wrapper. We’ll hide it later using CSS.
[00:00:56] To add the button, include a href="#maincontent" (so it will go to the place you made before) class="skip-link" (so you can add styling later) Skip to main content (What will actually show on the button) and then close it off.
[00:01:15] Remember to add this button to every page, so users can always skip directly to the main content.
[00:01:22] Now, we’ll use CSS to hide the button so it doesn’t interfere with the layout or design, but is still readable by screen readers.
[00:01:30] We’ll target the class that we added .skip-link and add the following styling. We’ll use position: absolute; so we can place it exactly where we want, ignoring the normal layout rules.
[00:01:43] We’ll move it off-screen by setting it to the left with a negative number, so left -10,000px;.
[00:01:51] To make it tiny, we’ll set the width and height to 1px,
[00:01:54] and to ensure anything outside the box stays hidden, we’ll add overflow: hidden;
[00:01:59] However, we still want it to appear when the user tabs through the page. So, to do that, we’ll add styling for .skip-link:focus When the link is in focus, we’ll change the position to static; which brings it back to its normal spot so the user can see and use it.
[00:02:17] And now, when we tab through the page, the Skip to main content button becomes visible, allowing you to jump right to the main content and skip all the repeated navigation.
[00:02:27] When you refresh the page, the button is hidden again, ready for the next user.