Entenda a navegação acessível

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Listar estratégias para fornecer aos usuários informações de navegação e ação.
• Explicar a importância de gerenciar o foco no desenvolvimento de aplicativos da web.

Introdução

Os usuários devem sempre saber onde estão em um aplicativo e quais ações podem adotar a seguir. Forneça aos usuários informações de navegação e ação ao:

• Utilizar elementos de navegação consistentes.
• Aplicar aninhamento e ordem adequados.
• Rotular as regiões de referência.
• Utilizar uma ordem lógica das guias que corresponda à ordem de leitura (nos idiomas da esquerda para a direita, da esquerda para a direita, de cima para baixo; nos idiomas da direita para a esquerda, da direita para a esquerda).
• Usar indicadores de foco visíveis para todos os itens interativos.

Alterações de contexto

Quando se trata de alterações de contexto, considere as seguintes regras gerais:

1. Os usuários devem esperar uma alteração no contexto, seja porque solicitaram ou, de outra forma, lhes foi explicado que uma alteração estava chegando.
2. Depois que a mudança acontece, os usuários devem saber onde estão em uma página.

Considere o botão Mostrar mais na imagem de uma navegação de relatórios e pastas abaixo. 

Depois que um usuário clica em Mostrar mais, há algumas opções para alertá-lo sobre o novo conteúdo que foi introduzido.

1. Você pode focar no primeiro item do novo conteúdo. Essa é a melhor opção? Possivelmente, mas o botão exibe “Mostrar mais” e não “Direcionar para mais”.
2. Você pode usar uma região aria-live para anunciar aos leitores de tela que mais itens de navegação foram adicionados à página.
3. É possível alterar o texto do botão para que exiba “Mostrar menos”. Essa é a melhor opção porque o sucesso do usuário está implícito no novo texto do botão: “Posso mostrar menos, porque agora está aparecendo mais.”

A pergunta para um usuário de leitor de tela agora é: “Onde está o ‘mais’ que foi introduzido?” Ao posicionar o novo conteúdo à frente do usuário, encontrar a resposta para essa pergunta é simples.

Em alguns casos de uso, é adequado mover o foco de um usuário ou usar uma região aria-live. Saber qual técnica usar em determinada situação se resume a entender as expectativas do usuário. 

Por exemplo, imagine um botão Editar que inicia um modal. 

Depois de iniciado, o botão Editar será obscurecido pelo modal, portanto, não faz sentido manter o foco no botão. Neste caso, movemos o foco para o próprio modal. Como regra geral, você nunca deve mover o foco de um usuário a menos que o usuário tenha tomado medidas explicitamente. Nesse caso, depois que o usuário clica em Editar, o foco deve se mover naturalmente para o contexto de edição.

Também é importante mover o foco logicamente quando o usuário executa uma ação em determinado item e esse item desaparece. Continuando com este exemplo, para onde o foco do usuário deve ser direcionado quando o modal é fechado? O foco precisa ser direcionado para algum item, e não apenas para a parte superior da página. Uma opção lógica, neste caso, é retornar ao botão Editar que inicializou o modal. 

Encontre mais informações sobre mudanças de contexto, incluindo regiões aria-live, na seção Recursos abaixo.

Gerenciamento de foco

O gerenciamento de foco correto é um dos principais fatores de desenvolvimento de aplicativos da web acessíveis. Em geral, os usuários podem mover o foco por uma página ao pressionar Tab para avançar e descer a página, e Shift+Tab para mover para trás e subir a página. Isso se aplica a elementos HTML que recebem o foco nativamente, como âncoras, botões e controles de formulário.

Componentes complexos, como grades interativas, menus, ComboBoxes e conjuntos de guias são navegados com as teclas de seta. A programação dessas interações avançadas é parte da promessa feita aos usuários quando você usa atributos de função ARIA.

Vamos falar sobre como gerenciar o foco quando o contexto de um usuário é alterado. O que deve acontecer com o foco de um usuário quando: 

• Navegar para uma nova página?
• Abrir ou fechar um diálogo modal?
• Excluir um registro?
• Realizar uma operação de arrastar e soltar?

As respostas a essas perguntas e muito mais estão nas Diretrizes globais de focodo SLDS. 

Além dessas diretrizes, considere o seguinte:

1. Usuários com algumas deficiências, incluindo usuários cegos, normalmente navegam para frente e para baixo na página quando interagem com um aplicativo. Se seu design introduz novo conteúdo na página, certifique-se de que o novo conteúdo seja adicionado à frente do item que ativou a alteração. Por exemplo, quando o usuário clica em um botão que introduz um formulário embutido na página, o formulário deve estar após o botão na ordem DOM. Os usuários esperam encontrar o formulário à medida que avançam para baixo na página, não para trás.
2. Não roube o foco na inicialização do componente, a menos que seja parte da especificação do componente. Uma caixa de diálogo modal, por exemplo, deve roubar o foco quando inicializado.
3. Não crie uma armadilha de foco. Permita que os usuários saiam de seus componentes. A menos que, novamente, isso seja parte do comportamento esperado do componente, como com um modal.
4. Lidar com o carregamento infinito com cuidado. Não force os usuários que usam apenas o teclado a carregar e navegar por um feed, lista ou tabela inteira para acessar o conteúdo do outro lado. Por exemplo, todos os nossos feeds do Chatter possuem o link “Ignorar este feed” no início do feed.

A seguir, veremos como escrever componentes acessíveis. 

Recursos

Ajuda do Salesforce: Diretrizes globais de foco do Lightning Design System

Técnicas W3C para WCAG 2.0: ARIA19: Como usar role=alert ou regiões ARIA Live para identificar erros