Accesibilidad a WordPress: creación de menús de caída de caída accesible

Debido a que WordPress ha introducido el soporte nativo para los menús de navegación en la versión 3.0, podemos encontrarlos en casi todos los sitios web.Sin lugar a dudas, son populares, intuitivos y fáciles de usar para la mayoría de los visitantes de su sitio, pero, al mismo tiempo, el menú desplegable de un Mause anticipa que sus visitantes se pararán frente a la pantalla y utilizarán una introducción de dispositivo particular para interactuar con Su sitio: un mouse.Desconecte el mouse (o desactive el trackpad si lo controla) y la segunda parte más importante de cada sitio web (según el contenido real) desaparece.¡Podemos hacerlo mejor que eso!Este artículo explicará un paso pequeño pero importante que hace que su sitio de WordPress sea un lugar mejor para todas las personas, con un esfuerzo mínimo.
Echaremos un vistazo a la forma de expandir el comportamiento y navegar en el menú desplegable en su sitio web de WordPress más rico en términos de uso e independientes de los dispositivos de entrada específicos que sus visitantes tienden a usar. El término navegador en este artículo se usa más amplio de lo que habría dado cuenta hasta ahora. Además de los principales navegadores de escritorio que ya conoce, piense en los lectores de pantalla o en cualquier otro dispositivo capaz de leer un documento HTML. Wai-Aria Wai Aria es una abreviatura para las iniciativas de accesibilidad web, las aplicaciones de Internet ricas accesibles y si sigue algunas reglas simples, puede desarrollar un uso mucho más fácil de usar para las personas que usan diferentes dispositivos y software para navegar por la web. Tome este ejemplo: aproximadamente el 7% de los adultos son ciegos o tienen serias dificultades para ver y, en contraste, menos del 3% de las personas usan 6-8 para acceder a Internet. Muchos desarrolladores aún se olvidan del primero y se esfuerzan por apoyar a este último, a pesar de que hay más (semi) ciego y es más fácil y más importante darles una solución que obligar a un sitio HTML5 a funcionar sin problemas en IE. 6. Es por eso que debes pensar seriamente en usar las especificaciones de Wai-Aria.
Aclaremos las cosas. Los atributos de Wai-Aria no cambiarán el aspecto o el estilo de sus páginas, pero lo harán un sitio web más rico para los lectores de pantalla y otras tecnologías de asistencia similares. Hay dos partes de la especificación de Wai-Aria que echaremos un vistazo más de cerca: hito y área. Roles restantes Los roles históricos son atributos en HTML que pueden mejorar drásticamente la accesibilidad de su sitio. Su objetivo principal es proporcionar a los lectores de pantalla una opción de acceso rápido a las áreas principales de una página. Actualmente, hay 8 roles disponibles: Rollers = “Banner” -Seed para el encabezado del sitio web. En el interior generalmente encontraremos el logotipo, la búsqueda, la navegación, etc. Es aconsejable utilizar un solo rol de banner en la página.
Rol = “Navegación” -Seed para enlaces y menús para navegar por el sitio. Usaremos esto luego.
Rol = “Main”: esto es para nuestra área de contenido principal.
Rol = “Complementary”: este papel se usa en una barra lateral. Puedes usarlo varias veces.
Rol = “ContentInfo” – utilizado para el área del sótano. Al igual que el papel de Banner, ContentInfo debe usarse una vez en una página.
Rol = “Buscar” – WordPress usa este rol por defecto, pero si realiza un formulario de búsqueda personalizado, debe agregar este rol.
Rol = “formulario”: esto debe usarse si hay algún formulario presente en la página.
Role = “aplicación”: si una página tiene un tipo de software único, use este rol.
Los roles malos en nuestro tema BuildPress establecen que el área de los estados de ARIA es información específica que generalmente cambia después de que el usuario ha tomado algún tipo de acción. Veremos cómo funciona todo esto en el ejemplo del menú Prollant. Todos los estados y las propiedades globales se pueden encontrar en este enlace. Haga que su menú de navegación WP sea accesible es el momento de ensuciarse las manos. Echemos un vistazo a cómo implementar correctamente los roles y los estados del hito de Wai-Aria para los menús desplegables de WordPress. Los menús se insertan en las plantillas de tema utilizando la función wp_nav_menu (). Para la compatibilidad, siempre es mejor confiar en las funciones nativas disponibles en el núcleo de WordPress. Afortunadamente, wp_nav_menu () es fácil de configurar, por lo que podemos ofrecer los parámetros correctos para hacer navegación en el menú desplegable amigable para tecnologías de asistencia y navegación de teclado.

PHP, HTML y WordPress para echar un vistazo a este ejemplo del código en el archivo Header.php de uno de nuestros temas: <Nav class = "Collappe Navbar-Collaps" Role = "Navigation" Aria-Label = " “> ‘main-navegación’, ‘walker’ => nuevo aria_walker_nav_menu (), ‘elementos /ul>’,)); }? es un elemento HTML5 para agrupar los enlaces de navegación, pero necesita más contexto, a saber, estos dos atributos adicionales: role = “navegación” es el papel de un hito que le dice al navegador que habrá un menú en el interior, para que El lector de pantalla puede saltar directamente a esta sección de la página si el usuario decide.
Aria-label = “” Dígale al título del navegador del menú actual. Otros ejemplos de etiquetas son el menú de barra lateral, el menú del sótano o incluso incluido. Utilicé la función _e () i18n aquí para eliminar el texto real, por lo que la etiqueta del menú se puede traducir a idiomas distintos al inglés, otro aspecto importante para la accesibilidad.
¿Qué pasa con los parámetros de configuración que enviamos a wp_nav_menu ()?
‘Container’ => False evita el menú en un
adicional.
‘Walker’ => nuevo aria_walker_nav_menu () es el parámetro más importante.Dígale al menú que use nuestro menú personalizado y no el predeterminado cuando se trata de los elementos del menú.Esto es importante, porque el Walker ARIA_WALKER_NAV_MENU () produce una marca HTML ligeramente modificada con los atributos Wai-Aria Wai-Aria.Magic! ‘Items_wrap’ => ‘
%3 $ s
‘ es el contenedor más externo
de nuestro menú.Por defecto, este parámetro carece del atributo de role = “Menubar”, que representa el menú horizontal, por lo que lo reparamos con un código personalizado (no le importa cadenas extrañas como %$ 1, se reemplazan dinámicamente a PHP ejecución).
Por supuesto, cuando se llama wp_nav_menu (), la clase ARIA_WALKER_NAV_MENU ya debería existir en el espacio global.Descargue este archivo y colóquelo en algún lugar de su carpeta de tarea y luego incluya en funciones.php:

Requirir_once “ruta/a/aria-walker-niv-menu.php”;Este Walker tiene como objetivo parecerse al WP Nav Walker implícito tanto como sea posible, la única diferencia es la mejora de la accesibilidad;Role = “menú” se agrega al resultado del método START_LVL y se agregan algunos otros atributos al inicio_el: Rollers = “Menuitem” para todos los elementos
y el área-Haspopup = “True” Aria-Expanded = “falso” tabindex = “0” para
con submenus.¿Explicación?Aria-Haspopup indica si
controla el comportamiento emergente de sus descendientes, que obviamente es un menú desplegable.ARIA-Expanded describe el estado “Pop-Up” y los valores predeterminados son falsos (menú desplegable invisible/cerrado).Finalmente, tabindex = “0” permite que el elemento alcance el enfoque cuando el sitio se navega con un teclado; de forma predeterminada, solo los enlaces y los elementos de formulario pueden alcanzar el enfoque.
JavaScript Debido a que la accesibilidad debe ser una parte fundamental de cada sitio web, queremos evitar lo más posible. De hecho, sería más fácil agregar los atributos mencionados anteriormente por JS, pero también sería más propenso a los errores que tenerlos en la fuente HTML: JS puede romper, HTML y CSS no. Sin embargo, no podemos evitar el uso de JS cuando tenemos que actualizar los estados de ARIA. Es por eso que tenemos que colocar la siguiente pieza de JavaScript en la cola: jQuery (función ($ // estilos de enfoque para menús cuando se usa la navegación del teclado // actualiza correctamente los estados de aria en el enfoque (teclado) y el mouse sobre los eventos (‘[[[ [Rol = “Menubar”] ‘) .on (‘ Focus.Aria Mouseetter.Aria ‘,’ [aria-haspopup = “true”] ‘, function (ev) {(ev’, true);}); // Actualice adecuadamente los estados de aria en blur (teclado) y el mouse salga $ (‘[rolle = “menuBar”]). (‘ Blur.aria mouseeleave.aria ‘,’ [aria-haspopup = “true”], funk (ev (ev (ev ) {(Ev.currentArget) .Attr (‘aria-expandido’, falso);};}); Todo lo que hace es que, una vez que cualquier elemento con el área-HASPOPUP = “True” desencadena el enfoque o los eventos de desvanecimiento, el estado correspondiente de Aria expandido se actualiza a True o False.
Pon este archivo con el siguiente código PHP dentro de las funciones.php: add_action (‘wp_enqueue_scripts’, {wp_enqueue_script (‘textdomain-wai-aria’, get_template_directory_uri (). ‘/Path/wai-aaia.js’ ,, array (” JQuery ‘), nulo);}); ¡Y terminaste! La navegación en su sitio tiene mucho más sentido ahora para los lectores de pantalla y otros dispositivos similares. Pero aún no he terminado por completo. CSS Lo último que debemos hacer es hacer que los menús de navegación sean accesibles desde el teclado. Cuando alguien usa la tecla Tab, debería poder navegar en submenus. Este no es el caso por defecto, pero podemos resolverlo fácilmente. Para los menús desplegables con el mouse, probablemente ya tenga algo como esto en SCSS: Ul.Menu-Menu {li.mitem-ha-ha-children {ul.dropdown-Menu: absoluta; Izquierda: -9999px; …}} li.menu -Item-ha-children: hover {ul.dropdown-Menu {izquierda: 0; Top 100%; …}}} Todo lo que tienes que hacer es agregar el selector de CSS Un ejemplo modificado de lo anterior se vería así: Ul.Manu-Menu {li.MiTem-Has-Children {ul.dropdown-Menu {posición: absoluto; Izquierda: -9999px; …}} li.menu -Item-ha-children: hover, li.mitem-ha-children [aria-expandy = “true”] {ul.dropdown-metrown {izquierda: 0; Top 100%;