Descrição
Este plugin habilita um bloco Botões de Acessibilidade, que contém alguns botões de acessibilidade comuns que você geralmente encontra no topo de um cabeçalho de site. A ideia é fornecer uma maneira simples de se ter eles inseridos em qualquer parte do seu tema, sem adicionar camadas demais e mantê-los customizáveis para que você possa adaptar ao seu design e ainda oferecer os recursos necessários.
Os botões disponíveis são:
- Botão de Pular-para-conteúdo – Adiciona um link para qualquer parte do seu site. Você pode criar e configurar quantos você quiser;
- Alternar modo de contraste – Habilita uma folha de estilos com contraste extremamente alto;
- Alternar para fonte legível – Força o uso da Fonte Atkinson Hyperlegible para melhor leitura;
- Aumentar/diminuir/restaurar tamanho de fonte – Muda o tamanho de fonte da raiz do seu site. Verifique a seção de perguntas frequentes sobre seu uso.
Todos os botões tem as seguintes funcionalidades:
- Ordenação, alinhamento, espaçamento e layout em geral são completamente customizáveis.
- Formatação de texto, tamanho de fonte, cor de texto e de plano de fundo, bordas – se o tema oferecer suporte à elas;
- Habilitar ou desabilitar os ícones padrão, movê-los para esquerda ou direita,
Nós entendemos que acessibilidade é um tópico enorme e que nenhuma solução é perfeita. Nós também não somos de maneira alguma “experts” no assunto, então se você tem alguma crítica ou sugestão, por favor faça contato!
Quer ajudar? Ótimo! Sinta-se a vontade para Abrir uma issue ou fazer uma pull request.
Direitos autorais
Plugin Botões de Acessibilidade, Copyright 2022 wetah
O plugin Botões de Acessibilidade é distribuído sobre os termos da GNU GPLv3
Detalhes da licença: https://github.com/mateuswetah/A11Y-Buttons/blob/main/LICENSE
O plugin Botões de Acessibilidade traz junto o seguinte recurso de terceiros:
Fonte Atkinson Hyperlegible Copyright 2020 Braille Institute
Detalhes da licença: http://brailleinstitute.org/wp-content/uploads/2020/11/Atkinson-Hyperlegible-Font-License-2020-1104.pdf
Fonte: https://brailleinstitute.org/freefont
Capturas de tela
O bloco ascendente dos Botões de Acessibilidade, que aceita diferentes botões dentro dele com configurações de layout e opções de exibição de ícone; 
Um botão de “Pular para conteúdo” selecionado; 
A visualização da página publicada, com os botões de acessibilidade no topo; 
Modo de alto contraste habilitado; 
Tamanho de fonte aumentado; 
Tamanho de fonte diminuído;
Blocos
Este plugin disponibiliza 2 blocos.
- A11Y Buttons A list of accessibility buttons, such as font-size changing, contrast mode and skip links. Use them to help improve your website universal access.
- A11Y Button A basic accessibility button.
Instalação
Esta seção descreve como instalar o plugin e ativá-lo.
ex:
- Faça o upload dos arquivos do plugin para o diretório
/wp-content/plugins/a11y-buttonsou instale o plugin diretamente na tela de plugins do WordPress. - Ative o plugin através da tela ‘plugins’ no WordPress
Perguntas frequentes
-
Para evitar conflitos que poderiam quebrar a experiência do editor, nós optamos por fazer com que os botões funcionem apenas na página publicada, isto é, fora do editor. Isto é válido para todos os botões, exceto para o de Pular para link.
-
Este plugin usa a estratégia de atualizar o tamanho da fonte do navegador apenas. Isto significa que suas fontes só responderão a mudanças se elas foram configuradas no CSS com unidades relativas, tais como
rem. Outros plugin conseguem este redimensionamento com uma estratégia mais “opinada” de atribuir diferentes tamanhos para diferentes elementos nas tags internas do HTML. Se por um lado nós recomendamos que você use fontes relativas, nós também acreditamos que é válido discutir que… -
Esta é uma discussão válida hoje em dia, já que o recurso de Zoom de cada navegador pode tratar muito melhor disso, não importa qual unidade de CSS você esteja utilizando. Frequentemente, se seu site possui uma boa responsividade para dispositivos móveis, seu layout ficará com em um cenário de Zoom-pelo-navegador. Entretanto, pode ser argumentado que o fato de tudo ser redimensionado (incluindo imagens) polui parte do conteúdo relevante legível. Por fim, é um tópico sobre o qual não estamos 100% certos e adoraríamos encontrar mais pesquisas sobre isso.
-
Como eu configuro meu Pular para link para uma parte específica do meu site?
-
Links internos devem usar âncoras HTML de navegação, o que é feito com IDs. Se o ID não existe no código, você pode configurá-lo com um bloco. Para criar um link para uma barra de busca, por exemplo, selecione seu bloco no editor de sites e desça com o scroll até a seção Avançada na aba de configurações do bloco. A maioria dos blocos tem uma área para se definir uma âncora. Então, você pode defini-la como
area-de-buscae assim digitar#area-de-buscacomo seu link nas opções do bloco de botão. -
Internamente, o botão de “Pular para link” é uma tag âncora (
<a>), já que sua função é de navegação. Os demais botões são de fato tags<button>pois eles realizam ações e não links. Você pode usar a formatação e configurações do bloco para fazer com que eles fiquem parecidos. -
Como minhas preferências são armazenadas?
-
O plugin armazena os preferências de tamanho de fonte e estado do contraste através de diferentes páginas usando sessionStorage. Tome o cuidado de avisar seus usuários se você considera que isto possa ser uma questão sensível.
-
Inicialmente, nós planejamos ter um simples recurso para adicionar
accesskeyem cada botão. Após lermos isto, nós desistimos. -
Posso inverter a cor de uma imagem no modo de alto contraste?
-
Sim! Se você tem uma imagem como uma logo monocromática que faça sentido ser invertida, adicione a classe
a11y-invert-on-contrast-modenela para que seja invertida.
Avaliações
Não há avaliações para este plugin.
Colaboradores e desenvolvedores
“Botões de Acessibilidade” é um programa de código aberto. As seguintes pessoas contribuíram para este plugin.
Colaboradores
Botões de Acessibilidade” foi traduzido para 1 localidade. Agradecemos aos tradutores por suas contribuições.
Traduzir “Botões de Acessibilidade” para seu idioma.
Interessado no desenvolvimento?
Navegue pelo código, consulte o repositório SVN ou assine o registro de desenvolvimento por RSS.
Registro de alterações
0.2.0
- Adiciona botão de “Fonte legível”, com Fonte Atkinson Hyperlegible;
- Adiciona a classe
a11y-invert-on-contrast-modepara imagens e figuras que você deseja que tenham suas cores invertidas no modo de alto contraste.
0.1.2
- Correção do caminho para o css do modo de contraste;
- Seta do mouse apropriada quando se passa em cima dos botões;
0.1.1
- Melhor fluxo de build;
- CSS do modo de contraste carregado apenas quando necessário;
0.1.0
- Versão – um pouco experimental – inicial, com os botões de alternar contraste, ajustar tamanho de fonte e pular para link.