Como cliente Premium da YUMPU, você tem a opção de adaptar totalmente seu WebKiosk ou App à sua identidade corporativa (CI). Isso inclui a capacidade de carregar CSS personalizado para estilizar fontes, cores, espaçamentos, botões, navegação e muito mais.
Para garantir que suas personalizações não apenas reflitam sua marca, mas também permaneçam acessíveis a todos os usuários, recomendamos fortemente que você siga as melhores práticas de acessibilidade. Abaixo, você encontrará diretrizes úteis e ferramentas de teste para ajudar a garantir que suas escolhas de design atendam aos padrões atuais de acessibilidade.
Por que a acessibilidade é importante ao usar CSS personalizado
Embora a estilização personalizada ajude a expressar sua marca, certas alterações de CSS podem introduzir inadvertidamente barreiras para usuários com deficiências, como:
Contraste de cores insuficiente
Fontes de difícil leitura ou tamanhos de texto muito pequenos
Elementos ocultos ou inacessíveis ao usar navegação por teclado
Funções dependentes exclusivamente de hover
Problemas de layout ao dar zoom ou em dispositivos móveis
Recomendamos que todas as personalizações sejam avaliadas quanto à acessibilidade com base nas normas WCAG 2.1 Nível AA.
Principais recomendações para estilização acessível
Aqui estão elementos importantes a considerar ao criar seu design personalizado:
Elemento | Boa Prática |
Cores | Garanta contraste suficiente entre o texto e o fundo (pelo menos 4.5:1). |
Fontes | Use tipografias legíveis e evite tamanhos de fonte menores que 14px. |
Estados de foco | Todos os elementos interativos devem ser acessíveis por teclado e ter foco claramente visível. |
Efeitos de hover | Certifique-se de que funções críticas sejam acessíveis sem o uso do mouse. |
Ferramentas recomendadas para testes de acessibilidade
Você pode usar as seguintes ferramentas gratuitas para verificar se seu CSS personalizado atende aos padrões de acessibilidade:
WAVE Web Accessibility Evaluation Tool → https://wave.webaim.org/
Testa contraste, estrutura, texto alternativo e muito mais.Accessible Colors Checker → https://accessible-colors.com/
Avalie facilmente combinações de cores de texto/fundo.WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Simples e eficaz para verificar proporções de contraste.Lighthouse (Chrome DevTools) → Clique com o botão direito > “Inspecionar” > guia “Lighthouse”
Gera relatórios automatizados de acessibilidade.axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Extensão de navegador para testes abrangentes de acessibilidade.
O que a YUMPU fornece por padrão
A YUMPU garante que a estrutura padrão do seu WebKiosk e App seja desenvolvida pensando na acessibilidade. Isso inclui navegação por teclado, marcação semântica e layouts escaláveis.
No entanto, ao carregar CSS personalizado, você assume a responsabilidade por quaisquer aspectos de acessibilidade relacionados à estilização.
Nota: Recomendamos fortemente que você teste seu design regularmente, especialmente após lançar novo conteúdo, ajustar cores ou aplicar alterações significativas no layout.
Mais recursos