Implementar lupas de tela

  • 10 minutos

Se você considerou o suporte ao leitor de tela ao criar seu produto digital, grande parte do trabalho para dar suporte a lupas de tela já está concluída. As lupas de tela também dependem da mesma API de Acessibilidade para interagir com aplicativos, o que significa que aplicativos e aplicativos Web podem aproveitar os recursos de acessibilidade implementados.

Captura de tela de uma visualização de uma árvore DOM ilustrando como um aplicativo se comunica com o navegador, o sistema operacional e as tecnologias adaptativas, como leitores de tela e lupas por meio da API de Acessibilidade.

Suporte ao Redimensionamento

Definir foco no elemento e fornecer limites de elemento

Verifique se o foco está definido no elemento correto para ajudar os usuários a navegar na interface sem problemas, especialmente para aqueles que usam tecnologias adaptativas, como leitores de tela ou lupas de tela. "Focus" refere-se ao elemento ativo na tela com o qual um usuário pode interagir e deve ser claramente definido para que os usuários possam identificar facilmente onde estão no aplicativo ou na página da Web. Os aplicativos cliente precisam determinar o saldo e incluí-lo na árvore de acessibilidade. O equilíbrio nesse contexto refere-se a como os elementos são organizados ou realçados para garantir uma navegação suave, garantindo que os usuários possam interagir com o conteúdo de forma eficaz. Essas informações são adicionadas à árvore de acessibilidade. Em aplicativos Web, o navegador calcula e gerencia automaticamente o foco e o equilíbrio de elementos, usando a árvore de acessibilidade para ajudar os leitores de tela e as lupas a acompanhar as interações do usuário. Os desenvolvedores devem garantir que a árvore de acessibilidade seja criada corretamente e que o foco seja gerenciado corretamente para uma experiência ideal do usuário em diferentes dispositivos e tamanhos de tela.

Implementar padrão de texto

Para melhorar a acessibilidade para usuários que dependem de lupas de tela, é crucial implementar corretamente o recurso de padrão de texto. Esse recurso permite que as lupas de tela acompanhem e leiam com precisão o texto selecionado dentro do aplicativo. Ao integrar o indicador de cursor de texto com a mesma API de acessibilidade utilizada pelos leitores de tela, você cria uma experiência tranquila para os usuários que exigem ampliação de texto e comentários falados. Ao integrar o padrão de texto, é importante especificar os limites adequados para todos os intervalos de texto. Cada parte do texto deve definir claramente os pontos de início e de término, permitindo que a lupa da tela identifique com precisão qual texto está realçado ou lido. Essa clareza é crucial para melhorar a navegação dentro do texto e facilitar as interações do usuário, como selecionar, copiar ou mover o texto. Além disso, é importante fornecer informações detalhadas sobre os atributos do texto, como seu estilo, tamanho e formatação, para que os usuários possam receber comentários auditivos sobre o texto com o qual estão interagindo. Essas informações os ajudam a entender o contexto e navegar pelo conteúdo sem confusão.

Dimensionamento de DPI

O DPI (pontos por polegada) mede o número de pontos ou pixels que podem caber em uma única polegada de uma exibição. Uma DPI mais alta indica maiores detalhes e imagens mais nítidas. O dimensionamento de DPI ajusta o tamanho dos elementos da interface do usuário com base nas configurações de DPI do display, que é especialmente importante para telas de alta DPI encontradas em smartphones modernos, tablets e monitores de alta resolução. As modificações de dimensionamento de DPI normalmente são integradas a estratégias de design responsivo. Quando os usuários ampliam ou modificam suas configurações de exibição, o dimensionamento de DPI garante que todos os elementos da interface do usuário, como texto, botões e imagens, sejam redimensionado corretamente. Essa funcionalidade ajuda a impedir a rolagem horizontal e mantém um layout fluido à medida que o conteúdo se adapta a diferentes tamanhos e resoluções de tela. Ao implementar o dimensionamento de DPI, é essencial considerar plataformas como a UWP (Plataforma Universal do Windows) e os aplicativos Do Office Win32.

Dimensionamento de texto

Para dar suporte ao dimensionamento de texto em aplicativos Web, é importante escolher cuidadosamente suas unidades CSS, pois algumas unidades serão dimensionadas enquanto outras não. O tamanho da fonte padrão é definido como 16 pixels e o fator de escala de texto é aplicado a esse tamanho base. Unidades relativas como em, ex, ch ou porcentagens são baseadas no tamanho da fonte do elemento pai, portanto, elas serão dimensionadas adequadamente. Isso significa que todos os elementos filho que usam essas unidades também serão redimensionáveis. Por outro lado, as unidades absolutas ou aquelas relativas ao visor não serão dimensionadas, o que significa que os elementos filho que usam essas unidades permanecerão inalterados, mesmo que os usem, ex, ch ou percentuais. No entanto, os elementos filho que usam rem serão dimensionados corretamente porque rem é baseado no tamanho da fonte do elemento raiz em vez do elemento pai. Para objetos e contêineres que devem ser dimensionados com o tamanho da fonte, é melhor usar rem, em, ex ou ch para sua largura e altura. Larguras e alturas baseadas em porcentagem são relativas às dimensões do elemento pai, portanto, elas só serão dimensionadas se as dimensões do elemento pai forem alteradas.

Recurso

Suporte ao refluxo

Para projetar vários tamanhos de tela e proporções de proporções, trabalhe em estreita colaboração com seus designers e gerentes de produto. Use técnicas de design da Web responsivas para facilitar o fluxo de conteúdo entre dispositivos. Por exemplo, um site responsivo pode fazer a transição de um layout de quatro colunas em uma área de trabalho para três colunas em um tablet menor. No entanto, muitos sites modernos ainda mantêm versões separadas para smartphones. Para garantir o suporte total para o reflow, o site primário deve ser capaz de se adaptar a tamanhos de visor tão pequenos quanto os dos smartphones. Os aplicativos móveis às vezes executam o mesmo código em tablets e smartphones. Portanto, esses aplicativos também devem se ajustar a visores maiores quando abertos em um tablet.

Para fazer seus aplicativos Web refluxarem, use os recursos avançados de layout do mecanismo de apresentação. Use propriedades declarativas sempre que possível e escreva código para personalizar o comportamento somente quando necessário. Além disso, siga as práticas recomendadas para implementar conteúdo em foco ou foco, garantindo que ele seja dispensável, focalizável e persistente.

Para aplicativos Web, verifique se a página é renderizada na escala correta inicialmente adicionando <meta name="viewport" content="width=device-width, initial-scale=1"> à cabeça. A documentação de refluxo do WCAG não define a largura do visor, fazendo com que ele seja renderizado em pequena escala por padrão em um iPhone.

<meta name="viewport" 
      content="width=device-width, initial-scale=1">

Se seu aplicativo Web tiver sua própria funcionalidade de zoom de pinçagem, especifique user-scalable=no para desabilitar o zoom de pinçagem do navegador. Caso contrário, deixe-o habilitado.

<meta name="viewport" 
      content="width=device-width, initial-scale=1, user-scalable=no">

Para fazer com que um UX da Web (experiência do usuário) se adapte a visores mais estreitos, evite definir larguras fixas para imagens. Em vez disso, use max-width: 100% para permitir que as imagens diminuam em contêineres estreitos sem expandir em grandes. Defina a altura como automática ou omita-a para manter a proporcionalidade. Isso garante que as imagens permaneçam dentro do visor e permaneçam proporcionais.

Larguras fixas para imagens Largura de 100% para imagens
.image {
width: 556px;
height: 278px;
}		 .image {
max-width: 100%;
}

Para garantir que os botões respondam bem ao dimensionamento de texto, siga estas etapas:

  1. Definir Tamanho da Fonte: aumente o tamanho da fonte para um valor muito grande para verificar se há problemas de truncamento.

  2. Remover Estouro Oculto: remova a overflow: hidden propriedade para evitar truncamento. No entanto, isso pode fazer com que o texto se estenda além dos limites do botão. Esse problema ocorre porque a largura e a altura do botão são definidas em pixels, que não se ajustam com o dimensionamento de texto.

  3. Alternar para unidades REM: substitua a largura e a altura baseadas em pixels por unidades rem para dar suporte ao dimensionamento de texto. Isso permite que o botão redimensione junto com o texto.

  4. Ajustar Posicionamento: altere os valores de posição de pixels (px) para unidades rem para evitar sobreposição.

  5. Manipular a Localização: ao verificar versões localizadas, como russo, você pode encontrar os encapsulamentos de texto e despejos do botão. Isso ocorre porque a altura do botão é fixa, supondo que apenas uma linha de texto. Defina a altura como automática ou remova-a inteiramente para permitir que o botão cresça para ajustar o texto.

  6. Avaliar a capacidade de resposta: ao testar o design em um visor mais estreito, os botões podem se estender além da largura do visor. Isso é causado pelo uso de position: absolute, o que pressupõe que há espaço horizontal suficiente para botões sentarem-se lado a lado. Remova-o para permitir que os botões empilhem e embrulhem naturalmente em pontos de vista estreitos.

    Antes Depois
    button {
    width: 120px;
    height: 30px;
    overflow: hidden;
    }

    .button1 {
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    }

    .button2 {
    position: absolute;
    margin-left: 130px;
    margin-top: 0px;
    }    		 button {
    width: 7.5rem;
    height: 1.875rem;
    }

    .button1 {
    margin-left: 0rem;
    margin-top: 0rem;
    }

    .button2 {
    margin-left: 8.125rem;
    margin-top: 0rem;
    }

  7. Adicionar Margens: por fim, adicione margens entre os botões para garantir que haja espaçamento adequado quando eles forem empilhados. Isso ajuda os botões a encapsular corretamente em um visor estreito.

    .button {
    width: 44%;
    margin: 2%;
}

@media all and 
(max-width: 18rem) {
    .button {
        width: 95%;
    }
}

Para botões de layout que preenchem a largura do painel e alternam de uma linha para duas linhas, você pode usar diferentes técnicas de CSS. Comece usando display: flex o contêiner, que fornece várias opções para dimensionar, espaçar, alinhar e encapsular uma lista linear de itens. Add display: flex para o contêiner e defina propriedades extras no contêiner e nos itens.

.buttoncontainer {
    display: flex;
    flex-direction: row;
    align-content: stretch;
}

.button {
    width: 100%;
    margin: 2%;
}

@media all and (max-width: 18rem) {
    .buttoncontainer {
        flex-wrap: wrap;
    }
}

Como alternativa, você pode usar display: grid para recursos de layout semelhantes à tabela sem usar uma tabela real. Especifique o dimensionamento e o espaçamento de linhas e colunas no contêiner e defina os locais de linha e coluna para cada item. Use consultas de mídia para reconfigurar a grade conforme necessário. A vantagem dessas técnicas é que elas são declarativas, usando apenas CSS e nenhum JavaScript.

Antes Depois
.buttoncontainer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
column-gap: 10px;
}

.button {
grid-row-start: 1;
grid-row-end: 2;
justify-self: stretch;
}

.button1 {
grid-column-start: 1;
grid-column-end: 2;
}

.button2 {
grid-column-start: 2;
grid-column-end: 3;
}		 @media all and (max-width: 18rem) {
.buttoncontainer {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}

.button {
grid-column-start: 1;
grid-column-end: 2;
}

.button1 {
grid-row-start: 1;
grid-row-end: 2;
}

.button2 {
grid-row-start: 2;
grid-row-end: 3;
}
}

Do's e Don'ts for Reflow

Aqui estão alguns do's e não para refluxo:

  • Use a largura máxima para fazer com que os elementos diminuam para se ajustarem à largura do contêiner.
  • Use automaticamente para fazer os contêineres crescerem para se ajustarem ao conteúdo, dimensionarem imagens proporcionalmente e centralizarem elementos com margens iguais.
  • Use rem, ex, ch ou porcentagens para tamanhos de fonte e outros elementos para dar suporte ao dimensionamento de texto.
  • Use consultas de mídia para especificar layouts diferentes para larguras diferentes, adicionando um para cada ponto de interrupção.
  • Use exibição: embutida ou exibição: bloco embutido com posição: estático para permitir que os elementos empilhem e embrulhem como texto
  • Use exibição: flex para opções avançadas de layout para listas lineares de itens, mas verifique a compatibilidade se você precisar dar suporte ao Internet Explorer.
  • Use exibição: grade para layouts semelhantes a tabelas sem usar tabelas.
  • Use elementos gráficos vetoriais sempre que possível para garantir downloads rápidos e imagens afiadas em escalas mais altas. O SVG embutido é uma ótima opção.
  • Use o srcset img para especificar diferentes versões de resolução da mesma imagem, permitindo que o navegador selecione o apropriado com base nas configurações de escala, largura de banda e status do cache.
  • Não use posição: absoluta , a menos que seja necessário, como para criar sobreposições, e use-a apenas no contêiner, não os elementos dentro dele.
  • Não use unidades como cm, mm, in, px, pt ou pc para tamanhos de fonte, pois elas não dão suporte ao dimensionamento de texto.
  • Não use tabelas para layout; use-os apenas para dados tabulares para manter a semântica correta e a acessibilidade na árvore de acessibilidade.

Em soma,

Fazer ✓ Não X
  • largura máxima
  • carro
  • rem, ex, ch, %
  • @media todos e (largura máxima: 18rem)
  • display: embutido
  • display: inline-block
  • display: flex (verificar a compatibilidade do Internet Explorer)
  • exibição: grade (verificar a compatibilidade do Internet Explorer)
  • <svg>
  • <img srcset=" ">
  • posição: absoluta (exceto sobreposições)
  • cm, mm, in, px, pt, pc (exceto margens, preenchimento, borda, blocos grandes)
  • <tabela> (exceto para dados tabulares)

Conteúdo em Foco ou Focalização

Para implementar o conteúdo em focalizar ou focar em um aplicativo Web, evite usar dicas de ferramentas intrínsecas do navegador, pois elas têm muitos problemas de acessibilidade. Por exemplo, uma dica de ferramenta criada com o atributo de título não é focalizável e não é dimensionada com o zoom do navegador. Em vez disso, use dicas de ferramenta personalizadas. Uma dica de ferramenta personalizada pode ser tornada focalizável, escalonável com zoom do navegador e dispensável usando a chave de controle.

Os principais elementos para uma dica de ferramenta personalizada funcional incluem:

  1. Manipuladores de Eventos: permitir que os usuários invoquem e descartem dicas de ferramentas usando manipuladores de eventos e chaves. Manipuladores de eventos como mouseEnter e foco invocariam mostrando a dica de ferramenta, e onMouseOut e onBlur ocultariam a dica de ferramenta junto com os principais eventos quando o usuário toca na chave de escape.

    tooltip1.onmouseenter = showTooltip;
tooltip1.onmouseleave = hideTooltipAfterDelay;

  2. Ocultando dicas de ferramentas: permitir que os usuários ignorem dicas de ferramentas usando chaves ou manipuladores de eventos, como onBlur ou onMouseOut.

    triggerElement.addEventListener('mouseenter', showTooltip);

triggerElement.addEventListener('focus', showTooltip);

triggerElement.addEventListener('mouseleave', hideTooltip);

triggerElement.addEventListener('blur', hideTooltip);

document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') hideTooltip();
});

  3. Manipulador de Eventos key down: adicione um manipulador de eventos de tecla para baixo no documento para lidar com a tecla de controle, garantindo que ela funcione independentemente de onde o foco do teclado esteja.

    function documentKeyHandler(e) 
{
    e = e || window.event;
    if(e.ctrlKey) 
        hideTooltip();
}

Tenha cuidado com possíveis bugs, como a dica de ferramenta, que não desaparece quando a tecla de controle é pressionada se o manipulador de teclas no botão chama stopPropagation. Remover a chamada stopPropagation pode corrigir esse problema.