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, e não apenas usuários com necessidades especiais, podem se beneficiar dos recursos de acessibilidade. Usuários com deficiência visual, baixa destreza e usuários avançados se beneficiam dos atalhos de teclado. As legendas e transcrições são essenciais para usuários surdos, mas também ajudam estudantes de idiomas.
As pessoas podem interagir com uma extensão de várias maneiras. Alguns usuários têm um monitor padrão, teclado e mouse ou podem depender 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, 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 facilmente dimensionados 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 por meio de 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 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 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 apropriados para o leitor de tela. Como o suporte do WAI-ARIA ainda está em andamento, o Google Chrome pode não gerar um evento para cada propriedade do WAI-ARIA, e os leitores de tela podem não reconhecer 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 da 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 menus, 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();
Definir tabIndex = -1 remove o elemento da sequência de guias, mas ainda permite que ele receba o foco do teclado de maneira programática.
Suporte ao acesso pelo 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 o mouse acessem as extensões.
Navegação
Verifique se um usuário pode navegar entre diferentes partes de uma extensão sem usar o mouse. Verifique se qualquer uso de um pop-up é navegável pelo 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 o 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 é a opção mais fácil ou eficiente.
Um gerenciador de teclado JavaScript simples pode ser semelhante ao seguinte. Observe como a propriedade aria-activedescendant do WAI-ARIA é atualizada em resposta à entrada do usuário para refletir o botão da barra de ferramentas ativa 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 da extensão. 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
Fornecer conteúdo acessível é importante para 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 de 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%, ele 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 podem interpretar imagens. Em vez disso, opte por uma fonte da Web estilizada, como uma das fontes encontradas na API Google Fonts. As fontes da Web podem ser dimensionadas para diferentes tamanhos e podem ser acessadas por pessoas que usam leitores de tela.
Cores
É necessário haver contraste suficiente entre a cor do plano 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 plano de fundo e de primeiro plano fornecem 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 Coblis—Color Blindness Simulator (link em inglês) podem ser usadas para ver a aparência de uma imagem em várias formas de deficiência de cor.
Considere oferecer temas de cores diferentes ou dar ao usuário a capacidade de personalizar o esquema de cores para criar um contraste melhor.
Som
Se uma extensão depende 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 descrita e legendada para mais informações sobre legendas.
Imagens
Forneça texto alternativo informativo para imagens.
<img src="img.jpg" alt="The logo for the extension">
Use o texto alternativo para indicar a finalidade da imagem, em vez de uma descrição literal do conteúdo de uma imagem. As imagens de espaçador 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 do WebAIM sobre texto alternativo adequado.
Saiba mais
Saiba mais sobre acessibilidade no Chrome acessando o canal A11ycasts (link em inglês) e lendo a documentação técnica de acessibilidade do Chromium (link em inglês).