Consejo rápido use el atributo lang para una mejor accesibilidad

los lang atributo es uno de los atributos HTML globales que los desarrolladores pueden aplicar a cualquier elemento HTML, y realmente puede ayudar con la accesibilidad. Le permite especificar el idioma de un elemento y todos sus elementos secundarios mediante una "subetiqueta" de idioma: un código de 2 o 3 caracteres definido por un organismo de estándares internacionales.

A11y desde el principio

Este rápido consejo es parte de Accesibilidad web: la Guía completa de aprendizaje, donde hemos recopilado una serie de tutoriales, artículos, cursos y libros electrónicos para ayudarlo a comprender la accesibilidad web desde el principio..

Uso básico

lang se encuentra más comúnmente en el html Elemento, donde la declaración puede propagarse a todo el contenido de la página. Por ejemplo, una declaración de  le dice al navegador que todo el contenido de la página es en inglés. 

lang las subetiquetas también pueden tener un script o un designador de región, que le permite especificar el sistema de escritura del idioma o la región geográfica. Por ejemplo, una declaración de  Especifica el inglés del Reino Unido (color vs. color, centro vs. centro, etc.).

Puede anular un existente lang Declaración con una más específica. lang Declaración para identificar mediante programación el contenido que usa un lenguaje que es diferente del resto de la página. Una sección escrita en español en una página en inglés se vería así:

 ...      

Entonces, ¿por qué queremos hacer esto? Un par de razones: 

1. Traducción e interoperabilidad.

La identificación de los idiomas del contenido permite que los servicios de traducción como Google Chrome funcionen con mayor precisión. Ya que está hablando con una máquina usando código, puede decirle directamente a los algoritmos de identificación de idiomas extranjeros que debe activar un aviso de traducción. 

Google Chrome solicita al usuario que traduzca una página.

La presencia de un valido. lang La declaración de atributos también ayuda a otros servicios automatizados que ingieren y recontextualizan el contenido del sitio web. Además, puede servir como un gancho de estilo para cosas como CSS ' citas propiedad.

2. Lectores de pantalla

Algunos programas que leen el contenido de la pantalla en voz alta también pueden analizar el lang Atributo, afectando a cómo se pronuncia el contenido de la página. Este software no se limita a la tecnología de asistencia, tampoco. Los asistentes de voz como Alexa, los modos especializados de lectura del navegador, las aplicaciones de navegación como Google Maps, los sistemas de megafonía, etc. pueden tener esta funcionalidad..

Por lo menos, el uso adecuado de la lang atributo puede agregar que extra je ne sais quoi a la experiencia, decirle al software que lea el contenido en voz alta como lo haría una persona.

En el mejor de los casos, ayuda a comprender su contenido. Las interfaces basadas en voz carecen de muchas de las posibilidades que damos por sentado con una interfaz de usuario visual, por lo que es importante que representen el contenido con la mayor precisión posible..

Aquí hay una muestra de cómo el popular lector de pantalla JAWS trata el contenido que tiene un lang atributo correctamente aplicado a ella. Habrá dos ejemplos leídos en voz alta: uno sin y otro con el lang atributo correctamente aplicado a la parte francesa de la frase, "En francés, la frase" ¿Puedo usar su baño? "es, 'Puis-je utiliser votre salle de bain?''

Conclusión

La descripción semántica de su contenido es una de esas pequeñas cosas que puede hacer como desarrollador para mejorar en gran medida la experiencia de las personas y los servicios que utilizan sus sitios web y aplicaciones web..