Saltar al contenido
COMPAÑÍADE INNOVACIÓNDE SANTIAGO Style v10Sistema de diseño
Revisión
Menú
Índice de Kit UI
Kit UI Componentes

Skip link.

Patrón canónico de skip link para cis, cds, cochid y todos los sitios.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 2Círculo de Santiago · variación

Resultados de la búsqueda «agua potable rural» en leyes vigentes.

Nivel 3Dentro de una página
Sitio · sección

Encuesta Nacional de Empleo: resultados por región y trimestre móvil.

Ayuda · legal · estado
Ver y copiar el código de este render
HTML del nivel canónico
<div class="ui-sample"><a class="skip-link" href="#contenido-principal">Saltar al contenido principal</a><p id="contenido-principal">Encuesta Nacional de Empleo: resultados por región y trimestre móvil.</p></div>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Encuesta Nacional de Empleo: resultados por región y trimestre móvil.

Cambia en esta marca

  • Navegación y contenido propios del servicio
  • Acento reservado para acciones y datos

Permanece canónico

  • Mark CIS y namebrand de tres líneas
  • IBM Plex Sans, foco, espaciado y anatomía
circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md

Resultados de la búsqueda «agua potable rural» en leyes vigentes.

Cambia en esta marca

  • Mark circular y namebrand Círculo de Santiago en caja normal
  • Contenido societario y navegación propia

Permanece canónico

  • Misma estructura, orden de cuenta y footer
  • Tipografía, foco y comportamiento canónicos

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Estado actual
Skip link no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
Cambio propuesto
Publicar en r19 el contrato de Skip link para Patrón canónico de skip link para cis, cds, cochid y todos los sitios.
Qué ocurre si respondes No
Skip link queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Encuesta Nacional de Empleo: resultados por región y trimestre móvil.

  • Conserva el namebrand canónico y el contexto en una línea separada.
  • Mantén cuenta, navegación y destino actual en lugares predecibles.
Antes · problema observadoAnti-ejemplo no interactivo
CISTítulo debajo del namebrandMenú distinto en esta página
  • No inventes abreviaturas ni cambies mayúsculas del namebrand.
  • No cambies navbar o footer entre páginas del mismo sitio.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

Encuesta Nacional de Empleo: resultados por región y trimestre móvil.

1280 pxEscritorio

Resultados de la búsqueda «agua potable rural» en leyes vigentes.

Cobertura

DimensiónContrato
Propietario canónicoSistema de diseño CIS · core/core-style
ConsumidoresCIS, CDS, COCHID y todos los sitios
DependenciasHTML nativo, cis-auth para sesión
Estadocandidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

DatoResultado
ClasificaciónPatrón propuesto
Implementaciones0 implementaciones observadas
RepositoriosNingún repositorio observado
Snapshotkit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Skip link

Estados

Estado requerido
base
actual
móvil
sin sesión

Accesibilidad

  • Conserva nombre accesible, orden de lectura y foco visible.
  • Funciona a 320 px, con zoom de 200% y texto largo.
  • El color nunca es la única señal de estado o acción.
  • El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<div class="ui-sample"><a class="skip-link" href="#contenido-principal">Saltar al contenido principal</a><p id="contenido-principal">Encuesta Nacional de Empleo: resultados por región y trimestre móvil.</p></div>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<div class="ui-sample border border-slate-300 bg-white p-4 text-slate-950"><a class="skip-link underline underline-offset-4" href="#contenido-principal">Saltar al contenido principal</a><p id="contenido-principal">Encuesta Nacional de Empleo: resultados por región y trimestre móvil.</p></div>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
import type { ReactNode } from "react";

export interface SkipLinkProps {
  /** Texto visible del enlace cuando recibe foco. */
  label?: string;
  /** Id del destino; el enlace apunta a `#${targetId}`. */
  targetId?: string;
  /** Contenido de destino; un texto se envuelve en un párrafo con `targetId`. Vacío, sólo se emite el enlace. */
  children?: ReactNode;
  /** Muestra el enlace sin esperar el foco y en su lugar, sobre el destino y sin taparlo (clase `skip-link--visible`); sirve para documentación y capturas estáticas. */
  visible?: boolean;
  /** Clase adicional del enlace `<a class="skip-link">`; `className` va al contenedor. */
  linkClassName?: string;
  className?: string;
}

/**
 * Enlace para saltar la navegación repetida y llegar al contenido principal; va primero en el `<body>`.
 *
 * Queda oculto hasta recibir foco con el teclado; `visible` lo deja a la vista sin foco. Si el destino ya existe en la página (`<main id="contenido-principal">`), pasa `children={null}`.
 *
 * @example <SkipLink targetId="contenido-principal" children={null} />
 * @example <SkipLink visible label="Saltar a los resultados" targetId="resultados">Resultados de la búsqueda «agua potable rural» en leyes vigentes.</SkipLink>
 */
export function SkipLink({
  label = "Saltar al contenido principal",
  targetId = "contenido-principal",
  children = "Encuesta Nacional de Empleo: resultados por región y trimestre móvil.",
  visible = false,
  linkClassName,
  className,
}: SkipLinkProps) {
  const destino = children == null || children === "" || typeof children === "boolean"
    ? null
    : typeof children === "string" ? <p id={targetId}>{children}</p> : <div id={targetId}>{children}</div>;
  return (
    <div className={className}>
      <a
        className={["skip-link", visible && "skip-link--visible", linkClassName].filter(Boolean).join(" ")}
        href={`#${targetId}`}
      >
        {label}
      </a>
      {destino}
    </div>
  );
}