Saltar al contenido principal

Etiqueta

Etiqueta en Storybook

Uso​

Descripción general​

Una etiqueta se utiliza para rotular y categorizar elementos con palabras clave descriptivas. Los elementos pueden tener etiquetas individuales o una colección de estas.

Las etiquetas son útiles para el reconocimiento rápido, la navegación sencilla y el filtrado de elementos.

Anatomía​

Formato de etiquetas

Las etiquetas constan de lo siguiente:

  1. Rótulo: Texto que identifica la etiqueta. Las etiquetas siempre deben tener rótulos. Pueden ser términos de búsqueda o palabras clave.
  2. Ícono de cierre: Ícono en el que los usuarios pueden hacer clic para eliminar la etiqueta.
  3. Colección de etiquetas: Grupo de más de una etiqueta. Cuando un elemento tiene más de una etiqueta, se convierte en una colección de etiquetas.

Prácticas recomendadas​

  • Cuando el contenido se asigna a varias categorías, utilice etiquetas para diferenciarlas.
  • Los rótulos deben ser cortas para facilitar el escaneo, preferiblemente una palabra.
  • Use etiquetas para filtrar datos y mostrar elementos dentro de una categoría en particular.

Comportamientos​

Estados​

Las etiquetas tienen estados habilitado, deshabilitado, con cursor encima, en foco y activo:

  • Habilitado: Comunica al usuario que el elemento está habilitado para la interacción (predeterminado). Las etiquetas habilitadas tienen un color de fondo con HEX # F0F3F6.
  • Deshabilitado: Comunica al usuario que el elemento no es interactivo. Las etiquetas deshabilitadas tienen un color de fondo con HEX # F9FAFB.
  • Con cursor encima: Proporciona retroalimentación que indica que el usuario ha colocado un cursor sobre el elemento (solo para computadoras de escritorio). Al pasar el cursor por encima, el color de fondo de las etiquetas es HEX # E1E6EC.
  • En foco: Proporciona retroalimentación que indica que el usuario ha resaltado el elemento, normalmente mediante un método de entrada, como un teclado o un mouse. En foco, el color de fondo de las etiquetas es HEX # F0F3F6 y la etiqueta está rodeada por un contorno con HEX # A5D7EC.
  • Activo: Proporciona retroalimentación que indica que el usuario está haciendo clic o tocando el elemento. Las pestañas activas tienen un color de fondo con HEX # D1D9E2.

Interacciones​

Formato de etiquetas

Teclado​

El botón de cierre se activa con la barra espaciadora y la tecla Intro.

Lector de pantalla​

Cuando está activo, el botón de cierre ('X') dentro de cada etiqueta incluye el atributo WAI-ARIA: aria-label="close"

Accesibilidad​

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

  • La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
  • El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
  • El elemento se puede operar con teclado, así como con mouse.
  • Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Al utilizar el componente etiqueta en su aplicación:

  1. Asegúrese de que el texto de la etiqueta sea claro y conciso.
  2. No utilice únicamente el color para diferenciar las categorías de etiquetas.
  3. Cuando utilice colores personalizados, asegúrese de que se cumplan los requisitos mínimos de contraste.