Otimizações de UX para usuários de tecnologia assistida e somente teclado

(Este é um artigo patrocinado.) Uma das coisas legais sobre acessibilidade é que ela força você a ver e pensar sobre seu aplicativo além da experiência de usuário típica baseada em mouse. Os usuários que navegam apenas por teclado (KO) e/ou tecnologia assistiva (AT) dependem muito não apenas da arquitetura de informações do seu aplicativo, mas também das possibilidades que seu aplicativo oferece para manter a experiência o mais simples possível para todos os tipos de usuários.

Neste artigo, vamos examinar algumas dessas possibilidades que podem melhorar suas experiências de usuário KO/AT sem realmente alterar a experiência de mais ninguém.

Adições ao UX do seu aplicativo

Esses são recursos que você pode adicionar ao seu aplicativo para melhorar o UX para usuários KO/AT.

Pular links

Um link para pular é um recurso de navegação que fica invisível no topo de sites ou aplicativos. Quando está presente, ele é evocado e fica visível na primeira parada de tabulação do seu aplicativo.

Um link para pular permite que o usuário “pule” para várias seções de interesse dentro do aplicativo sem precisar alternar entre tabs até ele. O link para pular pode ter vários links para ele se seu aplicativo tiver várias áreas de interesse e você achar que seus usuários devem ter acesso rápido ao ponto de entrada do seu aplicativo.

Para usuários KO/AT, esta é uma ferramenta útil para permitir que eles percorram rapidamente seu aplicativo e pode ajudar a orientá-los para a arquitetura de informações do seu aplicativo. Para todos os outros usuários, eles provavelmente nunca saberão que esse recurso existe.

Aqui está um exemplo de como lidamos com links de salto. Depois de clicar no link, pressione Tab ⇥ e olhe no canto superior esquerdo. O link para pular tem dois links: Conteúdo principal e Amostras de código . Você pode usar Tab ⇥ para se mover entre eles, pressione Enter para navegar até o link.

Atalhos/Menus de Teclas de Atalho

Esse é um recurso com o qual acho que todos estão familiarizados: atalhos e teclas de atalho. Você provavelmente os usou de vez em quando, eles são muito populares entre os usuários avançados de um aplicativo e vêm em uma variedade de encarnações.

Para usuários KO/AT, atalhos/teclas de atalho são inestimáveis. Eles permitem que eles usem os aplicativos, conforme pretendido, sem precisar direcionar visualmente qualquer coisa ou guiar pelo aplicativo para acessar um elemento ou conteúdo. Embora ações e conteúdo frequentes sejam sempre apreciados quando representados em um menu de atalho/atalho, você também pode considerar algumas ações um pouco menos frequentes que podem estar ocultas em sua interface do usuário (por um bom motivo), mas ainda são algo que um usuário gostaria de poder acessar.

Criar atalhos para essas funções será extremamente útil para usuários de KO/AT. Você pode tornar o comando um pouco mais complexo, como usar (3) pressionamentos de tecla para evocá-lo, para indicar que é uma funcionalidade menos usada. Se você tiver um menu de atalho/atalho, certifique-se de encontrar uma maneira de promovê-lo em seus aplicativos para que seus usuários, especialmente seus usuários KO/AT, possam encontrá-lo e usá-lo de forma eficaz.

Educação do usuário

A educação do usuário refere-se a uma funcionalidade que orienta os usuários sobre o que fazer, para onde ir ou o que esperar. Dicas de ferramentas, apontamentos, bolhas de informações etc. são exemplos de educação do usuário.

Uma coisa que você deve se perguntar ao projetar, colocar e/ou escrever uma cópia para a educação do usuário é:

“Se eu não pudesse ver isso, ainda seria valioso entender ______?”

Muitas vezes, é apenas reorientar a educação do usuário por meio dessa lente que pode levar a uma experiência muito melhor para todos. Por exemplo, em vez de dizer “Próximo, clique no botão abaixo”, você pode escrever “Para começar, clique no botão INICIAR”. O segundo método remove a orientação visual e, em vez disso, concentra-se nas informações comuns que um usuário com visão e KO/AT teria à sua disposição.

Nota : Devo mencionar que é perfeitamente aceitável usar recursos de educação do usuário, como pontos, para apontar visualmente coisas no aplicativo, apenas certifique-se de que o texto complementar permita que seus usuários KO/AT entendam as mesmas coisas que são visualmente referidas.

Aprimoramentos para o UX do seu aplicativo

Existem alterações ou ajustes que você pode fazer em componentes/recursos comuns para melhorar o UX para usuários KO/AT.

Focagem Modal

Agora estamos entrando no âmago da questão. Uma das grandes vantagens da acessibilidade é como ela abre a porta para novas maneiras de resolver problemas que você pode não ter considerado antes. Você pode tornar algo totalmente acessível ao WCAG 2.0 AA e resolver o problema com abordagens muito diferentes. Para os modais, nós da Deque criamos uma abordagem interessante que seria totalmente invisível para a maioria dos usuários com visão, mas seria notada pelos usuários de KO/AT quase imediatamente.

Para que um modal seja acessível, ele precisa se anunciar quando evocado. Duas maneiras comuns de fazer isso são: focar o corpo do modal após o modal ser aberto ou focar o cabeçalho do modal (se houver) após o modal ser aberto. Você faz isso para que o AT do usuário possa ler a intenção do modal como “Editar perfil” ou “Criar nova assinatura”.

Depois de focar o corpo ou cabeçalho, pressionar Tab ⇥ enviará o foco para o próximo elemento focalizável no modal — geralmente um campo ou, se estiver no cabeçalho, às vezes é o botão Fechar (X). Continuar na guia o moverá por todos os elementos focáveis ​​no modal, normalmente terminando com botões de terminal como SALVAR e/ou CANCELAR.

Agora chegamos à parte interessante. Depois de focar o elemento final no modal, pressionar Tab ⇥ novamente o “ciclo” de volta para a primeira parada de tabulação, que no caso do modal será o corpo ou o cabeçalho porque é onde começamos. No entanto, em nossos modais nós “pulamos” aquela tabulação inicial e levamos você para a segunda parada (que em nossos modais é o fechamento (X) no canto superior. Fazemos isso porque o modal não precisa ficar se anunciando uma e outra vez em cada ciclo, basta fazê-lo na evocação inicial e não em qualquer passagem subsequente, por isso temos uma parada programática especial que pula após a primeira vez.

Esta é uma pequena (mas apreciada) melhoria de usabilidade que criamos exclusivamente para usuários KO/AT, que seria completamente desconhecida para todos os outros.

Menus de Navegação Travessia e Foco/Gerenciamento Selecionado

Os menus de navegação são complicados. Eles podem ser estruturados de várias maneiras, em camadas, aninhados e possuem inúmeros mecanismos de evocação, divulgação e travessia. Isso torna importante considerar como eles interagem e são representados para usuários KO/AT durante a fase de projeto. Bons menus devem ser “entrados” e “saídos”, o que significa que você entra em um menu para usá-lo e sai dele para sair (se você não usá-lo).

Essa ideia é melhor ilustrada com um exemplo literal, então vamos dar uma olhada em nossa navegação vertical de 2 camadas do Cauldron.

1. Acesse https://pattern-library.dequelabs.com/;
2. Pressione Tab ⇥ três vezes. A primeira parada de tabulação é o link de pular (que vimos anteriormente), a segunda é o logotipo que funciona como link “voltar para casa” e a terceira aba entra no menu;
3. Agora que você está no menu, use as teclas de seta ( → e ↓ ) para mover e abrir seções do menu;
4. Pressionar Tab ⇥ em qualquer ponto fará com que você saia do menu e o envie para o conteúdo da página.

Os menus de navegação também podem funcionar em conjunto com alguns dos tópicos anteriores, como menus de atalho/teclas de atalho para tornar o uso do menu ainda mais eficiente.

Retenção de foco lógico (IE excluindo linha, retornando para uma página)

A retenção do foco é muito importante. A maioria das pessoas está familiarizada, pelo menos em conceito, com elementos de foco em sua ordem lógica pretendida na página; no entanto, pode ficar obscuro quando um elemento ou conteúdo muda/aparece/desaparece.

• Para onde vai o foco quando o campo em que você está é excluído?
• E quando você é enviado para outra guia onde o aplicativo tem um novo contexto?
• E depois que um modal é fechado devido a uma ação terminal como SAVE?

Para um usuário com visão, existem pistas visuais que podem informá-lo sobre o que aconteceu.

Aqui está um exemplo: Você tem um modal Edit Recipe que permite ao usuário adicionar e remover quaisquer ingredientes. Há um campo de ingrediente com um botão “Adicionar outro ingrediente” abaixo dele. (Sim, tem o estilo de um link, mas isso é assunto para outro dia.) Seu foco está no botão. Você clica no botão e um novo campo aparece entre o botão e o primeiro campo. Para onde deve ir o foco? Provavelmente, seu usuário adicionou outro ingrediente para se envolver com ele, para que o foco mude do botão para o campo recém-adicionado.

A grande vantagem de tudo isso não são tanto os exemplos específicos, mas a mentalidade que os suporta - considere o UX para seu aplicativo através das lentes do usuário KO/AT, bem como do usuário com apenas mouse. Algumas das melhores e mais inteligentes ideias vêm dos desafios mais interessantes e importantes.

Se você precisar de ajuda para garantir que seus recursos sejam acessíveis, todos os exemplos acima e muitos outros podem ser testados usando o aplicativo gratuito de teste de acessibilidade na web da Deque: axe pro. É gratuito e você pode se inscrever aqui.