Ancla de navegación
Biblioteca de componentes
Cómo utilizar este componente
Seleccione el componente Anclaje de navegación cuando necesite proporcionar vínculos directos a secciones específicas dentro de una sola página web.
Un componente de anclaje de navegación permite a los usuarios saltar directamente a secciones específicas de una página mediante enlaces en los que se puede hacer clic.
Los anclajes de navegación son ideales para contenido de una sola página, como preguntas frecuentes, artículos largos y documentación. Los usuarios hacen clic en estos enlaces para ir directamente a la sección identificada por un ID de anclaje.
Estados de anclaje de navegación: predeterminado y pasar el cursor
Anatomía del anclaje de navegación
- ID: el nombre que desea usar, que solo se encuentra en los componentes compatibles.
- Título de navegación: El texto que aparecerá como un vínculo en el componente Anclaje de navegación.
- ID de anclaje: Tanto el ID como el ID de anclaje deben coincidir.
- Ejemplo de componente de navegación de anclaje: Si un usuario hace clic en el enlace de anclaje de navegación, la página saltará directamente al ID vinculado (1).
Prácticas recomendadas
- Asigne valores de ID de anclaje claros y fáciles de recordar antes de agregar el componente Anclaje de navegación.
- Asegúrese de que el título de navegación sea descriptivo y coincida con el título de su destino.
- Comprueba que el ID de anclaje coincida exactamente, incluida la distinción entre mayúsculas y minúsculas, para asegurarte de que el enlace funciona correctamente.
- Utilice minúsculas y guiones para separar las palabras al crear identificadores.
- No utilice identificadores de anclaje genéricos o no descriptivos.
- Evite colocar enlaces de anclaje de navegación al azar; Mantenga una ubicación coherente para la coherencia visual.
- No cree varios ID con el mismo nombre, asegúrese de que cada ID sea único.
Nota:
- Los enlaces de anclaje deben actualizarse manualmente si se agregan o eliminan secciones de contenido.
- Utilice un componente de navegación lateral para vincular a páginas del mismo nivel o páginas externas.
Colocación
Los anclajes de navegación generalmente se colocan en el riel derecho de un componente de control de columna. Utilice diseños como 9-3 o 3-6-3 para mantener la coherencia visual.
Pautas de accesibilidad
- Asegúrese de que todos los ID de anclaje sean únicos y descriptivos para ayudar a los lectores de pantalla a navegar por la página.
- Utilice títulos claros y concisos que describan con precisión el contenido de destino.
- Pruebe los enlaces de navegación con tecnologías de asistencia para confirmar la funcionalidad.
Lista de verificación del coordinador web
- Asigne identificadores de anclaje:
Asegúrese de que cada sección que se va a vincular tenga un atributo de ID único y descriptivo. - Agregue el componente Ancla de navegación:
Coloque el componente en la columna derecha de un control de columna. - Introduzca el título de navegación y el ID de anclaje:
Introduce un título claro y descriptivo.
Haga coincidir el ID de anclaje con el atributo id de la sección correspondiente. - Doble verificación de identificaciones:
Confirme que los identificadores de anclaje introducidos son correctos y distinguen entre mayúsculas y minúsculas. - Verifique la compatibilidad de componentes:
Asegúrese de que el componente seleccionado incluya un campo de ID (por ejemplo, Encabezado, Contenido destacado, Tabla). - Funcionalidad de la prueba:
Pruebe los enlaces de anclaje para asegurarse de que navegan a las secciones correctas.