Qué hacer y qué no

Código

Copiar el marcado

import "@luz-ds/catalog/components/do-dont.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/do-dont.min.css" integrity="sha384-Oy/gLexm/R2x1z6J/k+HPFqeZFukZ9a8dRAA4oXn0+KTbjg3uYSlaRV5fhdnM+UK" crossorigin="anonymous">

Una pareja: primero lo que hay que hacer y después lo que no. Cada ejemplo es una figura cuyo pie explica el motivo:

<div class="luz-do-dont">
  <figure class="luz-do-dont__item luz-do-dont__item--do">
    <figcaption><strong class="luz-do-dont__verdict">Do</strong> Title a page for what it lets the reader do.</figcaption>
    <div class="luz-do-dont__stage" inert aria-hidden="true">
      <h3>Install the command line tool</h3>
    </div>
  </figure>
  <figure class="luz-do-dont__item luz-do-dont__item--dont">
    <figcaption><strong class="luz-do-dont__verdict">Don't</strong> Use a title that fits any page: "Introduction" tells the reader nothing.</figcaption>
    <div class="luz-do-dont__stage" inert aria-hidden="true">
      <h3>Introduction</h3>
    </div>
  </figure>
</div>

Variantes y opciones

Un bloque, sus partes y dos modificadores para los dos veredictos.

Cómo funciona

CSS de components/do-dont.css de @luz-ds/catalog. Muestra el veredicto de tres maneras; el texto lo escribes tú.

• El veredicto se expresa primero con una palabra. La marca de verificación o la cruz, el marco continuo o discontinuo y el color son indicaciones adicionales; ninguna se usa por sí sola.
• La marca de verificación y la cruz son contenido generado con alternativa vacía, así que el lector de pantalla no las lee.
• El ejemplo visual es inerte y está oculto para las tecnologías de asistencia: es una imagen y el pie explica qué muestra. Nada de lo que contiene recibe el foco ni se anuncia.
• Un error que supondría una barrera si se mostrara en vivo, como un contraste bajo o una semántica incorrecta, se presenta como código en un pre.luz-code-block, nunca como ejemplo visual activo.
• Escribe primero qué hacer y después qué no. Una página puede tener varias parejas, una tras otra.

Sin JavaScript

No cambia nada. El atributo del ejemplo visual lo hace inerte y la pareja usa CSS.

Teclado y ARIA

• Orden: primero lo que hay que hacer y después lo que no. Cada ejemplo es un <figure> con un <figcaption>, que se lee como pie de la imagen.
• Ejemplo visual: inert impide que reciba el foco o los clics, y aria-hidden="true" lo oculta del árbol de accesibilidad. No pongas dentro enlaces ni campos que quien lee deba usar.
• Ejemplo de código: un pre.luz-code-block conserva tabindex="0" y aria-label cuando se desplaza.

La pestaña Diseño contiene el contraste y el foco.

Diseño

Cuándo usarlo

Usa ejemplos de qué hacer y qué no para enseñar una regla mediante el contraste: quien lee ve la forma correcta junto a la incorrecta.

• Una lección más fácil de mostrar que de explicar, como un título, una etiqueta o un espaciado.
• Una pareja por lección, y el ejemplo de lo que no hay que hacer refleja un error real.

Cuándo no usarlo

No lo uses para una regla sin nada con lo que compararla ni para mostrar un elemento que funciona.

• Para mostrar el aspecto y la estructura de un elemento, usa el ejemplo.
• No inventes un error que nadie comete para rellenar el ejemplo de lo que no hay que hacer.
• No muestres un fallo activo. Los fallos de contraste o semántica se presentan como código.

Qué hacer y qué no

Cómo escribir el contenido

• El veredicto es «Hazlo» o «No lo hagas», seguido de un espacio.
• El motivo se explica en una frase, como máximo dos. El ejemplo de lo que hay que hacer empieza con un verbo; el de lo que no, explica qué problema causa.
• Los dos ejemplos visuales muestran lo mismo con un solo cambio. Si difieren en tres aspectos, no se sabrá cuál es importante.
• El ejemplo usa palabras reales: el nombre de una tarea, no «Lorem ipsum».

Contraste y foco

El pie se apoya en la superficie del marco y el ejemplo visual, en la de la página. El veredicto y el marco comparten color.

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: nada de un ejemplo visual activo recibe el foco. El ejemplo de código conserva el anillo de core, de 2 px y color --luz-focus-ring.
• No solo con el color: la palabra, el símbolo que la precede y el marco continuo o discontinuo indican cuál es cuál (WCAG 1.4.1).
• Bordes: el borde del ejemplo visual (--luz-divider) es decorativo y no tiene un mínimo.

Tokens que usa

Los 11 tokens que usan las reglas de .luz-do-dont de components/do-dont.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.

Color

--luz-color-danger, --luz-color-success, --luz-divider, --luz-surface, --luz-surface-page, --luz-text-primary

Spacing and sizing

--luz-space-md, --luz-space-sm

Typography

--luz-font-sans

Radius

--luz-radius-md, --luz-radius-sm

La pestaña Código contiene el teclado y ARIA.