Advertisement
  1. Web Design
  2. Accessibility

Consejo Rápido: Usa el Atributo "lang" para Mejor Accesibilidad

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

El atrbuto lang es uno de los atributos globales de HTML que los desarrolladores pueden aplicar a cualquier elemento HTML, y puede ayudar realmente con la accesibilidad. Te permite especificar el idioma de un elemento y el de todos sus elementos hijo usando una "subetiqueta" de idioma: un código de caracter 2 o 3 definido por una entidad que rige los estándares internacionales.

Uso Básico

lang es comúnmente encontrado en el elemento html, donde la declaración puede propagarse a todo el contenido de la página. Por ejemplo, una declaración de <html lang="en"> le indica al navegador que todo el contenido de la página está en inglés.

Las subetiquetas lang también pueden tener un script o designante de región, que te permite especificar ya sea el sistema de escritura del lenguaje o la región geográfica. Por ejemplo, una declaración de <html lang="en-GB"> especifica inglés británico (color vs. colour, center vs. centre, etc.).

Puedes sobreescribir una declaración existente de lang con una declaración lang más específica para programáticamente identificar contenido que utilice un lenguaje que sea diferente al resto de la página. Una sección escrita en Español en una página en Inglés se vería así:

Así que ¿por qué querríamos hacer ésto? Un par de razones:

1. Traducción e Interoperabilidad

Identificar los lenguajes del contenido permite a los servicios de traducción como Google Chrome funcionar de manera más precisa. Ya que le estás hablando a una máquina que usa código, puedes decirle a los algoritmos de identificación de lenguaje extranjero que debería de generar una pregunta de traducción.

Google Chrome prompting the user to translate a page Screenshot
Google Chrome preguntando al usuario si quiere traducir una página.

La presencia de una declaración de atributo lang válida, también ayuda a otros servicios de automatización que ingresen y recontextualicen el contenido del sitio web. Adicionalmente, puede servir como una conexión de estilo para cosas como la propiedad quotes de CSS.

2. Lectores de Pantalla

Algún software que lee contenido de pantalla con una voz también puede parsear el atributo lang, afectando como pronuncia el contenido de la página. Éste software tampoco  está solo limitado a la tecnología asistiva. Asistentes de voz como Alexa, modos especializados de lectura de navegador, aplicaciones de navegación como Google Maps, sistemas de direcciones públicas, etc. pueden tener ésta funcionalidad.

En el mínimo uso adecuado del atributo lang puede añadir ese extra je ne sais quoi a la experiencia, indicando al software que lea en voz alta el contenido de la foma en que lo haría una persona.

Tanto mejor, auxilia en la comprensión de tu contenido. Interfaces basadas en voz carecen de las muchas cualidades que damos por hecho en una IU visual, así que es importante tenerlas representando el contenido lo más exacto posible.

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

Conclusión

Describir semánticamente tu contenido es una de esas pequeñas cosas que puedes hacer como desarrollador para realzar magníficamente la experiencia de las personas y servicios que usan tus sitios y aplicaciones web.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.