As áreas de toque são as áreas de uma página da Web com as quais os usuários de dispositivos de toque podem interagir. Botões, links e elementos de formulário têm áreas de toque.
Muitos mecanismos de pesquisa classificam as páginas com base no grau de compatibilidade delas com dispositivos móveis. Garantir que os pontos de toque sejam grandes e distantes o suficiente torna sua página mais compatível com dispositivos móveis e acessível.
Como a auditoria de pontos de toque do Lighthouse falha
O Lighthouse sinaliza páginas com áreas de toque que atendem a estas duas condições:
- A segmentação é menor que 48 pixels por 48 pixels.
- Pelo menos 25% da área dentro de 48 pixels do centro se sobrepõe a outra.
Quando a auditoria falha, o Lighthouse lista os resultados em uma tabela com três colunas:
| Área de toque | O ponto de toque com tamanho inadequado. |
| Tamanho | O tamanho do retângulo delimitador do alvo em pixels. |
| Segmentação conflitante | Quais outros pontos de toque estão muito próximos, se houver algum. |
Como corrigir as áreas de toque
Opção 1:aumente o tamanho dos pontos de toque muito pequenos.
Áreas de toque de 48 x 48 pixels nunca falham na auditoria. Se você tiver
elementos que não podem parecer maiores (por exemplo, ícones), tente aumentar
a propriedade padding:
padding para aumentar as áreas de toque sem mudar a aparência de um elemento.
Opção 2:aumente o espaçamento entre áreas de toque muito próximas
usando propriedades como margin. 8 pixels entre áreas de toque é um bom ponto de partida,
mas nem sempre é suficiente para passar na auditoria, especialmente para alvos muito pequenos.
Recursos
- Áreas de toque acessíveis: mais informações sobre como garantir que seus pontos de toque sejam acessíveis a todos os usuários.
- Código-fonte da auditoria Áreas de toque não estão dimensionadas corretamente