Accesibilidad: verificar y ajustar el orden DOM de un sitio
6 min de lectura
El orden DOM de un sitio es el orden en el que los lectores de pantalla y la tecla de tabulación resaltan o "leen" el contenido de la página. Debe seguir un orden lógico para garantizar que los visitantes obtengan la mejor experiencia posible en el sitio y puedan navegar y disfrutar de su contenido.
En este artículo, obtén más información sobre lo siguiente:
Orden DOM en los sitios
El DOM del sitio es el orden de carga y lectura de los elementos en las páginas del sitio. Wix establece automáticamente un orden DOM según el orden visual de los elementos; de izquierda a derecha y de arriba a abajo. Al desarrollar nuestras herramientas de accesibilidad, probamos nuestros productos con los siguientes lectores de pantalla:
- Windows + Firefox o Chrome: NVDA (lector gratuito)
- iOS + Safari: Voiceover (lector integrado)
Esto significa que hemos creado el orden DOM automático de tu sitio teniendo en cuenta las funciones de las aplicaciones anteriores.
Importante:
El orden DOM automático en los sitios de escritorio se ha creado para secuencias de comandos de izquierda a derecha (por ejemplo, inglés, español, etc.). Si tu sitio utiliza una escritura de derecha a izquierda, como el árabe o el hebreo, debes reorganizar manualmente el orden DOM en el panel Capas.
Por qué es importante el orden DOM
Algunos visitantes del sitio pueden usar lectores de pantalla y otras tecnologías de asistencia para navegar por tu sitio. Estas tecnologías ayudan a los visitantes con discapacidad visual al escanear el contenido del sitio y leerlo en voz alta al visitante.
Los visitantes que usan lectores de pantalla, así como aquellos con problemas de movilidad, pueden usar la tecla de tabulación para navegar por el contenido de tu sitio. Por lo tanto, el orden DOM del sitio es importante para los visitantes que usan lectores de pantalla o la tecla de tabulación, ya que deben poder navegar por tu sitio en un orden lógico.
Por ejemplo, el menú del sitio debe ir primero, seguido del resto de los elementos del encabezado, luego el título de la página, luego el contenido de la página, etc. Si el orden DOM es incorrecto, puede causar que el lector de pantalla o la tecla de tabulación se salteen el contenido de la página.
¿Quieres probar el orden DOM de tu sitio?
Puedes probar el orden DOM automático de tu sitio usando la tecla Tabulador del teclado o un lector de pantalla en la versión online del sitio.
DOM automático en el Asistente de accesibilidad
Al trabajar en un sitio del Editor de Wix Studio, es posible que veas la opción para organizar automáticamente su orden DOM en el Asistente de accesibilidad. Recomendamos seleccionar esta opción, ya que garantiza que el análisis del asistente y las tareas resultantes sean correctas.
¿No ves esta casilla de verificación?
La opción para organizar el DOM del sitio no se rellena en los siguientes casos:
- El sitio se creó después de principios de noviembre de 2024
- Has organizado previamente el orden DOM del sitio con el Asistente de accesibilidad
- Has deshabilitado el DOM automático en el sitio.
Cambiar manualmente el orden DOM de un sitio
Si notas que el orden DOM de tu sitio no es lógico, te recomendamos cambiarlo para garantizar una mejor experiencia para los visitantes.
Usa el Asistente de accesibilidad y el panel Capas para cambiar el DOM en los sitios del Editor de Wix. Si estás creando un sitio en el Editor de Wix Studio, puedes ajustar el orden con los paneles Capas y Páginas del sitio.
Importante:
Si el orden de tabulación de tu sitio es lógico, no necesitas hacer nada. Cambiar el orden cuando ya es correcto puede ocasionar problemas a los visitantes que usan lectores de pantalla o la tecla de tabulación.
Para cambiar el orden DOM:
Editor de Wix
Editor de Wix Studio
Como Wix establece automáticamente un orden DOM para tu sitio, debes desactivarlo en los ajustes avanzados del Asistente de accesibilidad Luego, puedes ajustar manualmente el orden DOM de los elementos en el panel Capas de tu sitio según sea necesario.
Para cambiar los ajustes y el orden del DOM de tu sitio:
- Ve al editor.
- Haz clic en Ajustes en la parte superior y selecciona Asistente de accesibilidad.
- Haz clic en el icono Más acciones
en la parte superior del panel Asistente de accesibilidad. - Selecciona Ajustes avanzados de accesibilidad.
- Selecciona Orden DOM automático.
- Desactiva la palanca en el panel.
- Selecciona Desactivar en la ventana emergente.
- Seleccionar capas
en la parte inferior izquierda del editor. - Revisa la lista y elimina los elementos redundantes. Esto incluye elementos duplicados que no se usan en tu sitio y pueden confundir a los usuarios de lectores de pantalla.
- Arrastra y suelta los elementos restantes en el orden deseado.
Siguiente paso:
Abre el editor móvil y repite los mismos pasos.
Notas:
- Navegar por un sitio usando la tecla Tab solo alterna entre los elementos interactivos y no entre los elementos estáticos como texto. Si deseas probar un lector de pantalla en elementos estáticos como texto, sigue las instrucciones en el centro de ayuda de tu lector de pantalla sobre cómo navegar correctamente por un sitio web con un teclado.
- Los elementos anclados se colocan automáticamente al final de la secuencia de tabulación. Si quieres que se muestren con pestañas al principio de la secuencia, te recomendamos que desvincules el elemento y lo coloques en el encabezado.
¿Cuál es el siguiente paso?
Vuelve a la lista de verificación de accesibilidad para seguir trabajando en la accesibilidad de tu sitio.