elordenador/proyecto-final
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Add "Saltar al contenido" skip link for keyboard/screen reader accessibility
This commit is contained in:
Daniel (elordenador)
2026-04-29 11:15:44 +02:00
committed by GitHub
parent 1f7db2db3a ba75a0ab2e
commit 7203a07350
2 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tienda/static/css/custom.css
+25
View File
@@ -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) { @media (min-width: 1250px) {
.grid { .grid {
display: grid; display: grid;
tienda/templates/tienda/base.html
+2 -1
View File
@@ -81,6 +81,7 @@
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body class="d-flex flex-column min-vh-100"> <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 %} {% cache 500 sidebar request.user.username %}
<nav class="navbar navbar-expand-md header" role="banner"> <nav class="navbar navbar-expand-md header" role="banner">
<div class="container-fluid"> <div class="container-fluid">
@@ -140,7 +141,7 @@
</nav> </nav>
{% endcache %} {% 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 --> <!-- Mensajes -->
{% if messages %} {% if messages %}
<div class="row mt-3"> <div class="row mt-3">