Merge pull request #48 from dsaub/copilot/add-skip-link-to-body

Add "Saltar al contenido" skip link for keyboard/screen reader accessibility
2026-04-29 11:15:44 +02:00
parent 1f7db2db3a ba75a0ab2e
commit 7203a07350
2 changed files with 27 additions and 1 deletions
@@ -1,3 +1,28 @@
+.skip-link {
+  position: fixed;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff;
+  color: #513CB0;
+  padding: 8px 24px;
+  font-weight: 700;
+  font-size: 0.9rem;
+  z-index: 10001;
+  text-decoration: none;
+  border-radius: 0 0 8px 8px;
+  border: 2px solid #513CB0;
+  border-top: none;
+  box-shadow: 0 4px 12px rgba(81, 60, 176, 0.25);
+  transition: top 0.2s ease;
+  outline: none;
+  white-space: nowrap;
+}
+.skip-link:focus,
+.skip-link:focus-visible {
+  top: 0;
+}
+
@media (min-width: 1250px) {
  .grid {
    display: grid;
@@ -81,6 +81,7 @@
    {% block head %}{% endblock %}
 </head>
 <body class="d-flex flex-column min-vh-100">
+    <a href="#main-content" class="skip-link">Saltar al contenido</a>
    {% cache 500 sidebar request.user.username %}
    <nav class="navbar navbar-expand-md header" role="banner">
        <div class="container-fluid">
@@ -140,7 +141,7 @@
    </nav>
    {% endcache %}

-    <div class="container-fluid flex-grow-1 d-flex flex-column" role="main">
+    <div id="main-content" class="container-fluid flex-grow-1 d-flex flex-column" role="main">
        <!-- Mensajes -->
        {% if messages %}
        <div class="row mt-3">