E aí, meus aliados a11y? Os senhores sabiam que o mouse e o teclado lidam com o foco de forma diferente? Bem, é verdade. Ambos lidam com ele de forma diferente e, dependendo do navegador em que o senhor está, isso também importa… e muito, na verdade.
O foco é um elemento crucial para o uso e a experiência do aplicativo com o qual estamos interagindo. Ele também é o indicador visual do elemento de um aplicativo no qual estamos focados. No entanto, há uma ressalva em nossa pseudoclasse de foco, que é o nosso amigo outline.
Antes de começarmos, leia isso várias vezes até que esteja gravado em seu espaço mental.
:focus {
outline: 0;
}
Isso nos leva ao nosso problema.
O problema
Há momentos em que um designer ou diretor de arte pode se aproximar do senhor e dizer que o contorno que aparece ao redor de determinados elementos da página, como links ou botões, não parece… bom. Ele não combina com a nossa marca e, bem, o senhor poderia removê-lo?
E então, sendo um desenvolvedor, o senhor diz: “Claro que posso removê-lo, mas que alternativa o senhor tem para substituir o contorno?” Se eles olharem para o senhor confusos, esse é um ótimo momento para abrir a comunicação sobre a importância do foco e o que vocês podem fazer de forma colaborativa para tornar a experiência acessível.
Redefinir e normalizar
Se o senhor já usou o reset de Eric Meyer, ele remove o contorno do foco, mas diz explicitamente para definir estilos de foco após a redefinição. E quanto ao normalize? Se o senhor percorrer a seção normalize css file e faça uma busca por focus, o senhor não o encontrará. No entanto, o senhor encontrará estilos para :-moz-focusring. Atualmente, :-moz-focusring não existe, portanto, os estilos que estão sendo aplicados usando o prefixo moz podem não funcionar. Se o senhor acessar a página Mozilla Web Docs e procure por :-moz-focusring há um aviso na parte superior que afirma isso.
:focus-ring e :-moz-focusring parecem ser os mesmos, mas nenhum deles é padrão… ainda. :focus-ring está atualmente no Especificação CSS 4 e há um polyfill que é o foco, sem trocadilhos, desta postagem.
Importância do foco
É necessário que haja uma maneira de os usuários acessíveis e não acessíveis poderem ver onde estão durante as interações. Um ótimo exemplo sobre o qual li são as entradas de login e senha. O Focus indica que o usuário está em um campo de senha depois de inserir seu login. Seria péssimo se o usuário começasse a digitar a senha, mas não tivesse nenhuma indicação visual de onde está realmente digitando a senha.
O que é o Focus?
Qualquer interface de usuário operável por teclado tem um modo de operação em que o indicador de foco do teclado fica visível.
– Diretrizes de acessibilidade de conteúdo da Web
De acordo com as Diretrizes de Acessibilidade para Conteúdo da Web 2.0, elas afirmam que qualquer interface de usuário operável por teclado tem um modo de operação em que o indicador de foco do teclado é visível. Dito isso, não se fala em um anel azul, pois isso é oferecido pelo navegador, mas é preciso haver algum tipo de distinção visual.
Navegadores & Foco
Os navegadores lidam com o foco de forma diferente no que diz respeito à apresentação visual, bem como à funcionalidade. Eles também têm um foco diferente do mouse para o teclado. Dei uma palestra ilustrando essas diferenças que o senhor pode encontrar aqui ==> Focando no foco.
O problema continua
Falei brevemente sobre o :focus-ring anteriormente, ele está atualmente em fase de CSS 4 spec, que foi lançada em 18 de maio. Ainda não está em nenhum navegador, mas há um polyfill disponível, um dos quais vou mostrar ao senhor.
Quando o senhor remove o foco padrão atribuindo a ele um valor de zero ou nenhum, ele é removido para todos, tanto para usuários de teclado quanto de mouse. Até mesmo outros que usam algum tipo de tecnologia assistiva, se eu tivesse que apostar nisso.
Alguns usuários de mouse, por outro lado, não gostam de ter um anel de foco em torno de elementos personalizados, como botões personalizados. Esse polyfill remove o anel de foco desses elementos para usuários de mouse, mas o adiciona novamente para usuários de teclado.
A resolução
O polifilme do anel de foco para o resgate! Essencialmente, são apenas essas três linhas de CSS e o uso de um arquivo JS já completo. Muito legal, não é?
:focus:not(.focus-ring) {
outline: none;
}
Abaixo está um trecho do arquivo JS. O que isso significa é que qualquer coisa que seja focalizada, que não tenha um anel de foco, define o contorno como nenhum. Isso atende aos usuários de mouse. Ele define um anel de foco para todas as coisas na lista de permissões no arquivo JS para mouse e teclado, exceto botões. Ele desativa o anel de foco para botões em cliques do mouse, mas ainda permite o anel de foco para usuários de teclado.
O suporte
Atualmente, não há suporte para :focus-ring no momento, mas estou trabalhando para que ele seja implementado em todos os principais navegadores.
Se o senhor também quiser implementá-lo, entre em contato com seus fornecedores de navegadores favoritos e veja o que eles têm a dizer.
Pessoas incríveis!
Um grande agradecimento ao Alice Boxhall, Rob Dodsone todas as pessoas excelentes que têm contribuíram para o polyfill do anel de foco e continuam a torná-lo excelente!
Mais informações!
Se o senhor quiser obter mais informações sobre esse excelente polyfill, consulte o GitHub aqui, anel de focoe o vídeo de Rob Dodson no Ally Casts aqui, onde ele fala sobre isso, Ally Casts.
Sobre Chris DeMars
Chris DeMars é desenvolvedor de interface do usuário para uma empresa de hipotecas no atacado em Michigan. Ele também é instrutor e assistente de professor das equipes de Ann Arbor e Detroit da Girl Develop It. Chris adora criar soluções para aplicativos corporativos, que incluem arquiteturas CSS modulares, desempenho e promoção da acessibilidade na Web.