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.
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.
Uso correcto | Uso incorrecto |
 |  |
Proporcionamos la categorización de los elementos. | Demasiadas categorías en un elemento para no restringir en exceso los resultados. |
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. |
Letra | Elemento | Descripción | |
A | Contenedor | Caja que recubre la etiqueta informativa. | |
B | Etiqueta | Texto que informa del contenido del enlace. | |
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. |
Última actualización 1yr ago