Add skip link 'Saltar al contenido' for keyboard/screen reader accessibility
Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/6f9c00f2-c1ee-4dc2-80fb-2596645e9221 Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>
This commit is contained in:
committed by
GitHub
parent
71cbf6825e
commit
63df5cf73f
@@ -1,3 +1,20 @@
|
|||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
top: -40px;
|
||||||
|
left: 0;
|
||||||
|
background: #513CB0;
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
z-index: 10000;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 0 0 4px 0;
|
||||||
|
transition: top 0.2s;
|
||||||
|
}
|
||||||
|
.skip-link:focus {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 1250px) {
|
@media (min-width: 1250px) {
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@@ -78,6 +78,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">
|
||||||
@@ -137,7 +138,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">
|
||||||
|
|||||||
Reference in New Issue
Block a user