Prueba de atributos de accesibilidad con Divi 5

Los atributos de accesibilidad ahora son totalmente compatibles con Divi 5, lo que le brinda una forma sin código de agregar roles de aria, etiquetas y otros ayudantes de pantalla justo dentro del constructor. Si está trabajando con Divi 5, es la forma más fácil de desarrollar la accesibilidad en su sitio sin cambiar su flujo de trabajo o diseño.

Con la Ley de Accesibilidad Europea en vigencia el 28 de junio y Google favorece cada vez más las mejores prácticas de accesibilidad, ahora es el momento de salir adelante. ¡Así es como funcionan los atributos de accesibilidad y cómo ayuda a su sitio a cumplir con los estándares de accesibilidad modernos!

Atributos de accesibilidad para Divi 5

Los atributos de accesibilidad es un complemento Divi que le permite agregar roles de aria, etiquetas y otros ayudantes de accesibilidad a sus páginas web directamente desde el Builder Divi sin escribir ningún código. Los atributos de ARIA (aplicaciones de Internet ricas accesibles) lo ayudan a agregar significado a elementos que no proporcionan suficiente contexto por su cuenta, especialmente cuando se crea diseños personalizados en Divi 5.

Por ejemplo, si usa un módulo de texto para diseñar visualmente un encabezado o un módulo de botón para crear una llamada a la acción, los lectores de pantalla no comprenderán automáticamente sus roles. Los roles y etiquetas de ARIA le permiten definir qué es cada elemento y cómo las tecnologías de asistencia deben interpretarlo, sin cambiar el diseño visual. Esto ayuda a garantizar que su sitio Divi 5 sea accesible y flexible.

Después de instalar el complemento, agrega automáticamente campos de entrada personalizados a sus secciones, filas, módulos y otros elementos DIVI. (Para acceder a los campos de ARIA, haga clic en cualquier elemento y vaya a su pestaña avanzada ).

Ahora, puede definir roles, agregar etiquetas ARIA y mejorar el soporte del lector de pantalla para cada elemento directamente del Divi Builder. Los atributos de accesibilidad se ajustan sin problemas a su flujo de trabajo Divi y cuesta solo $ 19 por año. Le ofrece una forma simple y asequible de construir sitios web accesibles.

Obtener atributos de accesibilidad

Por qué la accesibilidad ya no es opcional

La accesibilidad solía ser algo que podía posponer, pero ya no. Ahora afecta su seguridad legal, su rendimiento de búsqueda y la confianza de sus usuarios.

Si su sitio no es accesible, no solo está atrasado, está en riesgo. He aquí por qué:

• Las acciones legales aumentan: a partir del 28 de junio de 2025, se aplicará la Ley de Accesibilidad Europea. Si su sitio web no es accesible y las personas en la UE lo usan, podría enfrentar multas u otras multas. La ley se aplica a la mayoría de las empresas con más de 10 empleados y ganan más de 2 millones de euros al año, pero también se alienta a las más pequeñas a seguirlo porque ...
• La accesibilidad puede afectar su clasificación: si bien la accesibilidad no es un factor de clasificación, muchas características accesibles pueden afectar indirectamente su SEO. Cosas como el texto alternativo, las estructuras de rumbo adecuadas y las etiquetas descriptivas facilitan su sitio para los usuarios y los motores de búsqueda de comprender. Entonces, si su sitio es difícil de navegar, podría quedarse atrás en los resultados de búsqueda.
• Los sitios inaccesibles alejan a los usuarios: si su sitio no es accesible, las personas con discapacidades pueden no poder usarlo. Cuando se van rápidamente, puede indicar una mala experiencia del usuario que busque en motores y dañe sus clasificaciones. Cambios como estructura clara, fuentes legibles y fácil navegación de teclado hacen que su sitio sea utilizable para todos.

Es fácil asumir que la accesibilidad solo es importante para las grandes empresas, pero ignorarlo aún puede dañarlo incluso si es una marca más pequeña.

Configuración de atributos de accesibilidad en Divi 5

Esta sección lo guía a través de la instalación y el acceso de las herramientas en los atributos de accesibilidad en sus sitios web de Divi 5.

Instalación del complemento

Una vez que compre atributos de accesibilidad, recibirá el archivo zip del complemento. Cárguelo en los complementos de su WordPress> Agregar complemento> complemento de carga.

Ahora, agregue el archivo zip y haga clic en Instalar ahora.

Finalmente, activelo .

Una vez activado, notará los campos ARIA adicionales agregados a la pestaña avanzada de cada elemento.

Ahora puede agregar fácilmente estos atributos de accesibilidad a cada elemento en su página, directamente desde el Builder Divi. Lo cubriremos en solo un minuto. Antes de eso, revisemos rápidamente todas las opciones que tiene disponibles dentro del tablero de atributos de accesibilidad.

Tutorial de atributos de accesibilidad

Una vez que el complemento esté activo en su sitio Divi, la pestaña de accesibilidad se agregará a su barra lateral de WordPress. Haga clic en él para acceder a su tablero, que tiene cuatro pestañas: administrador, módulos, elementos y productos.

Revisemos las opciones de cada pestaña:

La pestaña de administrador

Esta pestaña le brinda controles a nivel de cuenta, como administrar su suscripción (que habilita el soporte) , verificar el estado del complemento, elegir si eliminar los datos en desinstalar y restablecer todas las configuraciones al valor predeterminado.

La pestaña Módulos

Le permite decidir qué atributos Aria habilitar en sus módulos Divi. Solo las opciones seleccionadas aparecen en la pestaña avanzada como campos. Es posible que desee mantenerlos a todos encendidos.

No todos los módulos necesitan atributos de accesibilidad. Por ejemplo, puede omitir de forma segura elementos decorativos como divisores, iconos animados o galerías de imágenes sin subtítulos o enlaces, ya que no agregan contenido significativo para los lectores de pantalla.

Para excluir un módulo, ingrese la babosa del módulo (como ET_PB_Image) en la sección de compatibilidad . Esto le dice al complemento que lo omita al agregar campos de aria y se centre solo en los módulos que realmente necesitan soporte de accesibilidad.

La pestaña Elements

Algunas partes de su sitio web no están construidas con módulos Divi. Pueden provenir de su tema, otros complementos o HTML simple. La pestaña Elementos le permite agregar atributos ARIA a aquellas partes de su sitio con selectores CSS. Es posible que desee incluir elementos globales como menús, iconos, botones y campos de formularios no creados dentro del Builder Divi.

• Aria Main: cuenta los lectores de pantalla dónde comienza su contenido principal para que puedan omitir menús o barras laterales.
• Aria Hidden: Oculta elementos decorativos para que la tecnología de asistencia no los lea en voz alta.
• Enlace Aria: marca elementos que se pueden hacer clic que no son enlaces reales como enlaces. Esto ayuda a los lectores de pantalla a identificarlos correctamente.
• Botón Aria: agrega roles de botón para alternar iconos o enlaces de texto con estilo que actúan como botones.
• Se requiere aria: marca los campos de formularios personalizados según sea necesario, incluso si el HTML no lo dice.
• Índice de pestañas: hace que los elementos importantes se puedan usar con la tecla Tab, que es útil para la navegación solo para teclado.

Cada configuración le permite agregar o eliminar estos roles con selectores CSS. Si no está seguro de por dónde comenzar, el botón Aria Main y Aria son buenas primeras selecciones, a menudo se les pierde y son fáciles de configurar.

La pestaña Productos presenta otros productos del mismo creador.

Uso de atributos de accesibilidad dentro de Divi 5

Después de la configuración, el trabajo real ocurre dentro del constructor. Cada campo de aria tiene un propósito. Veamos lo que hace, cuándo usarlo y cómo ayuda con la accesibilidad en diseños reales.

1. Asignar roles a los elementos con aria rol

El campo de rol de ARIA le permite asignar un propósito a un elemento que puede no ser obvio en el código. Por ejemplo, si ha usado un módulo de blurb para crear una llamada a la acción, los lectores de pantalla no lo reconocen automáticamente como un botón. Debe asignarle el botón de roles para que su función sea claro para los usuarios que navegan con comandos de voz o atajos de teclado.

Como en este caso a continuación, esta propaganda incluye un botón.

Para agregar el rol de aria, altere la opción y asigne estos valores:

• Tipo de rol de aria como roles de widget (esta es la categoría donde viven elementos interactivos como botones y controles deslizantes).
• ARIA Valor de roles como botón
• ARIA Role Selector como .ET_PB_BUTTON (esta es la clase Divi usa para los módulos de botones).

2. Agregue etiquetas claras para lectores de pantalla con la etiqueta Aria

Si bien el rol de ARIA le dice a las tecnologías de asistencia qué es un elemento, la etiqueta Aria explica lo que hace . Esto es especialmente útil cuando un elemento no tiene texto visible, como un icono, un botón de estilo personalizado o cualquier cosa diseñada para parecer interactiva, pero no lo dice en voz alta. Vamos a desglosarlo usando el mismo ejemplo.

Ya hemos agregado el rol, pero el texto del botón dice "donar ahora". Eso está bien para los usuarios visuales, pero las personas que usan lectores de pantalla pueden necesitar más contexto, aún más ya que el botón aparece varias veces.

Para asignar una etiqueta a este botón, simplemente altere la etiqueta ARIA y agregue una etiqueta corta.

Ahora, el botón aún dirá "donar ahora" en la pantalla, pero los lectores de pantalla leerán la etiqueta completa para ayudar a los usuarios a comprender exactamente qué hace el botón y hacia dónde conduce.

3. Proporcione un contexto adicional con una descripción de Aria

La descripción de ARIA ofrece a los lectores de pantalla más detalles sobre un elemento de lo que una etiqueta puede explicar. Si bien una etiqueta dice qué es algo, una descripción explica por qué importa.

Por ejemplo, supongamos que tiene múltiples botones de "donar ahora" en una página, cada uno bajo una causa diferente como la limpieza costera, la educación marina o la restauración del hábitat. Un usuario de lector de pantalla puede aterrizar directamente en el botón y perder el contenido cercano. Aquí es donde la descripción de Aria ayuda.

Tomemos la primera tarjeta: limpieza costera. Para agregar más contexto, puede agregar una descripción como "Esta donación admite la limpieza del océano y la protección de la vida silvestre" como texto de descripción de Aria.

Haga lo mismo para los otros botones, de modo que a pesar de que todos dicen "donan ahora" visualmente, los lectores de pantalla anunciarán diferentes descripciones para cada una. Esto brinda a los usuarios el contexto completo sin cambiar lo que ven en la pantalla.

4. Ocultar elementos decorativos de los lectores de pantalla

Aria Hidden es útil cuando desea mostrar algo visualmente, como un icono o una imagen de fondo, pero no quiere que los lectores de pantalla lo anuncien. Esto mantiene la experiencia más enfocada para los usuarios que dependen de la tecnología de asistencia.

Por ejemplo, tome la imagen de vista previa de una campaña, como una foto de gaviotas. Admite el diseño, pero no agrega ninguna información nueva más allá de lo que ya está en el encabezado o descripción. Aquí, puede usar Aria Hidden para ocultarlo de los lectores de pantalla.

5. Enlace a información adicional con detalles de Aria

Los detalles de ARIA le permiten conectar un elemento a otro, que brinda información adicional. Por ejemplo, puede vincular un botón a un párrafo cercano que explica de qué se trata el botón. Es útil cuando desea que las tecnologías de asistencia lean más contexto que no sean directamente parte del elemento haciendo clic.

Tomemos la sección de educación marina. Supongamos que desea que el texto del párrafo describa el botón "donar ahora". Puede vincular el botón al párrafo usando los detalles de ARIA.

Primero, agregue una identificación única al párrafo. Haga clic en el módulo de texto que contiene la descripción y vaya a la ID y clases Avanzada CSS> CSS . Ingrese su ID único en el campo de ID de CSS. Entremos en Marine-Edu.

Ahora este módulo de texto tiene una ID a la que los lectores de pantalla pueden hacer referencia.

A continuación, agregamos el atributo de detalles de ARIA al botón. Haga clic en el módulo de botón y vaya a sus detalles avanzados> Aria. Ingrese a Marine-EDU en el campo de identificación.

Esto le dice a las tecnologías de asistencia que el botón está conectado a más información en el párrafo con el ID "Marine-EDU". También es útil cuando usa el mismo texto de botón en diferentes lugares, pero cada uno significa algo diferente.

Es posible que haya notado que la etiqueta de aria, la descripción de Aria y los detalles de Aria agregan un contexto adicional de diferentes maneras, por lo que es mejor no usarlos juntos en el mismo elemento, ya que puede confundir a los lectores de pantalla. Si ya está explicando algo en la página, considere usar los detalles de ARIA para vincular a ese texto en lugar de escribir una nueva etiqueta o descripción.

Acabas de ver cómo los atributos de accesibilidad facilitan agregar roles de aria, etiquetas y otras características clave de accesibilidad directamente desde el constructor de Divi. Hace que su sitio web sea accesible sin codificar.

Obtener atributos de accesibilidad

Herramientas de accesibilidad adicionales de Divi-Modules para Divi 5

Los atributos de accesibilidad se encargan del lado técnico de la accesibilidad. También viene con complementos (en el paquete de accesibilidad) que le brindan características adicionales como navegación de teclado y controles visuales para ofrecer una solución más completa e inclusiva.

1. Barra lateral de accesibilidad

La barra lateral de accesibilidad agrega una barra de herramientas flotante que permite a los usuarios personalizar su experiencia de navegación. Los visitantes con impedimentos de movilidad pueden ajustar los tamaños de fuente, cambiar al modo de alto contraste, habilitar la escala de grises y navegar con un teclado. También puede personalizarlo para que coincida con el diseño de su sitio.

2. Ajustes de accesibilidad

Los ajustes de accesibilidad agrega características prácticas que ayudan a los usuarios a navegar su sitio más fácilmente. Estos incluyen enlaces de omisión para una mejor navegación, contornos de enfoque para ayudar a los usuarios de teclado a ver dónde están y otras mejoras sutiles que mejoran la usabilidad sin cambiar el diseño de su sitio.

Consulte el paquete de accesibilidad

Haga que sus sitios web Divi 5 accesibles hoy

Los atributos de accesibilidad le brindan una forma fácil y visual de hacer que su sitio Divi sea más inclusivo. Sin codificación, sin solución, solo las herramientas correctas construidas directamente en el constructor.

Es totalmente compatible con Divi 5, compatible activamente, y ahora un 50% de descuento hasta el 28 de junio. Mientras la oferta funcione, puede obtener el paquete de accesibilidad completo, incluida la barra lateral y los ajustes, por solo $ 36 por año. Si está listo para mejorar su sitio para todos, esta es la forma más sencilla de comenzar.

Obtener un paquete de accesibilidad 50% de descuento