Skip to content

Instantly share code, notes, and snippets.

@lkopacz

lkopacz/index.html

Last active April 19, 2022 17:40
Show Gist options
  • Save lkopacz/71848ff4be5bbc758c42d0326bbe95bc to your computer and use it in GitHub Desktop.
Save lkopacz/71848ff4be5bbc758c42d0326bbe95bc to your computer and use it in GitHub Desktop.
Download ZIP
Skip to content
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="focusable visually-hidden" href="#main">Skip to Content</a>
<header>
<!-- All the Navigation Links and your logo -->
</header>
<main id="main">
<!-- All the rest of your content -->
</main>
<!-- The rest of your HTML -->
</body>
</html>
Raw
style.css
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.focusable.visually-hidden:focus {
position: relative;
left: 0;
width: auto;
height: auto;
overflow: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment