Acessibilidade

Navegação pelo teclado

O suporte à navegação por teclado é um aspecto fundamental da acessibilidade de um site. Ele garante que usuários que não conseguem usar o mouse, como aqueles com deficiência motora, visual ou lesões temporárias, ainda possam navegar e interagir com um site.

Cada elemento interativo, incluindo Links, botões e campos de formulário, deve ser acessível usando a tecla Tab, com uma ordem de tabulação lógica e indicadores de foco visíveis para mostrar qual elemento está selecionado no momento.

Sites criados com a versão mais recente do Blocs, suporta os seguintes controles de navegação do teclado quando visualizado em um navegador da web.

Chave de escape

• Fecha o menu suspenso.
• Fecha o Modal.
• Fecha a caixa de luz.
• Fecha o menu de tela cheia.

Teclas de seta esquerda e direita

• Navegar pela Light Box (para frente e para trás).
• Navegar pelas guias (para frente e para trás).

Chave de retorno

• Clique no botão ou link selecionado.
• Abra o menu/suspenso selecionado.

Tecla de espaço

• Clique no botão selecionado.
• Abra o menu/suspenso selecionado.
• Alternar seleção de caixa de seleção (marcada/desmarcada).
• Alternar seleção de rádio (selecionar uma opção).

Tecla de tabulação

• Mover a seleção para frente.

Shift + tecla Tab

• Mover a seleção para trás.

Indicadores de Foco

Ao navegar em um site usando um teclado, é essencial que os indicadores de foco estejam claramente visíveis, permitindo que os usuários vejam facilmente qual elemento está selecionado no momento. Blocs inclui um embutido Melhoria de acessibilidade recurso que, quando ativado, melhora a visibilidade de link e botão estados de foco. Este aprimoramento facilita a navegação eficiente do usuário do teclado no seu site e garante uma experiência mais acessível para quem utiliza o teclado.

Etiquetas de acessibilidade

O uso de rótulos de acessibilidade em um site é crucial para atender às WCAG (Diretrizes de Acessibilidade para Conteúdo Web) e garantir que seu conteúdo seja acessível a todos os usuários, incluindo aqueles que utilizam tecnologias assistivas, como leitores de tela. Um elemento-chave é o uso de rótulos descritivos. alt tags em imagens, que fornecem contexto significativo para usuários que não conseguem ver o conteúdo visual. Blocs, definir o texto alternativo de uma imagem é simples, basta usar o campo de texto relevante no inspetor da barra lateral, quando uma imagem é selecionada na tela de design.

Além disso, rótulo de ária e ária-labelledby atributos ajudam a rotular elementos que não têm texto visível, como ícones ou botões, permitindo que os leitores de tela comuniquem sua função claramente.
Ao construir um site com Blocs, você pode adicionar manualmente esses atributos de acessibilidade usando Atributos de dados personalizados, dando a você controle total sobre como as tecnologias assistivas interpretam e anunciam seu conteúdo.

Contraste de cor

Ao construir uma página web, é importante considerar contraste de cor e daltonismo Para garantir que seu conteúdo seja acessível a todos os usuários. O contraste adequado entre as cores do texto e do fundo é essencial para a legibilidade, especialmente para pessoas com baixa visão ou deficiências de visão de cores. Blocs inclui embutido filtros de simulação de deficiência visual que permitem visualizar seu site sob a ótica de diversas condições visuais. Isso facilita a identificação e o ajuste de combinações de cores problemáticas, ajudando você a criar um site mais inclusivo e acessível.

Estrutura

Usando tags HTML semânticas, como cabeçalho, principal, seção, nav e rodapé, é uma consideração importante ao criar sites acessíveis. Essas tags dão estrutura e significado ao seu conteúdo, permitindo que tecnologias assistivas, como leitores de tela, interpretem o layout da página e naveguem por ela com mais eficiência.

In Blocs, você pode atribuir tags de contêiner semântico a cada seção do seu site usando o etiqueta de contêiner opções. Isso não só melhora a acessibilidade, como também ajuda a manter seu site bem organizado e pode melhorar o SEO.