As extensões permitem que os usuários criem a experiência de navegação ideal, adaptada às habilidades e preferências do indivíduo. 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 tenham acesso à extensão.
Todos, e não apenas os usuários com necessidades especiais, podem se beneficiar dos recursos de acessibilidade. Os atalhos do teclado são ideais para usuários com deficiência visual, com baixa destreza e avançados. Legendas e transcrições são essenciais para usuários surdos, mas também ajudam alunos de idiomas.
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 e talvez de um leitor de tela. Embora seja impossível prever quais ferramentas as pessoas usarão 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 IU acessíveis
Se os usuários não puderem acessar os controles da interface do usuário, eles não poderão usar uma extensão. A maneira mais fácil de criar uma IU acessível é usar um controle HTML padrão.
Controles padrão
Sempre que possível, use os controles de interface HTML padrão. Os controles HTML padrão podem ser acessados pelo teclado, escalonados com facilidade 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 IU 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 a WAI-ARIA a controles personalizados, os elementos DOM de uma extensão precisarão ser modificados para incluir os atributos usados pelo Chrome 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 foco quando a
barra de ferramentas recebe foco. O código tabindex="0" especifica que a barra de ferramentas recebe foco na
ordem do documento.
Considere a especificação completa para 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 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 desenvolvimento, é possível que o Google Chrome não gere um evento para cada propriedade WAI-ARIA e os leitores de tela 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 da WWW2010 (em inglês).
Foque nos controles personalizados
O foco do teclado é essencial para usuários que navegam na Web sem um mouse. Confira 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 do 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 definição de tabIndex = -1 remove o elemento da sequência de guias, mas ainda permite que o elemento
receba o foco do teclado de forma programática.
Oferecer suporte ao acesso ao teclado
As extensões precisam ser utilizáveis com apenas um teclado, permitindo que usuários que não podem usar um mouse e usuários avançados que simplesmente não façam isso possam acessá-las.
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 popup é navegável pelo teclado. Use os atalhos de teclado do Chrome para determinar se uma extensão é navegável.
Facilite a visualização de quais partes da interface estão com o foco do teclado. Normalmente, um contorno de foco se move pela interface. No entanto, se o CSS for usado muito, o contorno poderá ser suprimido ou o contraste será reduzido.
Atalhos
Embora a estratégia de navegação pelo teclado mais comum envolva o uso da tecla Tab para girar o foco pela interface de uma extensão, essa nem sempre é a opção mais fácil ou eficiente.
Um gerenciador de teclado JavaScript simples pode ser semelhante ao exemplo a seguir. Observe como a propriedade WAI-ARIA
aria-activedescendant é atualizada em resposta à entrada do usuário para refletir o botão atual da barra de ferramentas
ativa.
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.
Oferecer conteúdo acessível
Oferecer 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 opções de fonte e o tamanho do texto afetam a leitura do conteúdo de uma extensão. Usuários com problemas de visão podem precisar aumentar o tamanho do texto das extensões. Se estiver usando atalhos do 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%, eles ainda poderão ser usados?
Evite transformar texto em imagens. Os usuários não conseguem modificar o tamanho, e os leitores de tela não conseguem interpretar imagens. Em vez disso, opte por uma fonte da Web estilizada, como uma das fontes da API Google Font. As fontes da Web podem ser dimensionadas para diferentes tamanhos e ser acessadas por pessoas que usam leitores de tela.
Cores
Deve 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 primeiro e segundo plano 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 — Simulador de daltonismo podem ser usadas para ver a aparência de uma imagem em várias formas de deficiência de cor.
Ofereça temas de cores diferentes ou permita que o usuário personalize o esquema de cores para criar um contraste melhor.
Áudio
Se uma extensão depende de som ou vídeo para transmitir informações, verifique se as legendas ou transcrições 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 declarar o propósito da imagem, em vez de uma descrição literal do conteúdo
de uma imagem. Imagens espaçadores ou imagens apenas decorativas precisam ter um texto alternativo "" em branco ou 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 WebAIM sobre texto alternativo apropriado (em inglês).
Saiba mais
Saiba mais sobre acessibilidade no Chrome no canal A11ycasts e lendo a Documentação técnica de acessibilidade do Chromium.