Botões de Acessibilidade

Perguntas frequentes

Por quê meus botões não estão funcionando no editor?

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.

Por quê minhas fontes não estão redimensionando com os botões de Aumentar/Diminuir fonte?

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…

Será que eu *realmente* preciso oferecer botões de Aumentar/Diminuir fonte para meus usuários?

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-busca e assim digitar #area-de-busca como seu link nas opções do bloco de botão.

Por quê meu botão de Pular para link está com estilo diferente dos outros botões?

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.

Tenho como colocar uma accesskey em cada botão?

Inicialmente, nós planejamos ter um simples recurso para adicionar accesskey em 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-mode nela para que seja invertida.

Can you please explain me better the “Asset Loading Method” option in Admin → Settings → A11Y Buttons?

I know, it is a bit confusing and advanced topic. If you keep the default (“On-Demand Loading”), a small JS script will always be loaded in your website. This script will be responsible for detecting the presence of A11Y Buttons, add interactivity for them and, when needed, enqueue CSS assets like the ones used by High Contrast and Readable Font buttons. The idea is that the style is only inserted in the HTML header if the button is clicked. It also works if you used not the Gutenberg block but a simple HTML markup to mimic the block. However, this has a performance issue: the CSS are not cacheable. By using the second option (“Block Detection Loading”) we leverage the entire assets enqueue job to WordPress. If it detects a buttons block in that page it will load both the JS script and the CSS files. This allow them to be cacheable. The disadvantage is that all CSS will be loaded even if a certain button is not used… but keep in mind that they are really small. This also won’t work for the rare scenarios where you are building your HTML markup by hand instead of using blocks.