Crea un selector de idioma accesible

Empieza con un nombre de idioma visible. Las banderas por sí solas pueden resultar ambiguas y su significado depende del país más que del idioma.

Información integrada del enlace

Cada enlace de idioma recibe:

• lang para el idioma de su etiqueta;
• hreflang para su destino;
• rel="alternate";
• aria-current="page" cuando una lista o un enlace incluido representa la configuración regional actual.

Los contenedores de emojis de bandera se ocultan para las tecnologías de asistencia. Las imágenes de bandera tienen texto alternativo basado en la etiqueta del idioma. Combina cualquiera de las dos formas de bandera con texto legible.

Comportamiento del menú desplegable

Los conmutadores del shortcode y del menú desplegable flotante exponen aria-haspopup="true" y un estado actualizado de aria-expanded. Responden a:

• la activación con ratón o puntero;
• Enter;
• Space;
• ArrowDown;
• ArrowUp;
• Escape.

Al abrirlo con el teclado, el foco se desplaza al primer idioma activado. La entrada de menú del idioma actual incluida está desactivada y se elimina de la secuencia de tabulación.

Los menús desplegables del menú de navegación usan el marcado normal de menú anidado del tema. Su accesibilidad depende de la implementación del menú del tema, así que no des por hecho que el script del shortcode los controla.

Realiza una revisión con el teclado

1. Pulsa Tab hasta llegar al selector.
2. Ábrelo sin usar un puntero.
3. Confirma que el foco llega a una configuración regional seleccionable.
4. Muévete por los enlaces disponibles.
5. Ciérralo con Escape.
6. Sigue tabulando por la página.
7. Repite el proceso con un zoom del 200% y en el menú móvil del tema.

Inspecciona también el nombre accesible después de aplicar marcado personalizado. La puntuación decorativa, una etiqueta personalizada vacía o una plantilla que solo tenga banderas pueden hacer que el enlace resulte poco claro incluso cuando el HTML es técnicamente válido.