Atributos HTML para melhor acessibilidade e experiência do usuário

No mundo acelerado do desenvolvimento web, é fácil se deixar levar pelas estruturas, bibliotecas e tecnologias de ponta mais recentes. Mas, por vezes, as melhorias mais impactantes resultam da revisão dos fundamentos.

Nesta postagem do blog, vou guiá-lo através de cinco atributos HTML que não apenas melhoram a acessibilidade, mas também aprimoram a experiência geral do usuário. Quer você seja um desenvolvedor experiente ou esteja apenas começando, vamos explorar o potencial desses elementos para criar uma experiência web mais inclusiva.

1.hreflang
O hreflangatributo especifica o idioma de um recurso vinculado em um elemento ou . Funciona como o langatributo, mas é usado especificamente para links.

Por que usar hreflang?
Você pode melhorar a experiência do usuário e o SEO usando hreflanglinks de sites internos e externos.
O uso hreflangde links internos de sites fornece uma maneira de informar aos mecanismos de pesquisa sobre as diferentes variações de uma página para outros idiomas ou regiões. Isso significa que os falantes de inglês receberiam a versão em inglês do site, enquanto os falantes de sueco receberiam a versão em sueco. Não há necessidade de comutação manual por parte do usuário, resultando em uma experiência mais tranquila.

Como usarhreflang
Adicione o hreflangatributo com o código de idioma ISO necessário ao seu elemento. Para um site em inglês, seria en.

English Website
Você também pode ser mais específico com o código do idioma e usar variações regionais. Por exemplo, podemos adicionar en-GBinglês britânico.

English Website
Se o seu site estiver disponível em vários idiomas, você poderá usar hreflangpara especificar o idioma e a região de um documento associado a um URL específico. Adicionar o atributo ajudará os mecanismos de pesquisa a compreender o idioma e a segmentação regional das diferentes versões de páginas da web.

Adicione hreflango código de idioma necessário a cada link. Um link deve atuar como a versão substituta padrão, identificável pela adição hreflang="x-default"em vez do código do idioma. Por último, defina o valor do relatributo "alternate"para cada link no alternador de idioma para indicar que as páginas vinculadas são alternativas à página atual.

Você também pode usar hreflangno seu alternador de idiomas.

English
German
Às vezes, os alternadores de idioma usam o texto do link no idioma para o qual estão mudando. Você pode indicar isso usando adicionalmente o langatributo.

English
Deutsch
Nota: Adicionar o langatributo é particularmente importante para usuários de tecnologia assistiva. Por exemplo, os leitores de tela alteram sua voz e pronúncia com base no atributo de idioma.

Uma forma adicional de melhorar a acessibilidade é incluir aria-current="true"o link atualmente ativo.

English
Deutsch

2. traduzir
O translateatributo é usado para indicar se um elemento deve ser traduzido ou não.

Por que usar translate?
A maior parte do texto do site é traduzível por padrão (com algumas exceções, como texto em imagens ou em SVGs). Ferramentas de tradução, como o Google Translate, podem sugerir a tradução do conteúdo da página se o idioma definido no site for diferente do idioma padrão do navegador. No entanto, pode haver casos em que esse comportamento seja indesejado.
Termos específicos como nomes de empresas, endereços de e-mail ou exemplos de códigos geralmente não devem ser traduzidos para evitar confusão. As traduções automáticas nem sempre são totalmente precisas, principalmente com palavras técnicas ou de nicho.

Como usar translate
Você pode usar a tradução em qualquer elemento HTML. Atribua uma string vazia ( "") ou yespara tradução e nopara evitar tradução.

Wien ist (wieder) die lebenswerteste Stadt der Welt!

Wien ist (wieder) die lebenswerteste Stadt der Welt!

Vienna named world's most liveable city (again)!

Wien named world's most liveable city (again)!

3. invertido O reversedatributo é usado para listas ordenadas inversamente (

) na ordem oposta.

Por que usar reversed?

O uso do reversedatributo mantém a mesma ordem dos itens da lista visual e semântica, mas eles são numerados do maior para o menor. Isso significa que adicionar este atributo à sua lista ordenada (

) não reverterá os itens da lista, mas apenas os números da lista. Por exemplo, esse comportamento é útil se você quiser fazer uma contagem regressiva das cinco sobremesas principais. No entanto, o atributo invertido não afeta listas não ordenadas (
).

Nota: O atributo invertido não afeta listas não ordenadas (

).

Como usarreversed
Adicione o reversedatributo ao seu elemento de lista.

1. Cookies
2. Crema Catalana
3. Tiramisu
4. Pastel de Nata
5. Sacher cake
Isso resultará na seguinte lista invertida:

Biscoitos
Crema Catalana
Tiramisu
Pastel de Nata
Bolo Sacher
Nota: Os leitores de tela anunciam a lista na ordem DOM junto com o número correto: "5. Cookies, 4. Crema Catalana, etc.".

4. controles
   O controlsatributo instrui o navegador a mostrar os controles padrão de vídeo ou áudio .

Por que usar controls?
Incluir controles de reprodução em seu conteúdo de vídeo e áudio é essencial para uma ótima experiência do usuário, acessibilidade e usabilidade. Esses controles permitem que os usuários parem ou ajustem a reprodução de vídeo/som e ajudem aqueles que possam sentir enjôo ou distração enquanto navegam em seu site.
Os controles padrão incluem os fundamentos da reprodução, como reproduzir, pausar, buscar (posição móvel) e volume, bem como alternar tela cheia, legendas/legendas e rastrear apenas conteúdo de vídeo.

Nota: Os controles do navegador fornecidos como padrão devem ser usados ​​com cautela. Às vezes, a navegação baseada no teclado pode causar problemas, como perda de foco, forçando o usuário a se reposicionar. Considere implementar controles personalizados ou integrar um reprodutor de mídia externo equipado com recursos de acessibilidade. No entanto, ainda é preferível incluir controlos do que não o fazer.

Como usarcontrols
Você pode adicionar o controlsatributo ao elemento ou .

Your browser does not support the video tag.

Nota: Os controles padrão não podem ser estilizados com CSS.

5. preenchimento automático
O autocompleteatributo permite que o navegador preencha os valores do formulário automaticamente e pode ser aplicado aos elementos

, , e .

Por que usar autocomplete?
Com o autocompleteatributo presente, um navegador pode sugerir a entrada de um usuário anterior para o valor de um campo de formulário, o que significa que o usuário não precisa lembrar ou inserir manualmente informações pessoais. Isto resulta em benefícios significativos para indivíduos com deficiências cognitivas, mobilidade reduzida, déficits de atenção, baixa visão ou cegueira. Algumas pessoas podem achar a redução da entrada manual em formulários particularmente benéfica, pois diminui a necessidade de digitação extensa.

O autocompleteatributo melhora a usabilidade e a eficiência de um formulário HTML para os usuários, informando os navegadores e as tecnologias assistivas sobre o uso pretendido de um campo de formulário específico. Os leitores de tela usam esses valores de preenchimento automático para compreender a natureza dos campos de entrada e ajudar os usuários a inserir informações com mais eficiência. Por exemplo, se o navegador de um usuário salvou informações para um campo específico (como nome ou e-mail), o leitor de tela solicitará que ele preencha essas informações automaticamente.

Como usarautocomplete
Você pode atribuir valores diferentes a autocomplete.

Se você escolher off, o navegador não poderá inserir ou selecionar automaticamente um valor para esse campo.

E-Mail

Nota: Muitos gerenciadores de senhas ainda podem solicitar que o usuário salve informações ou use dados armazenados anteriormente.

Se você escolher on, o navegador completará a entrada automaticamente. No entanto, uma vez que não são fornecidas mais informações sobre os dados esperados, o navegador pode usar o seu próprio julgamento.

First Name

Last Name


Email


A solução ideal é especificar valores distintos para os dados necessários, optando pelo valor correspondente em uma lista de finalidades de entrada disponíveis .

Seu formulário poderia ficar assim:

First Name

Last Name


Email


Nota: A ausência ou uso incorreto de um autocompleteatributo em um campo de entrada pode causar transtornos aos usuários, principalmente aqueles com deficiência cognitiva. Os navegadores não conseguem sugerir valores precisos, dificultando que os indivíduos forneçam a informação esperada. Certifique-se de escolher o valor correto.

Conclusão
Espero que a exploração desses atributos tenha despertado o seu interesse. Ao embarcar em seu próximo projeto, lembre-se da importância de priorizar usabilidade, acessibilidade e simplicidade.