WCAG fixes
This commit is contained in:
@@ -1,3 +1,23 @@
|
|||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: #70ffd7;
|
||||||
|
color: #1b1e22;
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 0 0 0.25rem;
|
||||||
|
transition: top 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link:focus {
|
||||||
|
top: 0;
|
||||||
|
outline: 2px solid #70ffd7;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -59,7 +59,8 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="container">
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||||
|
<main id="main-content" class="container" tabindex="-1">
|
||||||
<div class="emoji">🛸</div>
|
<div class="emoji">🛸</div>
|
||||||
<h1>Nothing to See Here</h1>
|
<h1>Nothing to See Here</h1>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
Reference in New Issue
Block a user