As extensões permitem que os usuários criem a experiência de navegação ideal, personalizada de acordo com as habilidades e preferências de cada um. As extensões precisam incluir componentes de acessibilidade que incentivem uma base de usuários inclusiva, permitindo que pessoas com deficiência visual, auditiva, motora e outras deficiências acessem a extensão.
Todos, não apenas usuários com necessidades especiais, podem se beneficiar dos recursos de acessibilidade. Todos os usuários com deficiência visual, baixa destreza e avançados se beneficiam dos atalhos do teclado. As legendas e as transcrições são essenciais para usuários surdos, mas também ajudam quem está aprendendo um idioma.
As pessoas podem interagir com uma extensão de várias maneiras. Alguns usuários têm um monitor, teclado e mouse padrão, ou podem depender de uma lupa e, possivelmente, um leitor de tela. Embora seja impossível prever quais ferramentas as pessoas usarão para acessar uma extensão, existem etapas que qualquer desenvolvedor pode seguir para tornar uma extensão o mais acessível possível.
Integrar controles de interface acessíveis
Se os usuários não puderem acessar os controles da interface, eles não poderão usar uma extensão. A maneira mais fácil de criar uma interface acessível é usar um controle HTML padrão.
Controles padrão
Sempre que possível, use controles de interface HTML padrão. Os controles HTML padrão são acessíveis pelo teclado, são dimensionados com facilidade e geralmente são entendidos pelos leitores de tela.
WAI-ARIA em controles personalizados
A Iniciativa para Acessibilidade da Web - Aplicativos Ricos Acessíveis de Internet (WAI-ARIA) é uma especificação para tornar os controles da interface acessíveis para leitores de tela usando um conjunto padrão de atributos DOM. Esses atributos fornecem informações ao leitor de tela sobre a função e o estado atual dos controles em uma página da Web.
Para adicionar suporte a WAI-ARIA a controles personalizados, os elementos DOM de uma extensão precisam ser modificados para incluir atributos que o Chrome usa para gerar eventos durante a interação do usuário. Os leitores de tela respondem a esses eventos e descrevem a função do controle. Os atributos DOM especificados por WAI-ARIA são classificados em papéis, estados e propriedades.
<div role="toolbar">
A propriedade aria-activedescendant especifica qual filho de uma barra de ferramentas recebe o foco quando a
barra recebe o foco. O código tabindex="0" especifica que a barra de ferramentas recebe o foco na
ordem do documento.
Confira a especificação completa de uma barra de ferramentas de exemplo abaixo:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Depois que os papéis, estados e propriedades do WAI-ARIA são adicionados ao DOM de um controle, o Google Chrome gera os eventos apropriados para o leitor de tela. Como o suporte a WAI-ARIA ainda está em andamento, o Google Chrome pode não gerar um evento para cada propriedade WAI-ARIA, e os leitores de tela podem não reconhecer todos os eventos gerados.
Para conferir um tutorial rápido sobre como adicionar controles WAI-ARIA a controles personalizados, consulte a apresentação de Dave Raggett no WWW2010.
Foco em controles personalizados
O foco do teclado é essencial para usuários que navegam na Web sem um mouse. Verifique se os controles de operação e navegação, como botões, caixas de lista e barras de menu, podem receber o foco do teclado.
Por padrão, os únicos elementos no DOM HTML que podem receber o foco do teclado são âncoras, botões
e controles de formulário. No entanto, definir o atributo HTML tabIndex como 0 coloca os elementos DOM na
sequência de guias padrão, permitindo que eles recebam o foco do teclado.
element.tabIndex = 0
element.focus();
A configuração tabIndex = -1 remove o elemento da sequência de guias, mas ainda permite que ele
receba o foco do teclado de forma programática.
Suporte ao acesso ao teclado
As extensões precisam ser usadas com apenas um teclado, permitindo que usuários que não podem usar um mouse e usuários avançados que simplesmente não usam um mouse acessem as extensões.
Navegação
Verifique se o usuário pode navegar entre diferentes partes de uma extensão sem usar o mouse. Verifique se o uso de um pop-up é navegável pelo teclado. Use os atalhos de teclado do Chrome para determinar se uma extensão é navegável.
É importante que seja fácil ver quais partes da interface têm o foco do teclado. Normalmente, um contorno de foco se move pela interface. No entanto, se o CSS for usado excessivamente, o contorno poderá ser suprimido ou o contraste, reduzido.
Atalhos
Embora a estratégia de navegação pelo teclado mais comum envolva usar a tecla Tab para alternar o foco na interface de uma extensão, ela nem sempre é a opção mais fácil ou eficiente.
Um gerenciador de teclado JavaScript simples pode ter a seguinte aparência. Observe como a propriedade WAI-ARIA
aria-activedescendant é atualizada em resposta à entrada do usuário para refletir o botão da barra de ferramentas
atual.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
As extensões podem criar atalhos de teclado explícitos para elementos importantes da interface. Para implementar esses atalhos, conecte listeners de eventos de teclado aos controles. Informe aos usuários os atalhos disponíveis na página de opções.
Oferecer conteúdo acessível
Fornecer conteúdo acessível é importante para todos os usuários. Muitas das diretrizes a seguir podem parecer familiares, porque refletem as práticas recomendadas para todo o conteúdo da Web.
Texto
As escolhas de fonte e o tamanho do texto afetam a legibilidade do conteúdo de uma extensão. Os usuários com problemas de visão podem precisar aumentar o tamanho do texto das extensões. Se você estiver usando atalhos de teclado, verifique se eles não interferem nos atalhos de zoom integrados ao Chrome.
Como um indicador de flexibilidade da interface de uma extensão, aplique o teste de 200%. Se o tamanho do texto ou o zoom da página aumentar em 200%, ainda será utilizável?
Evite incorporar texto em imagens. Os usuários não podem modificar o tamanho, e os leitores de tela não conseguem interpretar imagens. Em vez disso, use uma fonte da Web estilizada, como uma das encontradas na API Google Fonts. As fontes da Web podem ser dimensionadas para tamanhos diferentes e podem ser acessadas por pessoas que usam leitores de tela.
Cores
Deve haver contraste suficiente entre a cor de fundo e a cor do texto em uma extensão. Use uma ferramenta de verificação de contraste para testar se as cores de primeiro e segundo planos oferecem um contraste adequado.
Ao avaliar o contraste, verifique se cada parte da extensão que depende de gráficos para transmitir informações está claramente visível. Para imagens específicas, ferramentas como o Coblis—Color Blindness Simulator podem ser usadas para conferir como uma imagem fica em várias formas de deficiência de cor.
Considere oferecer diferentes temas de cores ou dar ao usuário a capacidade de personalizar o esquema de cores para criar um melhor contraste.
Som
Se uma extensão depender de som ou vídeo para transmitir informações, verifique se as legendas ou uma transcrição estão disponíveis. Consulte as diretrizes do programa de mídia com descrição e legenda para mais informações sobre legendas.
Imagens
Inclua um texto alternativo informativo para as imagens.
<img src="img.jpg" alt="The logo for the extension">
Use o texto alternativo para declarar o propósito da imagem em vez de uma descrição literal do conteúdo
dela. As imagens espaçadoras ou puramente decorativas precisam ter um texto alternativo "" em branco ou ser removidas
completamente do HTML e colocadas no CSS.
Se a extensão precisar usar texto em uma imagem, inclua esse texto no texto alternativo. Um bom recurso para consultar é o artigo do WebAIM sobre texto alternativo adequado.
Saiba mais
Para saber mais sobre acessibilidade no Chrome, confira o canal A11ycasts e leia a Documentação técnica de acessibilidade do Chromium.