Seis maiores erros de acessibilidade 디지털 회사

네트워크 기금회, 짐 버너스 리 아레디타바 나 아지소(Tim Berners Lee acreditava na universalidade do acesso)를 설계하다.Mas는 하나의 네트워크를 형성한다.seguiu o desejo do seu criador?Nesse artigo eu te mostro os seis maiores erros em acessibilidade digital e como eles podem ser corrigidos.

Texto com baixo 비교

Diariamente sofro na pele com isso,para quem não me acompanha ou estáchegando por agora no blog,eu possuo ceratocone,uma doença na córnea que aumenta o grau exponencialmente.Algumas combinaões de cores e informaões ficam bastante confusas para mim.
유럽연합이 직면한 문제는 다음과 같다.

darzoomemtextoscombaixo 대비;

mudo as cores dos textos para uma com maior contraste via Inspetor de elementos do navegador;

usar tema escuro.

Guia sobre 비교

Para aplicarmos as correçes de maneira efetiva,devemos consultar as recomendaçes da WCAG.Abaixo와 regrasque se aplicamao는 선명한 대비를 이룬다.

1.4.3 - Contraste (mínimo) [AA] - WCAG 2.0(em inglès);

1.4.6 - Contraste melhorado [AAA] - WCAG 2.0(em inglès);

1.4.11 - Contraste Não-Textual [AA] - WCAG 2.1(em inglès);

2.3.1 - Três flashes ou abaixo do limite [A] - WCAG 2.0 .

Ferramentas para verificaão

Após compreendermos as regras relacionadas ao constraste,devemos elencar ferramentas para corrigir o problema.
Atualmente estou usando Accessible Colors gosto dele pela simplicidade,provavelmente escrevelei sobre ele.
Para examplicar,que vocêfoi contatado Para validar o contraste do menu de um site를 상상해 보세요.Vocêiria inspeciar a cor usada no background do menu e as cores decada item de menu,usando aceable Colors,o resultado serásemelhante a:

Resultado de uma avalião das cores:#ccc para textos do tamanho de fonte 16px e background do site#fff
Tendo o resultado em mãos,vocêpode reportar as incosistências.Essa corre es ão feitas alterando는 CSS로서 ecom poucas linhas de có digo o problema é sanado입니다.
🔥 Vocêpode Encentrar uma lista delas 번호 Awesome A11y.

Imagens sem texto alternativo 이미지

Segundo uma pesquisa do Web AIM,em uma amostragem de 1 milhão de páginas iniciais dos sites mais populares do mundo.공충 38426701개의 이미지, 38.4%는 특수emédia입니다.
Cerca de 31.3%de todas as páginas iniciais(12 por página em média)não possuiam texto alternativo(sem contar o alt="")queéuma forma válida.Mais da metade das imagens sem texto alternativo.

Existe uma grande Discuseãao redor do atributo alt,Reinaldo Ferraz escreveu um artigo,onde demonstra os benefícios do atributo.Além de contribuir para a acessibilidade ele também ajuda no SEO das páginas.
De forma prática a correço desse erroéuma das mais banais,basta preencher o atributo alt com a descripço correta da imagem.
전임자:

<img src="/imagens/duck.png" alt="Pato de borracha amarelo olhando fixamente" />

🔥 아티고 영사관: Texto alternativo: o guia definitivo

vazios 링크

링크vazios, sãum dos maiores erros que já encontrei em avalia ões de acessibilidade.저는 deparocomele,geralmenteocorremquandoprecisamos에 자주 가요.umícone,emumapágina를 포함해요.
Para entendermos isso,vamos consultar a definião do propósito do elemento <a>:

O elemento <a> em HTML (ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada <a> precisará indicar o destino do link.

Além de descumprir com a specificaço do HTML,descumpre também a recomendaço 2.4.4 - Finalidade do link (em contexto) [A] - WCAG 2.0 (em inglês).

prático 범례

Existem duas soluçes que podemos aplicar,quando preciso usar umícone e somente ele ser exibido,posso usar essa abortagem:

<a href="https://twitter.com/obrunopulis">
   <i class="fa fa-twitter"></i>
</a>

Qualquer validador de acessibilidade que se deparar com esse elemento,encontrauma incosistência,pois ele informa um elemento <a> sem um conteúdo text,descumprindo com o propósito de uso dele.Sem nenhum texto isso fica confuso para usuários de leitores de tela.
Nesse exemplo especifíco,um leitor de tela poderia ler o link da URL ou o conteúdo pseudo elemento :before que seria \f002.\f002 nãquer dizer pesquisa ou nenhuma outra informaão.nãoémesmo?
Uma abordagem seria adicionar o texto visualmente ao lado dosícones,pois eles nem sempre são tão claros para os usuários quanto pensamos.caso dos í cones sociais, acho que é bastante claro que sãe o padr ão usado com bastante frequeuência가 없습니다.Nesse caso,vocêpode adicionar conteúdo visualmente oculto.

코리킨도

Queremos adicionar texto para ser lido por um leitor de tela e ter certeza de que o conteúdo adicionado via css não seja lido.

<a href="https://twitter.com/obrunopulis">
   <span class="fa fa-twitter" aria-hidden="true"></span>
   <span class="sr-only">Perfil de Bruno Pulis no twitter</span>
</a>

Com essa abodagem os validadores de acessibilidade não encontrarão nenhum problema,pois o link contém texto oculto que informa o seu destino.

중요한 관찰자

Nem sempre ter um conteúdo ocultoéuma boa soluço.preciso haver uma compreensão visual de qualéo conteúdo e os links para usuários videntes,bem como para usuários de leitores de tela.
🔥 Aprenda a usar o Font Awesome do jeito certo

태그 de formul á rios ausentes

55%dos 4,2 milhões de formulário identificados na pesquisa do WebAIM,não estavam usando elemento <label> ou aria-label ou aria-labelledby.
Páginas com pelo menos um controle de formulário sem rótulo tiveram em média mais 43 erros detectáveis do que Páginas sem nenhum erro de rótulo.
Épreocupante a máda escrita do HTML na web,a grande maioria dos sites possíveis erros básicos de marcaço.
Formulários s sãum dos components mais importantes para web,podemos dizer que deposis do elemento <a> esse componenteéo mais importante.Com essas violaões também
ferem a recomendaço 3.3.2 - Rótulos e instruções [A] - WCAG 2.0 - (em inglês).
Uma das coisas que percebo muito com formulárioséo uso uncipledo do placeholder,maioria dos desenvolvedores utilizam o atributo placeholder com a funão de um <label>.

관련 없는 예

<form>
  <input type="email" placeholder="insira o seu melhor e-mail" />
</form>

O atributo placeholderéuma string que fornece uma breve dica ao usuário quanto ao tipo de informaçO esperado no campo.Deve ser uma palavra ou frase curta que demonstre o tipo de dados esperado,ao invés de uma mensage explicativa.
주: Oatributo placeholder n ã Oésemanticamente útil como outras maneiras de explicar seu formul á rio e pode causar problemas té cnicos inesperados com seu conte údo.

Vale lembrar, para rotular um formulário o elemento correto para ser usado é o label

correto 범례

<form>
  <label for="email">E-mail</label>
  <input type="email" id="email" placeholder="insira o seu melhor e-mail" />
</form>

Botões vazios

Semelhantemte com os links vazios,os botões vazios querem dizer que o elemento não possuíuma informaço text definida.Quando navegamos no botão,um texto descriptivo deve ser apresentado ao leitor de tela para indicatar qual tipo de funão que o botão possuí.
Além disso,essa violaço fere duas recomendaçes da WCAG:

1.3.3 - Características sensoriais [A] - WCAG 2.0 (em inglês) ;

2.5.3 - Rótulo no nome acessível [A] - WCAG 2.1 (em inglês)

O examplo a seguir,demonstra O problema de um botãO sem informaãO text.

<button type="submit">
   <svg id="search" viewBox="0 0 16 16.9">
      <path d="M16, 15.7L11.3,11C12.4,9.8,13, 8.2,13,6.5C13"></path>
   </svg>
</button>

Qualquer validador de acessibilidade notificiaráa incosistência da violaèo das guidelines citadas acima,Para eles não existe um conteúdo text definido,uma abortdagem Para correèo seria inserir o elemento <title> no SVG,pois ele garante que SVGs sejam acessíveis.Scott O'Hara escreveu um artigo imagens acessíveis e SVGS (em inglês).

<button type="submit">
   <svg id="search" role="img" aria-describedby="searchIcon" viewBox="0 0 16 16.9">
      <title id="searchIcon">Search</title>
      <path d="M16, 15.7L11.3,11C12.4,9.8,13, 8.2,13,6.5C13"></path>
   </svg>
</button>

Documentos HTML sem definiço de linguagem

A Languagem do documento HTML na maioria das vezeéignorada ou esquecida.Jáfiz diversas avaliaões em sites com contedos totalmente em portuguès e a definièo do idioma em inglès.
Usuários de leitores de tela,utilizam um sintetizador de voz embutido nos softwares para ler o conteúdo.Uma das primeiras coisas que o sintteizador de voz faz ao navegar em Uma páginaéprocurar a definiço do idioma daquele documento HTML,quando isso aconteche ele configuraráa entonaço,ritmo e sotaque da língua definida no documento.Caso não encontre uma definião ele utiliza o inglès como padrão.
Além dessa confusão linguística,ele descumpre a recomendaão 3.1.1 - Idioma da página [A]- WCAG 2.0 (em inglês)

코리킨도

<!DOCTYPE html>
<html lang="pt-br">
  ...
</html>

Para descobrir mais sobre o atributo lang,acesse:explorando o atributo lang.

결론

Bom se fosse chegou atéaqui parabéns!결론 maratonados seis maiores erros de acessibilidade digital.Vimos detalhamente cada erro e quais recomendaçes eles ferem,também possíveis soluçes para cada um.
하나의 결론은 세계 어느 나라에나 존재한다는 것이다.A maioria dos problemas de acessibilidade são problemas estruturais e educaciais.
Reciclar nosso conhecimento sobre os fundamentosésempre important,pois os frameworks da moda irão passar,mas os velhos amigos HTML,CSS e JavaScript estarão por ai.
E para reflectionão gostaria de deixar uma frase do Tim Berners-Lee:

O poder da Web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua incapacidade, é um aspecto essencial.

O que podemos fazer para mudar essa situaãO?Deixe sua sugestão do que podemos fazer para construirmos uma web accessível para todas as pessoas.

참고

Guia WCAG

Pesquisa do WebAIM

Accessible Colors

Empty link example

Documentação do elementro A

Documentação do atributo placeholder

Explorando o atributo alt