Breve Visão Geral
Este artigo aborda as configurações suportadas para tornar as implementações do WalkMe acessíveis a todos os usuários, bem como ativá-las e usá-las durante a construção.
Para obter informações mais gerais sobre acessibilidade no WalkMe e os padrões que suportamos, leia o seguinte artigo:
Accessibility in WalkMe
Configurações
Para ativar a acessibilidade:
- Ir para a Central do Administrador
- Na página Sistemas, selecione o sistema
- Vá para a guia Acessibilidade
- Ativar a opção Ativar acessibilidade
- Marque a caixa se quiser que a acessibilidade seja ativada automaticamente em todos os sistemas futuros criados nesta conta
Antes de começar a construir
Explore seu próprio site com um leitor de tela preferido, entenda a acessibilidade nativa do site, especialmente a ordem de tabulação dos elementos na página. O WalkMe não corrige problemas de acessibilidade no seu site e depende da estrutura dele.
Navegação geral
- Guia: para percorrer o conteúdo
- Tab + Shift: para voltar
- Enter: para clicar
Conteúdo adaptável
Os elementos do WalkMe têm tags ARIA e marcação HTML semântica para oferecer suporte à tecnologia assistiva na identificação de sua estrutura, funções e funcionalidade.
Keyword acessibilidade
A funcionalidade completa de todos os componentes do WalkMe é acessível por meio de uma interface de teclado.
Por exemplo, use a tecla TAB para navegar pelos elementos clicáveis, como iniciadores, itens de menu e botões, use a tecla Enter para clicar nos botões de ação e use a tecla ESC para fechar caixas de diálogo, como balões, ShoutOuts e o menu WalkMe.
Ordem de foco e foco visível
O WalkMe define uma ordem de foco predefinida para seus vários elementos e exibe uma borda visível em torno dos elementos que recebem foco, tornando a experiência consistente, previsível e lógica.
Disponibilidade do leitor de tela
O WalkMe se concentra nos leitores de tela mais populares do mercado, juntamente com suas combinações comuns de navegadores:
- VoiceOver (Safari)
- JAWS (Edge, Chrome, Firefox)
- NVDA (Edge, Chrome, Firefox)
Texto acessível
Aqui estão algumas dicas para frasear seu conteúdo para torná-lo mais acessível:
- Evite acrônimos e expressões idiomáticas (podem ser confusos quando lidos por um leitor de tela)
- Use voz ativa sempre que possível
- Tente não usar frases incompletas
- Seja consistente
Como usar
Acessibilidade para Smart Walk-Thrus
Ativação
Depois de ativar a acessibilidade, o menu suspenso Acessibilidade será exibido na guia Comportamento da etapa.
Usando os alternadores de foco do balão
Os leitores de tela são capazes de identificar elementos na UI que estão em foco, ou seja, elementos selecionados onde o usuário pode decidir interagir com eles. Por exemplo, um leitor de tela pode identificar que um campo de texto específico está em foco, dando ao usuário a opção de adicionar entrada ou passar para outro elemento. Isso é mostrado visualmente como um contorno pela maioria dos navegadores da web. Para alterar qual elemento está em foco com um leitor de tela, os usuários costumam usar o teclado para navegar pela interface do usuário.
Com base nas melhores práticas de acessibilidade, o WalkMe anuncia e concentra o leitor de tela nos balões quando eles aparecem na tela. O foco do teclado também está bloqueado no balão e no elemento específico selecionado, facilitando a interação do usuário com a orientação na tela. Isso dá ao usuário final uma experiência semelhante ao usuário visual. Se, no entanto, você quiser que o leitor de tela e a navegação do teclado sejam capazes de percorrer todos os elementos e campos interativos e fornecer o contexto completo da interface do usuário, você pode alterar as configurações padrão.
O Balloon Focus permite modificar a forma como os leitores de tela se concentram e navegam pelos elementos da interface do usuário quando os balões do WalkMe aparecem na tela.
- Auto-foco: ao configurar essa opção como DESATIVADO, o comportamento de roubo de foco do balão será cancelado e ele não reterá automaticamente o foco após a aparição (somente quando tabulado).
- Bloqueio de foco: por padrão, o foco do teclado será bloqueado ao redor do balão e seus elementos capturados, e os usuários do teclado não poderão navegar para longe. Configurar essa opção como DESATIVADO desativará esse comportamento para o balão específico e o usuário do teclado poderá navegar pelo restante da página. O bloqueio de foco não significa que o usuário não possa parar um Passo a Passo; essa opção está sempre disponível clicando em ESC.
Observação
- Estes são ativados por padrão para fornecer aos usuários do teclado atualizações em tempo real da aparência dos balões e ajudá-los a permanecer no contexto do Smart Walk-Thru. Desativá-los NÃO é recomendado, a menos que seja especificamente necessário para ajustar o comportamento desejado.
- O Spotlight não é compatível ao usar os toggles de Balloon Focus.
Use o botão Escape para sair de um Smart Walk-Thru ou fechar um balão (se o balão estiver fechado, o foco voltará ao último elemento focado na página).
Usando a configuração ARIA (atualmente apenas aria-label)
As Aria-labels fornecem um texto alternativo que descreve o propósito, a estrutura, a função e a funcionalidade dos elementos da interface do usuário para tecnologias assistivas. Por exemplo, pode haver um "X" que fecha uma janela popup. Esse elemento não tem um rótulo adequado para um leitor de tela, portanto, um aria-label pode ser adicionado no código HTML para que um leitor de tela possa identificá-lo como "fechar".
De acordo com os padrões de acessibilidade da SAP, os elementos WalkMe têm tags ARIA e marcação HTML semântica para oferecer suporte à tecnologia assistiva. No painel de configuração, você pode criar aria-labels personalizados para balões.
- Padrão: o aria-label do balão será definido como o título do balão por padrão. Quando o título não estiver disponível, o aria-label recorrerá ao "Balão de Orientação" ou outro rótulo padrão à sua escolha.
- Personalizado: use essa opção se houver a necessidade de definir um rótulo de aria diferente do padrão. Pode ser necessário se, por exemplo, o título do balão depender de outra representação visual na página para ser entendido, o rótulo pode não ser claro o suficiente para os usuários de leitores de tela.
Suporte multilíngue
Os aria-labels não são representados no painel Multi-language, portanto, os rótulos personalizados serão unificados em todos os idiomas.
Usando a captura acessível
Em alguns casos, os elementos capturados são selecionados por razões estéticas, mas não são necessariamente os elementos com os quais o usuário precisa interagir. Nesses casos, o foco será bloqueado no elemento incorreto. A captura acessível alterará os elementos capturados apenas para navegação pelo teclado, mesmo que visualmente o elemento permaneça no mesmo local.
- Padrão: use o elemento que foi capturado inicialmente pelo construtor Walk-Thru
- Elemento na tela: use essa opção para selecionar novamente elementos usando o modo de captura
- Observação: essa funcionalidade não tem a precisão de elementos e outras opções avançadas presentes em outras partes do sistema.
- jQuery: use essa opção para reselecionar elementos usando jQuery
Alternativas de Imagens e Texto
O WalkMe oferece uma interface de usuário conveniente no Rich Text Editor para adicionar tags "alt" para imagens e tags "title" para vídeos e iFrames:
- Padrão: se algum texto for adicionado, um valor padrão vazio "" será adicionado às tags alt e "sem título" aos títulos, seguindo as práticas recomendadas de acessibilidade
- BBCode: as tags "alt" ou "title" também podem ser adicionadas manualmente como parte do BBcode
Acessibilidade para lançadores
- Descrição: os leitores de tela lerão a descrição do Launcher
- Há uma opção para modificar o texto de um Launcher ao alterar a descrição da imagem.
- Por exemplo, se adicionarmos uma nova imagem em "Minha Galeria", temos a opção de alterar o campo "Texto Alt".
- Isso aparecerá no atributo aria-label
Acessibilidade para SmartTips
- Leitores de tela lerão o tooltip do SmartTip
- Preste atenção à ordem de tabulação, certifique-se de entender como as abas da página são organizadas antes de criar SmartTips
Acessibilidade para ShoutOuts
- O ShoutOut obterá o foco do teclado, independentemente de ter a sobreposição ativada ou desativada
- A navegação por tabulação no ShoutOut percorre elementos focalizáveis
- Crie seu ShoutOut na ordem em que deseja que ele seja tabulado Se você criar 3 botões e reorganizá-los posteriormente, eles manterão a ordem de abas original.
Teste de acessibilidade
Navegações gerais
- Para navegar pelo site e pelos elementos do WalkMe, use a tecla Tab no teclado.
-
Nos itens do menu, navegue usando as setas do teclado, não a Tab
- Para clicar nos elementos do site ou WalkMe, use a tecla Enter no teclado
- Ao navegar pelos elementos, você ouvirá uma voz descrevendo o nome e a finalidade desse elemento.
Testando SmartTips
Navegar pelas SmartTips deve se comportar como se você estivesse passando o mouse sobre elas.
- Passe o mouse sobre o campo SmartTip: você ouvirá uma explicação sobre o campo, seguida do texto da dica.
- Passe o mouse sobre o ícone SmartTip: você ouvirá a palavra "clicável", seguida do texto da dica.
Testando lançadores
- A navegação por tabulação pelos lançadores deve se comportar como se você estivesse passando o mouse sobre eles
- Você ouvirá o texto de chamada à ação do inicializador, seguido do texto da dica de ferramenta do inicializador.
