sutty-base-jekyll-theme/_sass/accessibility.scss

////
/// 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);
  }
}