Sobre esta regra de acessibilidade
Os leitores de ecrã dependem de bibliotecas de som específicas de idioma para pronunciar 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 qual biblioteca usar. Recorre ao idioma que o utilizador configurou durante a instalaçã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.
Esta questão 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 — o que significa 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 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 canadense. -
Para documentos XHTML servidos como XML, use
xml:langem vez de ou além delang.
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 pelo 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 é renderizada corretamente 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.