Add skip link and semantic HTML landmarks

2026-02-19 21:16:58 +02:00
parent 654f78dfd2
commit dfd5de97bc
2 changed files with 71 additions and 26 deletions
--- a/src/styles.css
+++ b/src/styles.css
@@ -153,6 +153,26 @@ html, body, #root {
  overflow: visible;
 }

+/* Skip link - WCAG 2.4.1 */
+.skip-link {
+  position: fixed;
+  top: -100%;
+  left: 16px;
+  z-index: 99999;
+  padding: 8px 16px;
+  background-color: var(--color-accent);
+  color: white;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+  top: 8px;
+}
+
 /* App container */
 .app-container {
  display: flex;