Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés
Ejemplo
El índice de un artículo, junto al texto.
Since March 2016, a group of volunteers has read the tide gauge in the port at six in the morning and six in the evening, every day of the year.
How the readings were taken
Each reading is the height of the water against the gauge, to the nearest centimetre, with the time, the wind and the state of the sea. Two people read it, and a third checks the sheet the same week.
Four centimetres in ten years
The average height at high tide was 4 cm higher in 2025 than in 2016. That is close to the rise that the national tide gauges record along the whole coast.
Storms that reach the walls
In the first five winters, waves reached the sea wall of the old town twice. In the last five, they reached it eleven times.
What the council plans next
The council will publish the full records as open data in January and has asked the volunteers to add a third daily reading.
Beside the text, at the end, when the article is 46rem wide or more; above it below that. With the catalog's script, the section in view is marked as you scroll.
Problemas conocidos
La marca de la sección visible necesita el script de catalog; sin él, no se marca ningún enlace. Junto al texto, el índice queda en el extremo en línea, pero aparece primero en el código fuente, así que Tab llega a él antes que al texto.
<article class="luz-article">
<header class="luz-article-header">…</header>
<div class="luz-article__layout">
<nav class="luz-toc" aria-labelledby="toc-title" data-luz-spy>
<h2 class="luz-toc__title" id="toc-title">Contents</h2>
<ol class="luz-toc__list">
<li><a href="#method">How the readings were taken</a></li>
<li><a href="#level">Four centimetres in ten years</a></li>
<li><a href="#storms">Storms that reach the walls</a></li>
</ol>
</nav>
<div class="luz-prose">
<p>Since March 2016, a group of volunteers has read the tide gauge…</p>
<h2 id="method">How the readings were taken</h2>
<p>…</p>
<h2 id="level">Four centimetres in ten years</h2>
<p>…</p>
<h2 id="storms">Storms that reach the walls</h2>
<p>…</p>
</div>
</div>
</article>
Variantes y opciones
No hay modificadores. El índice es opcional: si se omite, el texto ocupa la primera columna.
Clase o propiedad
Qué hace
.luz-article
El artículo: su ancho determina la maquetación, no el de la ventana (contenedor de tamaño)
.luz-article__layout
El índice y, después, el texto. Cuando el artículo mide al menos 46rem: el texto va en la primera columna y el índice en una columna de 13rem al extremo en línea, con 48 px de separación; por debajo, se usa una columna
.luz-toc
El <nav>. Junto al texto permanece visible mientras este se desplaza, y una lista más alta que la ventana se desplaza por dentro
data-luz-spy en .luz-toc
El seguimiento de desplazamiento de catalog marca el enlace de la sección visible. Opcional
.luz-toc__title
El encabezado del índice, en sans y seminegrita
.luz-toc__list
La lista, sin marcadores y con una línea en el inicio en línea; un enlace por línea
--luz-toc-top
El espacio sobre el índice mientras permanece visible: 24 px, o 24 px por debajo de una barra fija (el .o-sticky de core, una fila de --luz-bar-h, como la cabecera). Si la cabecera tiene otra altura, asígnalo a .luz-toc
Cómo funciona
Una cuadrícula CSS dentro de un contenedor de tamaño, de components/article.css de @luz-ds/catalog. No necesita JavaScript propio.
La maquetación se adapta al espacio del artículo: en una página con barra lateral o con texto más grande, el índice pasa antes encima del texto. Por debajo de 46rem es una lista normal encima del texto y no permanece visible, porque lo taparía.
El índice aparece primero en el código fuente, así que se lee primero y Tab llega a él antes en ambas maquetaciones. El texto es un elemento único, segundo hijo de __layout; en un CMS, es el elemento que contiene el artículo.
Cada enlace apunta al id del encabezado de una sección. La mayoría de CMS pueden generar esos ids; en WordPress, usa el ancla HTML de cada bloque de encabezado.
Con el script de catalog (catalog.js o initSidebar() de @luz-ds/catalog/sidebar), el enlace de la sección visible recibe aria-current="true", que dibuja una barra y lo muestra en seminegrita. El script localiza los enlaces mediante el atributo data-luz-spy en <nav>: todos los enlaces internos a secciones de la página.
Sin JavaScript
El índice es una lista de enlaces a las secciones a las que se desplaza el navegador. El script solo hace falta para marcar la sección visible; sin él, no se marca ningún enlace.
Teclado y ARIA
Tab recorre los enlaces en orden; Enter sigue uno. El navegador mueve el foco y se desplaza hasta la sección.
Un <nav> identificado por su encabezado: quienes usan lector de pantalla lo encuentran en la lista de puntos de referencia como «Contenido». Usa <ol>: las secciones tienen un orden.
aria-current="true" identifica la sección visible; el script lo actualiza. Sin el script, ninguna sección aparece como actual.
Debajo de una cabecera fija, el relleno de desplazamiento de .o-sticky de core evita que la cabecera tape el encabezado de la sección al seguir un enlace.
Usa un índice en un artículo con cuatro o más secciones, que se lea por partes o se consulte varias veces: una guía, un informe o una entrevista larga.
Cuándo no usarlo
No lo uses en una entrada corta: tres párrafos no necesitan un mapa.
No sirve para enlazar a otras páginas: eso es navegación y va en la cabecera o en una barra lateral.
Tampoco sirve para los pasos ordenados de una tarea: numéralos en el texto.
Qué hacer y qué no
Hazlo Usa encabezados de sección que expliquen de qué trata cada parte, para que la lista funcione como resumen.
No lo hagas Usa encabezados que podrían aparecer en cualquier artículo: la lista no aporta nada.
Cómo escribir el contenido
Cada enlace reproduce exactamente el encabezado de su sección, para que quien lee reconozca adónde lleva.
Incluye solo los <h2> del artículo. Si hay más de unos ocho, quizá convenga dividirlo en dos.
Llámalo «Contenido» en el idioma de quien lee («Contenido» en español).
Contraste y foco
Los enlaces usan el color de texto secundario de la página; el actual usa el color principal y una barra del color de marca.
Parte
Color sobre el fondo
Claro
Oscuro
Alto contraste
Mínimo necesario
Título y enlace actual
--luz-text-primary on --luz-surface-page
15.8:1
15.1:1
21.0:1
4.5:1
Enlace
--luz-text-secondary on --luz-surface-page
6.2:1
7.5:1
19.3:1
4.5:1
Enlace al pasar el puntero
--luz-text-primary on --luz-surface-muted
15.8:1
15.1:1
20.1:1
4.5:1
Barra del enlace actual
--luz-brand-primary on --luz-surface-page
5.6:1
7.7:1
14.1:1
3:1
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido corresponde a WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
Foco: cada enlace conserva el anillo de core.
El enlace actual se indica con la barra y el peso, no solo con el color. Los enlaces no están subrayados: dentro de <nav>, su ubicación ya indica que son enlaces, como en todos los elementos de navegación de LUZ.
Tokens que usa
Los 15 tokens que usan las reglas de .luz-article y .luz-toc de components/article.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde figuran los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.