{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2020/2020-01-14",
  "path": "/blog/2020/2020-01-14",
  "publishedAt": "2020-01-14T00:00:00.000Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": [
    "lang"
  ],
  "textContent": "Se você está começando ou já tem experiência com HTML, com certeza já deve ter notado o atributo lang no seu código.\n\nMas afinal, qual é a utilidade dele?\n\nNesse artigo, vou te mostrar sua utilidade e importância.\n\nÍndice\n\n- Índice\n- Por que isso é importante\n  - Qual a relação do atributo lang com acessibilidade?\n  - Idioma da página\n    - Quem se beneficia?\n    - Exemplos\n  - Idiomas em partes\n    - Quem se beneficia?\n    - Exemplos\n- Quando usar atributo lang?\n- Conclusão\n- Referências\n\nPor que isso é importante\n\nO atributo lang faz parte da família dos atributos globais do HTML, eles podem ser usados sem restrição em quase todos os elementos.\n\nSeu objetivo é fornecer um mecanismo de internacionalização do conteúdo.\n\nPodemos usar de duas formas:\n\n- definir o idioma do documento inteiro;\n- definir o idioma para partes do documento.\n\nPodemos definir os idiomas por meio de uma lista de idiomas.\n\nUsando o idioma para o documento inteiro:\n\nUsando para partes do documento:\n\nQual a relação do atributo lang com acessibilidade?\n\nNa WCAG existem dois critérios relacionados ao idioma:\n\n- 3.1.1 Idioma da página\n- 3.1.2 Idioma em partes\n\nIdioma da página\n\nA intenção deste Critério de Sucesso é garantir que os desenvolvedores forneçam informações para apresentar conteúdo textual em outro idioma corretamente.\n\nQuem se beneficia?\n\n- pessoas que usam leitores de tela;\n- pessoas com dificuldade em ler material escrito com fluência e precisão;\n- pessoas com certas dificuldades cognitivas;\n- pessoas que dependem de legendas para mídia sincronizada.\n\nExemplos\n\nUma página produzida na Alemanha e escrita em HTML inclui conteúdo em alemão e inglês, mas a maioria do conteúdo está em alemão. A língua padrão é identificada como alemão (de) pelo atributo lang no elemento HTML.\n\nIdiomas em partes\n\nSeu objetivo é garantir que o navegador pode apresentar as frases de forma correta. Esse critério apresente o conteúdo considerando:\n\n- entonação;\n- pronúncia;\n- sotaque;\n- particularidades da língua.\n\nAlém disso, os leitores de telas conseguem diferenciar palavras de outro idioma. Fornecendo todas as particularidades do idioma.\n\nPonto importante: essa configuração pode ser desabilitada no leitor de telas.\n\nQuem se beneficia?\n\nTodas as pessoas que se beneficiam com o critério 3.1.1 Idioma da página.\n\nExemplos\n\nUm site com internacionalização que possui links para versões da página em outros idiomas (por exemplo, alemão, francês, holandês, catalão, etc.). O texto de cada link é o nome do idioma.\n\nO idioma de cada link é indicado por meio de um atributo lang:\n\nQuando usar atributo lang?\n\nO atributo lang deve ser usado sempre, ele é obrigatório.\n\nUse o axe dev tools para validar uma página sem o atributo.\n\nConclusão\n\nPercebemos que o atributo é extremamente importante para nossas páginas web e sua implementação é bastante simples. Existem casos em sites multilíngues que o atributo pode ser alterado dinamicamente via linguagens de programação.\n\nMeu conselho é: sempre que iniciar o desenvolvimento de uma página defina a linguagem e não tenha esse tipo de problema.\n\nGostou? Tem alguma dúvida ou sugestão?\n\nEscreva um comentário.\n\nReferências\n\n- \\[1\\] Atributos globais > Lang. Mozilla Developer Network, 2019. Disponível em: Atributo lang. Acesso em: 14 de jan. de 2020.\n- \\[2\\] 3.1.1 – Language of Page (Level A). WUHCAG, 2019. Disponível em Language of Page. Acesso em 14 de jan. de 2020.",
  "title": "Para que serve o atributo lang no HTML?"
}