As extensões permitem que os usuários criem uma experiência de navegação ideal, adaptada às habilidades e preferências de um 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 acessem a extensão.
Todos os usuários, 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. Legendas e transcrições são essenciais para usuários surdos, mas também ajudam os 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 e, possivelmente, 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, dimensionados prontamente 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 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 foco quando
ela 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 podem não reconhecer todos os eventos que estão sendo 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).
Focar em 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 menus, 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();
Definir tabIndex = -1 remove o elemento da sequência de guias, mas ainda permite que ele
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 usam, possam acessá-las.
Navegação
Verifique se um 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.
Certifique-se de que é 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 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 manipulador de teclado JavaScript simples pode se parecer com o seguinte. Observe como a propriedade WAI-ARIA
aria-activedescendant é atualizada em resposta à entrada do usuário para refletir o botão da barra de ferramentas
ativo 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="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 do usuário. 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, já que 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 de uma extensão. Se você 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%, ele ainda poderá ser usado?
Evite colocar 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, use uma fonte da Web estilizada, como uma das fontes da API Google Font. As fontes da Web podem ser dimensionadas para diferentes tamanhos e podem 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 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 — Simulador de daltonismo podem ser usadas para conferir a aparência de uma imagem em várias formas de deficiência de cor.
Ofereça diferentes temas de cores ou ofereça ao usuário a capacidade de personalizar o esquema de cores para criar um contraste melhor.
Áudio
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 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 a finalidade da imagem em vez de uma descrição literal do conteúdo
dela. Imagens espaçadores ou imagens 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 WebAIM sobre texto alternativo apropriado (em inglês).
Saiba mais
Saiba mais sobre acessibilidade no Chrome acessando o canal A11ycasts e lendo a Documentação técnica de acessibilidade do Chromium.