As extensões permitem que os usuários criem a experiência de navegação ideal, adaptada às habilidades e preferências de cada pessoa. As extensões precisam incluir componentes de acessibilidade que incentivem uma base de usuários inclusiva, permitindo que pessoas com deficiência visual, perda auditiva, destreza limitada e outras deficiências acessem a extensão.
Todos, não apenas usuários com necessidades especiais, podem se beneficiar dos recursos de acessibilidade. Usuários com deficiência visual, baixa destreza e avançados se beneficiam dos atalhos de teclado. As legendas e 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 dependem de uma lupa de tela e, possivelmente, de um leitor de tela. Embora seja impossível prever quais ferramentas as pessoas vão usar para acessar uma extensão, há 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, não será possível 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 por teclado, escalonam facilmente e geralmente são compreendidos por leitores de tela.
WAI-ARIA em controles personalizados
A Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) é uma especificação para tornar os controles de interface acessíveis aos 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 ao 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 do DOM especificados pelo WAI-ARIA são classificados em funções, estados e propriedades.
<div role="toolbar">
A propriedade aria-activedescendant especifica qual filho de uma barra de ferramentas recebe o foco quando a
barra de ferramentas recebe o foco. O código tabindex="0" especifica que a barra de ferramentas recebe o foco na ordem do documento.
Considere 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 as funções, os estados e as propriedades do WAI-ARIA são adicionados ao DOM de um controle, o Google Chrome gera os eventos adequados para o leitor de tela. Como o suporte ao WAI-ARIA ainda está em desenvolvimento, o Google Chrome talvez não gere um evento para cada propriedade do WAI-ARIA, e os leitores de tela talvez não reconheçam todos os eventos gerados.
Para um tutorial rápido sobre como adicionar controles WAI-ARIA a controles personalizados, consulte a apresentação de Dave Raggett na 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 listagem 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 tabulação padrão, permitindo que eles recebam o foco do teclado.
element.tabIndex = 0
element.focus();
A definição de tabIndex = -1 remove o elemento da sequência de tabulação, mas ainda permite que ele
receba o foco do teclado de forma programática.
Compatibilidade com acesso por teclado
As extensões precisam ser utilizáveis apenas com um teclado, permitindo que usuários que não podem usar um mouse e usuários avançados que simplesmente não querem usar um mouse acessem as extensões.
Navegação
Verifique se um usuário consegue navegar entre diferentes partes de uma extensão sem usar o mouse. Verifique se o uso de um pop-up pode ser feito com o teclado. Use os atalhos de teclado do Chrome para determinar se uma extensão é navegável.
Verifique se é fácil ver quais partes da interface têm foco do teclado. Normalmente, um contorno de foco se move pela interface. No entanto, se o CSS for usado em excesso, o contorno poderá ser suprimido ou o contraste reduzido.
Atalhos
Embora a estratégia de navegação pelo teclado mais comum envolva o uso da tecla Tab para alternar o foco na interface de uma extensão, nem sempre essa é a opção mais fácil ou eficiente.
Um manipulador de teclado JavaScript simples pode ter esta aparência. Observe como a propriedade WAI-ARIA
aria-activedescendant é atualizada em resposta à entrada do usuário para refletir o botão
ativo atual da barra de ferramentas.
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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</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 os usuários sobre os atalhos disponíveis na página de opções.
Fornecer conteúdo acessível
É importante oferecer conteúdo acessível a todos os usuários. Muitas das diretrizes a seguir podem parecer familiares, já que refletem boas práticas para todo o conteúdo da Web.
Texto
As opções de fonte e o tamanho do texto afetam a legibilidade do conteúdo de uma extensão. Usuários com problemas de visão podem precisar aumentar o tamanho do texto de uma extensão. Se você estiver usando atalhos de teclado, verifique se eles não interferem nos atalhos de zoom integrados ao Chrome.
Como um indicador da flexibilidade da interface de uma extensão, aplique o teste de 200%. Se o tamanho do texto ou o zoom da página for aumentado em 200%, ainda será possível usar?
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, escolha uma fonte da Web estilizada, como uma das fontes encontradas na API Google Fonts. As fontes da Web podem ser dimensionadas para tamanhos diferentes e acessadas por pessoas que usam leitores de tela.
Cores
É necessário 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 plano oferecem um contraste adequado.
Ao avaliar o contraste, verifique se todas as partes da extensão que dependem de gráficos para transmitir informações estão claramente visíveis. Para imagens específicas, ferramentas como o Simulador de daltonismo Coblis (link em inglês) podem ser usadas para ver como uma imagem aparece em várias formas de deficiência de cor.
Considere oferecer diferentes temas de cores ou permitir que o usuário personalize o esquema de cores para criar um contraste melhor.
Som
Se uma extensão depender de som ou vídeo para transmitir informações, verifique se há legendas ou uma transcrição disponível. Consulte as diretrizes do programa de mídia descrita e legendada para mais informações sobre legendas.
Imagens
Forneça texto alternativo informativo para as imagens.
<img src="img.jpg" alt="The logo for the extension">
Use o texto alternativo para declarar o objetivo da imagem em vez de uma descrição literal do conteúdo. As imagens de espaçamento ou puramente decorativas precisam ter um texto alternativo "" em branco ou ser removidas
do HTML e colocadas no CSS.
Se a extensão precisar usar texto em uma imagem, inclua o texto da imagem no texto alternativo. Um bom recurso para consultar é o artigo da WebAIM sobre texto alternativo adequado.
Saiba mais
Saiba mais sobre acessibilidade no Chrome no canal A11ycasts e lendo a documentação técnica de acessibilidade do Chromium.