Sha256: 4ea9f1b5d1a0e803647251f35f582aa956e52ccab5aaa3c69496c760faadf788
Contents?: true
Size: 1.42 KB
Versions: 8
Compression:
Stored size: 1.42 KB
Contents
////
/// Accesibilidad
/// @group Accesibilidad
////
/// La navegación es suave. Esto hace que al navegar a elementos dentro
/// de la misma página no haga un salto, sino que haya una transición.
///
/// Es especialmente útil en sliders.
///
/// Sin embargo puede producir mareos a algunas personas.
* { scroll-behavior: smooth; }
/// Aquí se aplica la opción `prefers-reduced-motion: reduce`, pero
/// SassDoc no la estaría mostrando.
@media (prefers-reduced-motion: reduce) {
/// Si les usuaries prefirieron reducir las animaciones de los sitios,
/// deshabilitamos la navegación suavizada y las animaciones.
* {
scroll-behavior: auto !important;
animation: none !important;
}
}
/// Utilizamos Axe para poder marcarnos cuáles elementos no cumplen con
/// parámetros de accesibilidad durante el desarrollo. Esta clase
/// muestra un borde rojo alrededor de los elementos inaccesibles y al
/// obtener el foco, muestra los mensajes de error generados por Axe.js.
///
/// @link _packs/entry.js
.inaccesible {
outline: $red 1px solid;
@extend .position-relative;
&:focus::after {
@extend .position-fixed;
@extend .background-red;
@extend .white;
@extend .p-3;
left: 0;
bottom: 0;
width: 100vw;
font-size: 1rem;
word-wrap: normal;
line-break: auto;
white-space: pre-line;
/// El contenido se trae desde el ariaLabel del elemento.
content: attr(aria-label);
}
}
Version data entries
8 entries across 8 versions & 2 rubygems