Tag

Los tags son etiquetas visuales usadas para categorizar elementos y facilitar visualmente el conocimiento de grupos por temáticas. De igual forma sirve como elemento de navegación por categorías a modo de link.

Racional de aplicación

Usamos las tags siempre que sea necesario para definir la/s categoría/s o temática/s en la que se encuentra el elemento:

• Como elemento de navegación a una categoría.

• Para agrupar información dentro de una navegación con un mismo contexto.

• Marcar la categoría o temática de un componente.

• Filtrar entradas según categoría o temática.

• Como etiqueta o metadato.

Evitamos usar en exceso los tags, ya que la sobrecarga de estas pueden perjudicar la jerarquía del contenido, por tanto la comprensión. Es recomendable evitar:

• Usar tags no relevantes o que no agrupan un número considerable de elementos asociados.

• En niveles principales de navegación.

• Categorías vacías o con pocas entradas.

• Usarlas como elemento puramente de posicionamiento.

Buenas prácticas

Uso correcto	Uso incorrecto
Proporcionamos la categorización de los elementos.	Demasiadas categorías en un elemento para no restringir en exceso los resultados.

Interacción

Dispositivo	Interacción
Ratón	Se puede activar un tag haciendo clic en cualquier lugar dentro del contenedor.
Teclado	Se puede navegar por los tag pulsando la tecla Intro y una vez enfocado el elemento acceder al enlace pulsando la tecla Espacio.

Anatomía y variabilidad

Anatomía del componente

Letra	Elemento	Descripción
A	Contenedor	Caja que recubre la etiqueta informativa.
B	Etiqueta	Texto que informa del contenido del enlace.

Variabilidad de estados

Letra	Estado	Descripción
A	Default	Estado por defecto. No hay interacción sobre el componente.
B	Hover	Visible al posicionar el cursor del ratón encima del componente.
C	Active	Activado por ratón con click o la tecla Espacio desde el teclado para actuar sobre el mismo.