Escrevendo CSS com acessibilidade em mente

Introdução

Dicas sobre como melhorar a acessibilidade de seus sites e aplicativos com CSS.

Este artigo também está disponível em russo, graças ao Workafrolic, e em japonês , graças a Keita Nakanishi.

Há cerca de um ano comecei a me concentrar mais na acessibilidade na web. Para mim, o método mais eficaz de aprender é ensinar os outros. Essa é uma das razões pelas quais estou palestrando em encontros e conferências e porque estou escrevendo artigos sobre o assunto. Eu escrevi sobre  Progressive Enhancement para o site Smashing Magazine e sobre os princípios básicos de acessibilidade aqui no site Medium. Este artigo é o terceiro de uma série de coleções de dicas de acessibilidade. Eles não estão em nenhuma ordem particular e você pode ler Escrevendo HTML com acessibilidade em mente e Escrevendo JavaScript com acessibilidade em mente agora ou mais tarde, se você estiver interessado.

Fiz meu primeiro site há 17 anos, quando o CSS ainda era relativamente novo. Desde então, muitas coisas mudaram e o CSS agora nos oferece um incrível conjunto de ferramentas para estilizar a web. Passamos de Verdana para Webfonts, de larguras fixas para Design responsivo , de layouts baseados em tabelas para Grid Layout e não precisamos mais usar imagens para bordas, fontes ou sombras. Temos propriedades personalizadas , queries de recursos , função calc () e várias novas unidades CSS. Isto, obviamente, é apenas um subconjunto das grandes funcionalidades desenvolvidas nos últimos anos.

Embora essa ampla gama de propriedades e infinitas maneiras de resolver tarefas com CSS facilite nossas vidas, também cria o risco potencial de piorar a experiência de nossos usuários. Na verdade, é possível tornar um site inacessível com apenas três linhas de CSS.

Nesta matéria, coletei técnicas, considerações e abordagens que ajudarão você a escrever CSS mais acessível. A coleção começa com conceitos básicos e propriedades conhecidas e depois abrange algumas novidades.

No final a matéria ficou muito mais extensa do que eu imaginava, então criei um menu para que que você possa ir diretamente para uma seção que mais lhe interesse:

• De legível a texto legível
• Conteúdos em pseudoelementos devem ser usados com cautela
• A tela não é a única mídia
• Retorno para valores de propriedade com suporte incompleto
• Existem muitas maneiras de ocultar conteúdo
• Você não pode confiar em mau contraste
• A cor sozinha não deve ser a única fonte de informação
• Cuidando da ordem
• Concentre-se no que é importante :focus
• Estruturas de documentos

Boa leitura!

De legível a texto legível

Imagens, ícones e vídeos são partes integrantes do design da web atual, mas o texto ainda é a maior parte do conteúdo na maioria dos sites. É importante gastar um bom tempo modelando, testando e ajustando as propriedades da fonte, pois o texto deve ser legível, independentemente do dispositivo.

Aumentando o tamanho da fonte

Houve um tempo em que o tamanho da fonte de 12px para o corpo do texto era padrão , mas com o aumento da resolução dos dispositivos o tamanho médio da fonte ficou em algo entre 15 e 18px por um tempo. Nos últimos anos subiu novamente para 20px ou mais, o que é uma coisa boa. O texto deve ser grande o suficiente para ser lido em smartphones e aumentar com o tamanho da tela para continuar legível à distância em telas grandes como as telas de TVs.

Como as características dos tipos de letra podem diferir muito, não faz sentido definir um tamanho mínimo padrão, mas 18 a 20px provavelmente é um bom ponto de partida para tamanhos de tela menores. 
Claro, há muito mais a dizer sobre o tamanho da fonte, mas não irei abordar nessa matéria. Sugiro que você leia Your Body Text Is Too Small por Christian Miller para mais detalhes.

Definindo line-height

A altura da linha padrão nos navegadores é aproximadamente 1.2. De acordo com as  Web Content Accessibility Guidelines ela deve ser de pelo menos 1.5 dentro de parágrafos em blocos de texto.

O texto dentro de um parágrafo com altura de linha ajustada não é apenas mais legível, mas também é visualmente mais atraente.

Alinhando texto para a esquerda ou para a direita

Usar texto justificado ainda que nos pareça visualmente melhor é considerado uma má prática. text-align: justify modifica o espaçamento padrão entre palavras para acomodar o texto em linhas de igual comprimento. Esses espaços irregulares podem prejudicar a legibilidade e ser muito perturbador. Quebrar palavras quando necessário pode ser uma solução, mas a hifenização das CSS não é bem suportada e pode não funcionar como esperado.

Definindo larguras de parágrafo

De acordo com várias fontes, os designers devem se esforçar para acomodar de 45 a 85 caracteres por linha, já que a largura ideal para um parágrafo é supostamente de 65 caracteres.

Ao definir larguras ou blocos de textos a unidade de medida CSS ch pode ser bastante útil, pois 1ch é equivalente à largura do caractere 0 (zero) que por sua vez depende das declarações de font-family e/ou font-size.

CSS

p {  
  max-width: 65ch;
  /* Largura máxima de 65 caracteres */
}

Caso você tenha optado por usar uma técnica de tipografia responsiva não se esqueça de testar em telas de grandes dimensões. Se não forem estabelecidos limites para o tamanho da fonte o texto poderá se tornar ilegível em determinadas larguras de viewport. Para aber mais detalhes sobre tipografia responsiva consulte o artigo escrito por  Mike Riethmullers denominado Precise control over responsive typography.

Conteúdos em pseudoelementos devem ser usados com cautela

Os pseudoelementos ::before e ::after se destinam a inserir e estilar conteúdos no início e no fim de um elemento respectivamente. É, sem dúvida uma maneira habilidosa de se criar elementos de design para nossos componentes e nos permite tanbém inserir conteúdos com uso da propriedade content. Segundo os princípios da separation of concerns tal prática não é recomendável.

CSS

h2 { content: "DON'T DO THIS";}

Conteúdos devem estar em arquivos HTML, banco de dados ou vir de uma API, mas não nas CSS. Em determinados casos a propriedade content é usada para inserir conteúdo não textual, tais como fontes de ícones ou caracteres especiais. Se você fizer isso esteja ciente de que  alguns leitores de tela leem conteúdos gerados. Se tais conteúdos cumprirem função meramente decorativa esconda-os das tecnologias assistivas usando, por exemplo, o atributo aria-hidden.

HTML

<span class="icon icon-key" aria-hidden="true"></span>

A tela não é a única mídia

Embora vivamos em uma era digital as pessoas imprimem conteúdos. Certifique-se de que sua página é acessível quando impressa ou quando criada a versão PDF. Basta adicionad a diretiva @media na CSS e alterar a estilização dos elementos ou mesmo escondê-los caso não fazirem sentido quando impressos, tais como menus de navegação e banners.

CSS

@media print {  
  .header { 
    position: static;
   }
   
  nav { 
    display: none; 
  }
}

Os links quando impressos tornam-se inúteis, pois não há como saber para onde eles estão apontando. Felizmente CSS permite resolver essa questão mostrando o valor de um atributo HTML na tela (ou no papel no caso de impressão).

CSS

@media print {  
  a[href ^ = "http"] :not ([href * = "mywebsite.com"]) ::after { 
    content: "(" attr (href) ")";  
   }
}

Essa regra CSS exibirá o valor do atributo href ao lado de cada link que tenha um atributo href, que comece com http, e que não contém mywebsite.com em seu valor.

O Firefox e especialmente o Chrome oferecem ferramentas para testar e depurar folhas de estilo de impressão.

Se você quiser ir mais fundo, coletei várias dicas e truques para trabalhar com estilos de impressão.

Retorno para valores de propriedade com suporte incompleto

Às vezes, nos encontramos em uma situação em que queremos usar um determinado valor para uma propriedade, mas não conseguimos porque não há suporte em alguns navegadores. Isso não deve nos impedir de usá-lo, desde que tenhamos uma alternativa. Frequentemente, nem precisamos de queries de recurso ou qualquer outra detecção de recurso para fazer isso. 
Digamos que você queira usar a unidade CSS vmax, que o IE e as versões anteriores do Edge não entendem.

CSS

div {   
  width: 50vmax; 
  / * Não funciona no IE e em versões anteriores do Edge * / 
 }

Para fornecer um fallback, você simplesmente define a propriedade width para algo menos ideal, mas algo que o navegador entenderá, por exemplo width: 50vw. Na linha seguinte, você define o valor real desejado.

CSS

div {  
  width: 50vw;   
  width: 50vmax; 
}

Navegadores que não entendem vmax irão aplicar a declaração width: 50vw e simplesmente ignorar  a declaração width: 50vmax. Por outro lado, navegadores que entendem vmax primeiro interpretam width: 50vw e depois width: 50vmax. Como a declaração vmax vem depois da declaração vw, a declaração vmax é o que os usuários receberão (efeito cascata).

Existem muitas maneiras de ocultar conteúdo

Cabeçalhos em HTML são muito úteis quando se trata de estruturar um documento. Usando cabeçalhos <h1>- <h6> você diz ao navegador e a outros softwares como o documento é estruturado e como partes do documento se relacionam. É muito importante conhecer a estrutura sonora do documento, é bom para SEO e ajuda os usuários de leitores de tela a navegar em seu site. Pode acontecer de você ter que implementar um design onde não haja títulos, mesmo que faça sentido tê-los. Esse é frequentemente o caso quando o próprio design transmite a estrutura. Nesse caso, você simplesmente não remove cabeçalhos da marcação, mas oculta-os visualmente. Deve ficar claro como o seu documento é estruturado com ou sem CSS.
Este é, naturalmente, apenas um exemplo, esconder visualmente rótulos em formulários é outro (ainda que difícil de uma perspectiva de UX você não deve esconder rótulos ).

No CSS, existem várias maneiras de ocultar conteúdo e cabe a você escolher a técnica certa para o cenário certo.

Escondendo o conteúdo de todos

Ao usar o atributo hidden ou as declarações visibility: hidden e/ou display: none ocultar o conteúdo completamente, os usuários não poderão vê-los e os leitores de tela ou os mecanismos de pesquisa não poder lê-los.

Escondendo o conteúdo visualmente

Esconder conteúdo apenas visualmente não é tão fácil. Você tem que se certificar de que ainda é acessível aos leitores de tela, você tem que lidar com as peculiaridades do navegador e você tem que decidir o que acontece quando o elemento recebe o foco. Claro, as pessoas já fizeram isso e existem soluções que você pode usar.

Eu fiz algumas pesquisas e, como se vê, existem muitas abordagens diferentes. Eu perguntei a alguns especialistas sua opinião e expliquei a técnica recomendada para poder entender completamente o que está acontecendo.

CSS

.visually-hidden {  
  / * Remove o item do fluxo normal * /  
  position: absolute;   
  
  / * Solução para texto falsamente pronunciado * /   
  white-space: nowrap;   
  
  / * Defina o menor tamanho possível (alguns leitores de tela ignoram elementos com altura e largura zero) * /   
  width: 1px;   
  altura: 1px;  
  
  / * Ocultar conteúdo em overflow após redimensionar * /   
  overflow: hidden;   
  
  / * Redefine qualquer propriedade que possa alterar o tamanho dos elementos * /   
  border: 0;   
  paddings: 0;   
  
  / * O recorte define qual parte de um elemento deve ser exibida. * /   
  / * Propriedade clip obsoleta para navegadores mais antigos * /   
  clip: rect (0 0 0 0);  
  
  / * clip-path para navegadores modernos. inset (50%) define um retângulo embutido que faz o conteúdo desaparecer. * /   
  clip-path: inserção (50%);     
  
  / * Parece que ninguém sabe ao certo porque a margem: -1px foi declarada. Ver (1) a seguir * /   
  margin: -1px; }

(1) https://github.com/h5bp/html5-boilerplate/issues/1985).

Salve a classe .visually-hidden e use-a sempre que quiser ocultar conteúdo visualmente e ainda assim tornar acessível às tecnologias assistivas e aos mecanismos de busca.

Skip links

A classe .visually-hidden também é adequada para uso como um link de salto (skip link). Um link de salto é um link que é inicialmente oculto, mas torna-se visível quando recebe foco. Deve ser um dos primeiros elementosde marcação da página e destina-se a fornecer aos usuários de leitores de tela e de teclado a chance de pular imediatamente o conteúdo introdutório e ir direto para o conteúdo principal. Basicamente, é apenas um link interno que levará o usuário a uma parte específica da página.

Tente você mesmo neste Code Pen , pressione Tab para revelar o link de salto.

Escondendo conteúdo semanticamente

Às vezes, faz sentido exibir o conteúdo visualmente, mas ocultá-lo dos leitores de tela, por exemplo, quando você está usando ícones. Nesse caso, adicione o atributo  aria-hidden ao elemento que você deseja ocultar e defina-o true.

HTML

<button>   
  <span class = "ícon icon-hamburger" aria-hidden = "true"> </ span>  
  <span class = "text"> Menu </ span> 
</ button>

Outras

Existem outras maneiras de ocultar conteúdo, tais como declarar valor negativo para a propriade text-indent ou valor zero para as propriedades  font-size ou height. Enquanto alguns funcionam, existem certas ressalvas. Para saber mais leia as técnicas para ocultar o texto em webaim.org.

Você não pode confiar em mau contraste

Nossos projetos devem fornecer contraste suficiente entre texto e fundo para serem legíveis. Pessoas com baixa visão se beneficiam de alto contraste, bem como pessoas sem deficiência visual. Basta pensar em usar seu smartphone em um dia ensolarado.

O que é contraste de cores e por que é importante

Segundo a Organização Mundial da Saúde, cerca de 4% da população é deficiente visual. 7 a 12% dos homens e menos de 1% das mulheres apresentam algum tipo de deficiência visual. Muitas dessas deficiências reduzem a sensibilidade ao contraste e, em alguns casos, a capacidade de distinguir cores.

Duas cores contrastam quando são de segmentos diferentes da roda de cores. De um modo geral, quanto maior a diferença entre duas cores, maior o contraste. Para nós, como web designers e desenvolvedores, não é apenas o contraste por si só, mas o quão bem ele funciona quando aplicado ao texto. O contraste entre o texto e seu fundo deve ser pelo menos alto o suficiente para que possa ser lido por pessoas com visão moderadamente baixa. É claro que não precisamos adivinhar se atendemos a esse critério, a Iniciativa de Acessibilidade na Web (WAI) definiu uma proporção para medir o contraste de cores.

A relação de contraste mínima

A taxa de contraste indica quão alto é o contraste entre a cor do texto em determinados tamanhos e larguras e a cor do plano de fundo. A taxa varia de 1:1 a 21:1. É 1:1 se as duas cores comparadas forem as mesmas e 21:1 se as cores preto e branco forem as cores comparadas.

(Fonte: Ferramenta para determinar a taxa de contraste )

De acordo com as Diretrizes de Acessibilidade ao Conteúdo da Web (WCAG) 2.0 , devemos garantir que uma taxa de contraste de pelo menos 4.5:1 exista entre o plano de fundo e seu texto (ou imagens de texto). Isso se aplica ao texto que é menor que 24px (se não estiver em negrito) e menor que 19px (se estiver em negrito). Para textos maiores, uma proporção de 3:1 é suficiente. Esses são os números mínimos para atender aos critérios do nível AA. Para passar ao nível AAA, a razão mínima para o texto normal é 7:1 e 4.5:1 para texto em negrito. Não é necessário para conformidade, mas se estivermos usando ícones, devemos tentar usar ícones que atendam às disposições de contraste para texto.

Eu comentei com meu amigo Daniel sobre a taxa de contraste e como seria importante a verificarmos em um projeto no qual estamos trabalhando atualmente. Depois de tentar com combinações diferentes, ele me ligou e disse que isso era mais difícil do que ele pensava. A questão não é que não haja combinações visualmente agradáveis ​​suficientes, mas ocorre que nos últimos anos o designer se acostumou a usar cores de baixo contraste. Pequenas agências, bem como grandes empresas, como a Apple ou o Google, são culpadas de seguir essa tendência desfavorável de design.

Embora a idade realmente tenha prejudicado minha visão, descobri que estava sofrendo de uma tendência de design.

Kevin Marks

Há uma fórmula para calcular a taxa de contraste , mas não se preocupe, você não precisa extrair sua calculadora antiga. Existem ferramentas.

Medição da taxa de contraste

No Chrome Canary, é possível exibir a taxa de contraste diretamente no Dev Tools. Remy Sharp publicou um post no seu blog sobre essa ferramenta.

Existem muitas ferramentas para testar o contraste de cores e acessibilidade em geral. A lista a seguir não é extensa, mas uma pequena coleção de ferramentas de minha preferência pessoal.

Online

• Contrast ratio por Lea Verou
  Verificador de contraste rápido e fácil no navegador
• Colour Contrast Check por Jonathan Snook
  Verificador de contraste no navegador com mais algumas opções
• Wave tool
  Browsertool para verificação de contraste e outros aspectos de acessibilidade
• Accessible Color Spaces por Kevin Gutowski 
  Seletor de cores com verificação de contraste automático

Browser extensions e DevTools

• Chrome DevTools Audits Panel
  Chrome 60 foi lançado com um novo painel de auditorias, com o suporte da Lighthouse. Entre outros, fornece pontuações de acessibilidade de sites e lista problemas.
• tota11y
  Extensão de navegador para testar o contraste, a estrutura do documento e muito mais.
• aXe
  "Ferramenta automatizada para encontrar defeitos de acessibilidade em seu site usando a extensão aXe do Chrome."

Outras

• Color Contrast Analyser for Sketch
  “Um plugin de Sketch que calcula o contraste de cores de duas camadas e as avalia conforme as WCAG.”
• More color contrast tools

Experiências de alto contraste

Usar cores de alto contraste é ótimo, mas pessoas com baixa visão ainda podem querer alterar as cores usadas pelos sites. Existem muitas necessidades de usuário diferentes e, consequentemente, há também uma variedade de métodos para alterar as cores disponíveis. Esse fato acarreta uma certa imprevisibilidade e torna difícil para nós garantir que nossas páginas estejam sempre acessíveis. É por isso que não devemos confiar apenas no nível AA ou AAA para contraste, mas também testar nossos sites e considerar o fornecimento de alternativas de alto contraste.

Modo de alto contraste no Windows

No Windows, há uma opção de alto contraste nas configurações. Os usuários podem definir suas próprias configurações de cores ou escolher um tema predefinido.

Fiz um formulário de login simples (o primeiro de quatro capturas de tela; inspirado por: https://dribbble.com/shots/1687064-Simple-Login-Form ) e testei-o com diferentes temas de alto contraste.

Anika Henke escreveu sobre como os usuários mudam as cores dos sites. Ela descreve que, ao testar um formulário, descobriu que os campos de entrada se tornavam invisíveis e os botões irreconhecíveis. Você pode ver a mesma coisa acontecendo na imagem acima. Se não fosse pelo texto do espaço reservado, os usuários não saberiam que existem dois campos de entrada. Uma solução rápida era adicionar uma borda padrão para campos e botões (não testados em navegadores).

Você pode usar consultas de mídia para detectar se o modo de alto contraste está ativo e fornecer estilos específicos.

CSS

  * Modo de alto contraste ativo * / 
  @media (-ms-high-contrast: active) {  }
    
   / * Modo de alto contraste com tema preto sobre branco  * / 
   @media (-ms-high-contrast: black-on-white) {  }
   
   / * Modo de alto contraste com um tema específico em branco sobre preto * / 
   @media   (-ms-high-contrast: white-on-black) {   }

Patrick H. Lauke compartilha seus pensamentos e preocupações sobre esses recursos de mídia no Modo de Alto Contraste do Windows: a utilidade limitada de -m de alto contraste. Em resposta, Greg Whitworth ressaltou que o único propósito do recurso é ajudar a fornecer aos usuários com sensibilidade ao contraste uma experiência melhor. Como tal, você não deve necessariamente se preocupar com a cor específica. Até certo ponto, você nem deveria se importar com a aparência do seu site, mas como ele funciona em alto contraste.

Extensão Chrome de alto contraste

Há também uma extensão de alto contraste para o Google Chrome, que permite aos usuários navegar na web com vários filtros de cor de alto contraste projetados para facilitar a leitura de texto.

Alternativas de alto contraste

Se houver partes do seu projeto que não tenham contraste suficiente, ainda é possível atender aos critérios do WCAG segundo o prescrito em alternate version. De acordo com o prescrito, você deve fornecer aos usuários um link para uma versão de alto contraste da página ou um controle na página que possa alterar a página para que todos os aspectos estejam em conformidade.

Existem alguns critérios para esta alternativa:

• O link ou controle deve ser colocado de forma destacada na página.
• O link ou controle deve satisfazer o requisito de contraste.
• A nova página deve conter todas as mesmas informações e funcionalidades da página original.
• A nova página deve atender a todos os critérios desejados.

Testando com NoCoffee

Satisfazer os critérios é uma coisa, mas testar com pessoas reais é outra. Nem todos nós temos os meios para testes profissionais. Felizmente, o NoCoffee nos fornece uma maneira rápida e fácil de simular baixa visão, deficiências de cor e campos visuais bloqueados. Pode ser útil para entender os problemas enfrentados por pessoas com problemas de visão leves a extremos.

A cor sozinha não deve ser a única fonte de informação

Como já mencionado, uma porcentagem muito alta de homens tem deficiências de visão de cores. Existem tipos diferentes também. Deuteranomalia, uma das mais comuns, dificulta a diferenciação entre vermelho e verde. Devemos evitar o uso de cores apenas como dicas visuais,porque as interfaces podem se tornar inutilizáveis ​​para pessoas com deficiência de visão de cores.

Usando o formulário do exemplo anterior adicionei bordas aos campos de entrada para indicar estados de sucesso e erro. A captura de tela a seguir mostra que a cor sozinha não é suficiente para dar feedback aos usuários. As cores da borda não são visíveis ou estão erradas.

Adicionar ícones simples pode ajudar a melhorar a acessibilidade e a experiência do usuário.

Outro exemplo são os links. Eles também não devem diferenciar do texto normal apenas pela cor. É melhor manter sublinhados nos links.

Cuidando da ordem

Existem inúmeras maneiras de alterar a ordem em que os itens são dispostos. Por exemplo, há as propriedades order, flex-direction e flex-flow para Flexbox e também o posicionamento explícito para o Grid Layout. Embora essas propriedades sejam realmente úteis, elas podem criar uma desconexão entre a ordem no DOM e a ordem na apresentação visual do conteúdo.

No exemplo a seguir, você pode ver uma galeria, na qual as imagens foram posicionadas usando várias propriedades de grid.

À primeira vista, parece não haver problema, mas quando você usa o teclado para pular de imagem para imagem, você verá que a ordem é completamente imprevisível. Não há como saber qual imagem será destacada em seguida, quando você pressionar a tecla Tab. Agora acrescente a isso uma má declaração CSS para estilizar elementos que recebem o foco e você criou o cenário perfeito para ilustrar o pior caso.

Ordem imprevisível ou errada não se refere apenas aos usuários de teclado. Leitores de tela anunciam conteúdo na ordem DOM, o software não é afetado por declarações CSS, mas seus usuários são. Você pode pensar que os usuários do leitor de tela não se importam com a representação visual do conteúdo. Isso nem sempre é o caso, porque nem todos os usuários de leitores de tela são cegos. Alguns têm baixa visão ou deficiências de aprendizado e usam leitores de tela para complementar o que vêem na tela.

Esses problemas de ordenação de conteúdos não se aplicam apenas a itens do flexbox ou de Grid layout, mas a qualquer tipo de posicionamento. É importante ordenar o conteúdo de uma maneira que faça sentido sem os estilos e, em seguida, verifique se ele corresponde ao previsto no design. Caso contrário, talvez seja necessário alterar seu design. O que quer que você faça, não reordene cegamente os elementos na sua marcação apenas porque você não consegue posicioná-los corretamente com uso de CSS.

Para mais detalhes assista O reordenamento de conteúdos afeta a acessibilidade? de Rob Dodson e leia  A ordem do código importa de Adrian Roselli.

Concentre-se no que é importante :focus

Eu já escrevi uma matéria sobre fundamentos de navegação de teclado e elementos focáveis ​​em Escrevendo Javascript com acessibilidade em mente. Antes de continuar lendo, dê uma olhada rápida naquele artigo, se você for completamente iniciante no assunto.

É importante garantir que seus sites sejam navegáveis ​​pelo teclado. Muitos usuários dependem do teclado quando navegam na web. Entre eles estão pessoas com deficiência motora, pessoas cegas e pessoas que não têm mãos ou não podem usar o mouse ou trackpad por qualquer motivo.

Há várias coisas que você pode fazer nas CSS para servir estilos para elementos que recebem foco.

Selecionando itens focados

Você pode selecionar itens focáveis em seu estado de foco usando a  pseudoclasse focus e aplicar estilos a eles.

CSS

a:focus {  
  background-color: # 000000; 
  color: #FFFFFF; }

Os estilos de foco padrão não são muito consistentes nos navegadores, geralmente são feios e, em alguns casos, não funcionam bem com o design. É aconselhável fornecer um estilo de foco personalizado que melhore a experiência do usuário e se adapte ao seu design.

Faça o que fizer, não remova o contorno padrão (contorno pontilhado na cor azul ou laranja) sem fornecer estilos alternativos. Os usuários que dependem do teclado como sua principal forma de navegação não poderão usar seu site, se não souberem onde está o foco.

Isso não é apenas uma dica, mas um critério de nível AA.

Diferenciando entre usuários de teclado e mouse

Como já mencionado, uma das coisas que frustra os designers é que há muitas inconsistências entre os navegadores quando se trata de estilos de foco. Outra fonte de frustração é que os estilos de foco também são visíveis quando os usuários usam o mouse em alguns elementos focáveis. Às vezes não é necessário mostrá-los, pode até ser uma distração para usuários de mouse e esteticamente desagradável.

Remover a propriedade outline não é uma opção porque o componente não estaria mais acessível aos usuários de teclado. O que precisamos é uma maneira de diferenciar o uso do teclado e do mouse. Isso será possível com uso da  pseudoclasse :focus-ring que faz parte da especificação de seletores CSS Nível 4. “A pseudoclasse :focus-ring se aplica quando um elemento casa com a pseudoclasse :focus, e o UA determina via heurística que o foco deve ser especialmente indicado no elemento (tipicamente através de um“ anel de foco ”).” (Fonte: CSS Seletores de Rascunho de Nível 4 )

CSS

  / * Remova o contorno padrão * / 
  :focus {   outline: none; } 
 
  / * Adicione um contorno somente quando ele estiver visível * / 
  :focus-ring {   outline: 2px solid blue; }

Infelizmente, no momento nenhum navegador suporta a pseudoclasse  :focus-ring (o Firefox suporta -moz-focus-ring ), mas há um poly-fill leve que adicionará a classe .focus-ring quando apropriado.

CSS

  / * Se JavaScript estiver ativo e funcionar, selecione todos os elementos que podem ser focalizados que não tenham a classe .focus-ring e remova o esquema * /
    .js-focus-ring: focus: not(.focus-ring) {     
      outline-width: 0; 
    }

Para mais detalhes, assista ao episódio de Rob Dodson - Focus Ring!

Estilização de elementos com elementos-filhos focáveis

A pseuclasse :focus-within é relativamente nova, mas já ésuportada pela maioria dos navegadores modernos. Ele permite que você selecione um elemento que tenha elementos filhos focados no momento.

CSS

form:focus-within {   
  box-shadow: 0 0 4 px 6 px rgba (80,88,156,0,2); }

Você pode ver isso em ação no CodePen .

Para mais detalhes sobre os conceitos básicos de foco assista o O que é focus? no YouTube.

Estruturas de documentos

Quando estamos construindo um novo site, geralmente começamos escrevendo HTML. Nós escolhemos o markup correto e colocamos os elementos em ordem lógica. Quando o documento é válido, bem estruturado e a ordem faz sentido, adicionamos CSS. Antes do CSS Grid Layout, fazer layouts poderia ser muito complicado, especialmente quando a ordem DOM e o projeto do design não correspondiam. As propriedades float e position e mesmo o Flexbox, em algumas situações, não eram flexíveis o suficiente e ficávamos tentados a alterar a ordem do DOM. Graças ao posicionamento explícito previsto nas CSS do Grid Layout e suas áreas, temos toda a flexibilidade que precisamos para posicionar os itens. Isso é ótimo, mas o Grid Layout também introduz uma nova tentação que poderia comprometer a estrutura de nossos documentos.

Digamos que você tenha o seguinte design e use os elementos h2 e ul para esses itens, porque é isso é o que faz mais sentido para você.

HTML

<div class = "wrapper">   
  <h2> Cabeçalho </ h2>   
  <ul>     
    <li> <a href="#"> Elemento 1 </a></li>     
    <li> <a href="#"> Elemento 2 </a></li>     
    <li> <a href="#"> Elemento 3 </a></li>     
    <li> <a href="#"> Elemento 4 </a>< /li>     
    <li> <a href="#"> Elemento 5 </a></li>     
    <li> <a href="#"> Elemento 6 </a></li>   
  </ ul> 
< / div>

Colocar esses elementos em colunas e posicioná-los <h2> é bastante fácil, ou pelo menos parece que é.

CSS

.wrapper {   
  display: grid;   
  grid-template-columns: 120px repeat(2, 1fr);   
  grid-gap: 20px; 
}

h2 {   
  grid-column: 2 / -1; 
}

Somente os elementos-filhos <h2>e <ul> são dispostos como itens no grid. Como proceder caso desejássemos que os elementos <li>s também sejam dispostos como itens do grid. As pior das soluções para isso seria alterar a estrutura de marcação eliminando o elemento <ul>e transformando cada elemento <li> em um <div>s para que eles sejam elementos-filhos do container do grid.

A melhor solução seria definir a propriedade display do elemento <ul>para subgrid, mas infelizmente subgrid não está previsto no Nível 1 da especificação e temos que esperar um pouco mais até que ela seja incorporada á especiifcação.

Você poderia usar display: contents para o elemento <ul>, mas o Firefox é atualmente o único navegador que o suporta. display: contents faz com que os filhos de um elemento apareçam como se fossem filhos diretos do pai do elemento, ignorando o próprio elemento.

Em última análise, você tem que definir outro grid para o elemento <ul>. Isso não é ideal, mas é bem melhor do que alterar a estrutura de marcação e comprometer a semântica. Como esse é um exemplo muito básico e a lista abrange toda a grade, você pode herdar alguns valores do grid pai.

CSS

ul {   
  / * abrangendo toda a grade * /   
    grid-column: 1 / -1;
  
  / * criando outra grade e herdando os valores do grid pai * /   
    display: inherit;   
    grid-template-columns: inherit;   
    grid-gar: inherit;
    
  / * sobrescreve a exibição para navegadores que entendem display: contents * /   
    display: contents; 
}

Você pode ver as duas soluções em ação no CodePen.

Conclusão

Mesmo que este tutorial cubra algumas coisas, não é tudo que você precisa saber sobre CSS e acessibilidade. Por outro lado, também é mais do que apenas um ponto de partida. Ao projetar o DOM com foco na ordem correta, dar a devida importância e tratamento às questões do alto contraste de cores e com acessibilidade em mente, você já estará fazendo um ótimo trabalho. Se você considerar um pouco mais a acessibilidade em cada nova página ou site que estiver criando, estará tornando a Web um lugar melhor.

Projetar com restrições em mente é simplesmente projetar bem.

Aaron Gustafson

Espero que você tenha gostado de ler e aprendido algo novo. Se você tiver dúvidas ou algum tipo de feedback, por favor, deixe um comentário ou contacte-me via twitter.

Obrigado ao meu mentor Aaron Gustafson por me ajudar com este artigo.

Mais dicas de acessibilidade

Este artigo é o terceiro de uma série de quatro. O último está sendo escrito e logo será lançado.

1. Escrevendo HTML com acessibilidade em mente
2. Escrevendo JavaScript com acessibilidade em mente
3. A seguir: Aprenda a projetar e desenvolver com a acessibilidade em mente

Obrigado por ler e por favor não se esqueça de curtir e compartilhar este artigo se você gostou.

Enquanto trabalho no próximo artigo você pode conferir algumas outras coisas que escrevi:

Outras leituras e recursos

Consultar o artigo original

Compartilhe essa matéria com seus amigos