Sobre esta regra de acessibilidade
Os leitores de ecrã dependem de bibliotecas de som específicas para cada idioma para pronunciar o texto com precisão. Cada idioma tem as suas próprias regras de pronúncia, padrões de entoação e características fonéticas, pelo que os leitores de ecrã carregam a biblioteca apropriada com base no idioma declarado do documento. Quando o elemento <html> não tem um atributo lang ou contém um valor inválido — como um erro ortográfico ou um código inventado — o leitor de ecrã não consegue determinar que biblioteca usar. Recorre ao idioma que o utilizador configurou durante a configuração, o que significa que conteúdo escrito em francês pode ser lido em voz alta usando regras de pronúncia inglesas. O resultado é uma fala que soa como um sotaque confuso e ininteligível.
Este problema afeta principalmente utilizadores cegos e utilizadores surdocegos que dependem de leitores de ecrã, mas também impacta utilizadores com deficiências cognitivas que podem usar ferramentas de texto para fala para ajudar na compreensão. Quando a pronúncia está errada, a compreensão diminui drasticamente.
Critérios de Sucesso WCAG Relacionados
Esta regra mapeia para o Critério de Sucesso WCAG 3.1.1: Idioma da Página (Nível A), que requer que o idioma humano predefinido de cada página web possa ser determinado programaticamente. Este é um requisito de Nível A — o nível mais fundamental de acessibilidade — significando que deve ser satisfeito para conformidade básica sob WCAG 2.0, 2.1 e 2.2. Também é exigido pela metodologia Trusted Tester, EN 301 549 e RGAA.
Como Corrigir
-
Adicione um atributo
langao elemento<html>de abertura. - Defina o seu valor para uma etiqueta de idioma BCP 47 válida que represente o idioma principal da página.
-
Verifique duas vezes a ortografia do código de idioma. Códigos válidos comuns incluem
"en"(inglês),"fr"(francês),"es"(espanhol),"de"(alemão),"ja"(japonês) e"ar"(árabe). -
Pode opcionalmente incluir uma subetiqueta regional, como
"en-US"para inglês americano ou"fr-CA"para francês canadiano. -
Para documentos XHTML servidos como XML, use
xml:langem vez de ou em adição alang.
Se o idioma mudar dentro do documento para passagens específicas, use o atributo lang no elemento apropriado para indicar a mudança. Para idiomas da direita para a esquerda, inclua também o atributo dir="rtl".
Exemplos
Incorreto: Atributo lang em falta
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website.</p>
</body>
</html>
Sem um atributo lang, os leitores de ecrã não conseguem determinar o idioma da página e irão recorrer ao idioma configurado do utilizador, que pode não corresponder ao conteúdo.
Incorreto: Valor lang inválido
<html lang="english">
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website.</p>
</body>
</html>
O valor "english" não é uma etiqueta de idioma BCP 47 válida. O código correto para inglês é "en".
Correto: Atributo lang válido
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website.</p>
</body>
</html>Correto: Subetiqueta regional
<html lang="fr-CA">
<head>
<title>Ma page</title>
</head>
<body>
<p>Bienvenue sur mon site web.</p>
</body>
</html>Correto: Mudança de idioma dentro da página
<html lang="en">
<head>
<title>Multilingual Page</title>
</head>
<body>
<p>This paragraph is in English.</p>
<p lang="es">Este párrafo está en español.</p>
</body>
</html>Correto: Idioma da direita para a esquerda
<html lang="ar" dir="rtl">
<head>
<title>صفحتي</title>
</head>
<body>
<p>مرحبا بكم في موقعي.</p>
</body>
</html>
O atributo dir="rtl" garante que a direção do texto seja corretamente renderizada para idiomas da direita para a esquerda como árabe e hebraico.
Ajude-nos a melhorar os nossos guias
Detecte problemas de acessibilidade automaticamente
O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.