Block ARIA Landmark Roles
Añade roles y etiquetas de puntos de referencia ARIA a los bloques de Drupal para mejorar la accesibilidad y el soporte de tecnologías asistivas.
block_aria_landmark_roles
Instalar
composer require 'drupal/block_aria_landmark_roles:^3.0'
composer require 'drupal/block_aria_landmark_roles:^2.0'
composer require 'drupal/block_aria_landmark_roles:8.x-1.4'
Overview
Block ARIA Landmark Roles extiende los formularios de configuración de bloques de Drupal para permitir a los constructores de sitios asignar roles y etiquetas de puntos de referencia WAI-ARIA a cualquier bloque. Este módulo está inspirado en el módulo Block Class y proporciona una forma simple pero poderosa de mejorar la accesibilidad del sitio web.
Los roles de puntos de referencia ARIA (Accessible Rich Internet Applications) ayudan a las tecnologías asistivas como los lectores de pantalla a identificar y navegar hacia secciones comúnmente encontradas en el contenido de páginas web. Al añadir roles de puntos de referencia como 'navigation', 'main', 'banner' o 'search' a los bloques, los usuarios con discapacidades pueden comprender más fácilmente la estructura de una página y saltar rápidamente a las secciones relevantes.
El módulo añade una sección de configuración plegable al formulario de configuración de cada bloque donde los administradores pueden seleccionar un rol de punto de referencia de una lista predefinida y opcionalmente añadir una etiqueta ARIA personalizada para contexto adicional.
Features
- Añade un menú desplegable 'Landmark role' a los formularios de configuración de bloques permitiendo la selección entre 8 roles de puntos de referencia ARIA: application, banner, complementary, contentinfo, form, main, navigation y search
- Añade un campo de texto 'Label' a los formularios de configuración de bloques para etiquetas ARIA personalizadas (atributo aria-label)
- Añade automáticamente el atributo role seleccionado a los elementos contenedores de bloque durante el renderizado
- Añade automáticamente el atributo aria-label cuando se configura una etiqueta
- Utiliza el sistema de configuración de terceros de Drupal para una integración limpia con las entidades de bloque
- La configuración se almacena por bloque, permitiendo diferentes roles para diferentes instancias de bloque
Use Cases
Marcar el bloque de navegación principal
Asigna el rol 'navigation' al bloque de navegación principal de tu sitio. Esto permite a los usuarios de lectores de pantalla saltar rápidamente a la sección de navegación usando la función de navegación por puntos de referencia de su tecnología asistiva.
Identificar el área de contenido principal
Aplica el rol 'main' al bloque que contiene el contenido principal de tu página. Las directrices WCAG recomiendan tener exactamente un punto de referencia main por página para ayudar a los usuarios a saltar directamente al contenido principal.
Distinguir múltiples bloques de navegación
Cuando una página tiene múltiples bloques de navegación (menú principal, menú de pie de página, menú lateral), asigna el rol 'navigation' a cada uno y usa etiquetas ARIA distintas como 'Navegación principal', 'Navegación de pie de página' y 'Navegación lateral' para ayudar a los usuarios de lectores de pantalla a diferenciarlos.
Marcar la funcionalidad de búsqueda
Aplica el rol 'search' a bloques que contienen formularios de búsqueda. Esto ayuda a los usuarios a localizar rápidamente la funcionalidad de búsqueda en tu sitio.
Identificar regiones de cabecera y pie de página
Usa el rol 'banner' para bloques de cabecera (que típicamente contienen el logo del sitio y la navegación principal) y el rol 'contentinfo' para bloques de pie de página (que típicamente contienen copyright, enlaces legales e información de contacto).
Marcar contenido de barra lateral
Aplica el rol 'complementary' a bloques de barra lateral que contienen contenido de apoyo relacionado con el contenido principal. Esto se usa típicamente para artículos relacionados, recursos adicionales o información complementaria.
Identificar bloques de formulario
Aplica el rol 'form' a bloques que principalmente contienen elementos de formulario, como formularios de contacto, formularios de suscripción a boletines o bloques de inicio de sesión.
Tips
- Usa el rol 'main' solo una vez por página - debe identificar el área de contenido principal
- Cada página debería tener idealmente un punto de referencia 'banner' (cabecera) y 'contentinfo' (pie de página)
- Cuando uses múltiples bloques con el mismo rol, siempre añade etiquetas ARIA descriptivas para diferenciarlos
- El rol 'application' debe usarse con moderación - solo para widgets interactivos que requieren manejo especial de teclado
- Prueba tu estructura de puntos de referencia usando herramientas de desarrollo de accesibilidad del navegador o software de lector de pantalla
- Sigue las directrices WCAG 2.1 para el uso adecuado de puntos de referencia para asegurar el máximo cumplimiento de accesibilidad
Technical Details
Admin Pages 1
/admin/structure/block/manage/{block_id}
Al editar cualquier bloque, aparece un nuevo fieldset plegable titulado 'Block ARIA Landmark Roles settings'. Esta sección permite a los administradores configurar roles y etiquetas de puntos de referencia ARIA para el bloque para mejorar la accesibilidad.
Hooks 2
hook_form_block_form_alter
Altera el formulario de configuración de bloque para añadir campos de rol de punto de referencia ARIA y etiqueta usando configuración de terceros.
hook_preprocess_block
Preprocesa las variables del bloque para añadir los atributos de rol y etiqueta ARIA configurados al elemento contenedor del bloque.
Troubleshooting 3
Asegúrate de haber seleccionado un rol distinto de '- None -' y guardado la configuración del bloque. También verifica que la plantilla de bloque de tu tema incluya la variable $attributes, ya que algunos temas personalizados pueden no incluir todos los atributos del bloque.
Cuando tienes múltiples bloques con el mismo rol de punto de referencia (por ejemplo, múltiples bloques de navegación), siempre añade una etiqueta ARIA única a cada uno para ayudar a los usuarios de lectores de pantalla a distinguirlos.
Asegúrate de que el módulo Block ARIA Landmark Roles esté habilitado. Limpia la caché de Drupal si lo habilitaste recientemente y los campos no aparecen.