DESY

Sistema de Diseño del Gobierno de Aragón.

Píldoras

Se emplean para resaltar texto dentro de una tabla o una página y para identificar elementos independientes entre sí (categorías, filtros…).

Índice de apartados de esta página

Variantes

Primario
Advertencia
Éxito
Alerta

Está compuesto por una etiqueta de texto, puede ir apoyado por un icono a la izquierda reforzando el mensaje del texto. Independientemente también puede contar con un botón-icono x a la derecha del texto cuando convenga ofrecer la opción de cerrar o eliminar la etiqueta. El color, de la misma manera que los iconos, debe utilizarse para apoyar el mensaje.

Accesibilidad

Cómo funciona

Depende de la variante puede ser una etiqueta <span> o <button>. Ten en cuenta los atributos ARIA cuando insertes iconos.

Qué tener en cuenta
Qué usar Dónde Función
aria-hidden=true SVG que apoya a la etiqueta de texto Oculta el icono a lectores de pantalla, el texto ya describe la acción del botón.
role=img y aria-label SVG sin etiqueta de texto El lector de pantalla describe la etiqueta o acción definida con el aria-label. No describas el icono.