Criando um aplicativo acessível

Artigo
08/05/2024

Mais de 20% dos utilizadores da Internet têm necessidade de aplicações Web acessíveis. Como tal, é importante certificar-se de que seu aplicativo foi projetado para que qualquer usuário possa usá-lo facilmente. Em vez de pensar na acessibilidade como um conjunto de tarefas a serem concluídas, pense nela como parte da sua experiência geral do usuário. Quanto mais acessível for a sua aplicação, mais pessoas poderão utilizá-la.

Quando se trata de conteúdo interativo rico, como um mapa, algumas considerações comuns de acessibilidade são:

Suporte o leitor de tela para usuários que têm dificuldade em ver o aplicativo web.
Ter vários métodos para interagir e navegar no aplicativo Web, como mouse, toque e teclado.
Certifique-se de que o contraste de cores é tal que as cores não se misturam e se tornam difíceis de distinguir umas das outras.

O SDK da Web do Azure Maps vem pré-criado com recursos de acessibilidade, como:

Descrições do leitor de tela quando o mapa se move e quando o usuário se concentra em um controle ou pop-up.
Suporte a mouse, toque e teclado.
Suporte de contraste de cor acessível no estilo de mapa de estrada.
Suporte de alto contraste.

Para obter detalhes de conformidade de acessibilidade para todos os produtos Microsoft, consulte Relatórios de conformidade de acessibilidade. Pesquise "Web do Azure Maps" para localizar o documento especificamente para o SDK da Web do Azure Maps.

Navegar no mapa

Existem várias maneiras diferentes pelas quais o mapa pode ser ampliado, deslocado, girado e inclinado. A seguir detalhamos todas as diferentes maneiras de navegar no mapa.

Ampliar o mapa

Usando um mouse, clique duas vezes no mapa para ampliar um nível.
Usando um mouse, role a roda para ampliar o mapa.
Usando uma tela sensível ao toque, toque no mapa com dois dedos e aperte juntos para reduzir ou espalhe os dedos para aumentar o zoom.
Usando uma tela sensível ao toque, toque duas vezes no mapa para ampliar um nível.
Com o mapa focado, use o sinal de adição (+) ou o sinal de igual (=) para ampliar um nível.
Com o mapa focado, use o sinal de subtração, hífen (-) ou sublinhado (_) para reduzir um nível.
Utilizar o controlo de zoom com um rato, toque ou teclado tab/enter teclas.
Pressione e segure o Shift botão e pressione o botão esquerdo do mouse para baixo no mapa e arraste para desenhar uma área para ampliar o mapa.
Usando alguns blocos multitoque, arraste dois dedos para cima para diminuir o zoom ou para baixo para aumentar o zoom.

Mover o mapa

Usando um mouse, pressione para baixo com o botão esquerdo do mouse no mapa e arraste em qualquer direção.
Usando uma tela sensível ao toque, toque no mapa e arraste em qualquer direção.
Com o mapa focado, use as setas do teclado para mover o mapa.

Girar o mapa

Usando um mouse, pressione para baixo com o botão direito do mouse no mapa e arraste para a esquerda ou direita.
Usando uma tela sensível ao toque, toque no mapa com dois dedos e gire.
Com o mapa focado, use a tecla shift e as teclas de seta para a esquerda ou para a direita.
Utilizar o controlo de rotação com um rato, toque ou teclado tab/enter teclas.

Apresentar o mapa

Usando o mouse, pressione para baixo com o botão direito do mouse no mapa e arraste para cima ou para baixo.
Usando uma tela sensível ao toque, toque no mapa com dois dedos e arraste-os para cima ou para baixo juntos.
Com o mapa focado, use a tecla shift mais as teclas de seta para cima ou para baixo.
Utilizar o controlo de passo com um rato, toque ou teclado tab/enter teclas.

Alterar o estilo do mapa

Nem todos os desenvolvedores querem que todos os estilos de mapa possíveis estejam disponíveis em seus aplicativos. Se o desenvolvedor exibir o controle seletor de estilo do mapa, o usuário poderá alterar o estilo do mapa usando o mouse, um toque ou o teclado com a tecla tab ou enter. O desenvolvedor pode especificar quais estilos de mapa deseja disponibilizar no controle do seletor de estilos de mapa. Além disso, o desenvolvedor pode programaticamente definir e alterar o estilo do mapa.

Use alto contraste

Quando o controle de mapa é carregado, ele verifica se o alto contraste está ativado e se o navegador o suporta.
O controle de mapa não monitora o modo de alto contraste do dispositivo. Se o modo do dispositivo mudar, o mapa não mudará. Assim, o usuário precisa recarregar o mapa atualizando a página.
Quando o alto contraste é detetado, o estilo do mapa muda automaticamente para alto contraste e todos os controles internos usam um estilo de alto contraste. Por exemplo, ZoomControl, PitchControl, CompassControl, StyleControl e outros controles internos, usam um estilo de alto contraste.
Existem dois tipos de alto contraste, claro e escuro. Se o tipo de alto contraste puder ser detetado pelos controles de mapa, o comportamento do mapa será ajustado de acordo. Se for leve, o estilo de mapa grayscale_light será carregado. Se o tipo não puder ser detetado ou estiver escuro, o estilo high_contrast_dark será carregado.
Se estiver criando controles personalizados, é útil saber se os controles internos estão usando um estilo de alto contraste. Os desenvolvedores podem adicionar uma classe css no div do contêiner do mapa para verificar. As classes css que seriam adicionadas são high-contrast-dark e high-contrast-light. Para verificar usando JavaScript, use:

map.getMapContainer().classList.contains("high-contrast-dark")

ou, utilizar:

map.getMapContainer().classList.contains("high-contrast-light")

Atalhos de teclado

O mapa tem atalhos de teclado incorporados que facilitam a utilização do mapa. Esses atalhos de teclado funcionam quando o mapa tem foco.

Chave	Ação
`Tab`	Navegue pelos controles e pop-ups no mapa.
`ESC`	Mova o foco de qualquer elemento no mapa para o elemento de mapa de nível superior.
`Ctrl` + `Shift` + `D`	Alterne o nível de detalhes do leitor de tela.
Tecla de seta para a esquerda	Mover o mapa para a esquerda 100 pixels
Tecla de seta para a direita	Mover o mapa para a direita 100 pixels
Tecla de seta para baixo	Mover o mapa para baixo 100 pixels
Tecla de seta para cima	Mover o mapa até 100 pixels
`Shift` + seta para cima	Aumente a inclinação do mapa em 10 graus
`Shift` + seta para baixo	Diminuir o passo do mapa em 10 graus
`Shift` + seta para a direita	Rodar o mapa 15 graus no sentido horário
`Shift` + seta para a esquerda	Rodar o mapa 15 graus no sentido anti-horário
Sinal de adição (`+`) ou ^*Sinal de igual (`=`)	Ampliar
Sinal de subtração, hífen (`-`) ou ^*sublinhado (`_`)	Reduzir
`Shift` + arraste o mouse no mapa para desenhar a área	Ampliar área

^* Esses atalhos de teclas geralmente compartilham a mesma tecla em um teclado. Esses atalhos foram adicionados para melhorar a experiência do usuário. Também não importa se o usuário usa a tecla shift ou não para esses atalhos.

Os usuários podem navegar no mapa usando o teclado. Se um leitor de tela estiver em execução, o mapa notificará o usuário sobre alterações em seu estado. Por exemplo, os usuários são notificados sobre alterações no mapa quando o mapa é deslocado ou ampliado. Por padrão, o mapa fornece descrições simplificadas que excluem o nível de zoom e as coordenadas do centro do mapa. O usuário pode alternar o nível de detalhe dessas descrições usando o atalho Ctrl + + ShiftDde teclado .

Qualquer informação adicional que seja colocada no mapa base deve ter informações textuais correspondentes para usuários de leitores de tela. Certifique-se de adicionar atributos ARIA (Accessible Rich Internet Applications), alt e title quando apropriado.

Tornar o teclado pop-ups acessível

Um marcador ou símbolo é frequentemente usado para representar um local no mapa. Informações adicionais sobre o local normalmente são exibidas em um pop-up quando o usuário interage com o marcador. Na maioria dos aplicativos, os pop-ups aparecem quando um usuário seleciona um marcador. No entanto, clicar e tocar exigem que o usuário use um mouse e uma tela sensível ao toque, respectivamente. Uma boa prática é tornar os pop-ups acessíveis ao usar um teclado. Esta funcionalidade pode ser alcançada criando um pop-up para cada ponto de dados e adicionando-o ao mapa.

O exemplo de pop-ups acessíveis carrega pontos de interesse no mapa usando uma camada de símbolos e adiciona um pop-up ao mapa para cada ponto de interesse. Uma referência a cada pop-up é armazenada nas propriedades de cada ponto de dados. Ele também pode ser recuperado para um marcador, como quando um marcador é selecionado. Quando focado no mapa, pressionar a tecla tab permite que o usuário percorra cada pop-up no mapa. Para obter o código-fonte deste exemplo, consulte Código-fonte de popups acessíveis.

Uma captura de tela mostrando um mapa com pop-ups acessíveis.

Mais dicas de acessibilidade

Aqui estão mais algumas dicas para tornar seu aplicativo de mapeamento da Web mais acessível.

Se exibir muitos dados de pontos interativos no mapa, considere reduzir a desordem e usar clustering.
Verifique se a relação de contraste de cores entre texto/símbolos e cores de plano de fundo é de 4,5:1 ou mais.
Mantenha suas mensagens de leitor de tela (atributos ARIA, alt e title) curtas, descritivas e significativas. Evite jargões e siglas desnecessários.
Tente otimizar as mensagens enviadas para o leitor de tela para fornecer informações curtas e significativas que sejam fáceis de digerir pelo usuário. Por exemplo, se você quiser atualizar o leitor de tela em uma frequência alta, como quando o mapa está em movimento, considere fazer os seguintes pontos:
- Aguarde até que o mapa termine de se mover para atualizar o leitor de tela.
- Acelere as atualizações para uma vez a cada poucos segundos.
- Combine mensagens de forma lógica.
Evite usar a cor como único meio de transmitir informações. Use texto, ícones ou padrões para complementar ou substituir a cor. Algumas considerações:
- Se estiver usando uma camada de bolhas para mostrar o valor relativo entre os pontos de dados, considere dimensionar o raio de cada bolha, colorir a bolha ou ambos.
- Considere o uso de uma camada de símbolos com ícones diferentes para diferentes categorias métricas, como triângulos, estrelas e quadrados. A camada de símbolos também suporta dimensionar o tamanho do ícone. Um rótulo de texto também pode ser exibido.
- Se exibir dados de linha, a largura pode ser usada para representar peso ou tamanho. Um padrão de matriz de traços pode ser usado para representar diferentes categorias de linhas. Uma camada de símbolo pode ser usada em combinação com uma linha para sobrepor ícones ao longo da linha. Usar um ícone de seta é útil para mostrar o fluxo ou a direção da linha.
- Se exibir dados de polígono, um padrão, como listras, pode ser usado como uma alternativa à cor.
Algumas visualizações, como mapas de calor, camadas de mosaico e camadas de imagem, não são acessíveis para usuários com deficiência visual. Algumas considerações:
- Peça ao leitor de tela que descreva o que a camada está exibindo quando adicionada ao mapa. Por exemplo, se uma camada de mosaico de radar meteorológico for exibida, peça ao leitor de tela que diga "Os dados do radar meteorológico estão sobrepostos no mapa".
Limite a quantidade de funcionalidade que requer um mouse pairar. Essas funcionalidades são inacessíveis para usuários que estão usando um teclado ou dispositivo de toque para interagir com seu aplicativo. Observe que ainda é uma boa prática ter um estilo de foco para conteúdo interativo, como ícones clicáveis, links e botões.
Tente navegar no aplicativo usando o teclado. Certifique-se de que a ordenação dos separadores é lógica.
Se estiver criando atalhos de teclado, tente limitá-lo a duas teclas ou menos.