🔶 Introdução
O projeto "Zara Art Gallery" nasce da vontade de desenvolver um site onepage de galeria de arte com temática russa, visando não apenas a estética, mas também a acessibilidade digital conforme os padrões WCAG
(Web Content Accessibility Guidelines). Esta página fictícia foi pensada como um exercício de boas práticas, unindo design impactante e usabilidade inclusiva, a fim de garantir que todos — independentemente de limitações físicas ou cognitivas — possam navegar, interagir e apreciar o conteúdo com facilidade.
(Web Content Accessibility Guidelines). Esta página fictícia foi pensada como um exercício de boas práticas, unindo design impactante e usabilidade inclusiva, a fim de garantir que todos — independentemente de limitações físicas ou cognitivas — possam navegar, interagir e apreciar o conteúdo com facilidade.
🔶 Entendimento do problema
Atualmente, grande parte dos sites artísticos prioriza o impacto visual, mas negligencia aspectos de acessibilidade fundamentais. Imagens sem descrições adequadas, baixa legibilidade de textos, contrastes insuficientes e navegação não compatível com teclado são problemas comuns. Para o "Zara Art Gallery", identifiquei que o desafio seria integrar a forte identidade visual inspirada na arte soviética com normas de acessibilidade, sem comprometer a estética ou a experiência do usuário.
🔶 Principais barreiras detectadas que precisavam ser evitadas
- Contrastes de cor inadequados entre texto e fundo
- Ausência de hierarquia visual clara
- Falta de alternativas textuais (alt text) para imagens
- Inconsistência de navegação para usuários de teclado e leitores de tela
- Áreas clicáveis pequenas e difíceis de acessar
O primeiro passo foi realizar uma análise de design acessível aplicada diretamente à estrutura da página:
- Tipografia: Utilização de fontes legíveis em tamanhos adequados (mínimo de 16px) e espaçamento confortável entre linhas.
- Cores: Definição de uma paleta de alto contraste baseada em vermelho, preto e branco, respeitando a proporção mínima de contraste (4.5:1 para textos normais e 3:1 para textos grandes).
- Estrutura semântica: Uso de headings (H1, H2, H3) de forma hierárquica, para que leitores de tela possam navegar melhor pela página.
- Descrição de imagens: Inclusão de texto alternativo significativo em todas as imagens, descrevendo seu conteúdo ou função.
- Interatividade: Botões grandes, com foco visível ao navegar por teclado e com rótulos descritivos.
🔶 Ferramentas Utilizadas
- Figma para o design visual e prototipagem
- Stark - Contrast & Accessbility Checker para auditorias de acessibilidade
- Referências diretas aos guias WCAG 2.1
🔶 Teste de Usabilidade
Para validar as melhorias de acessibilidade, realizei testes básicos com usuários simulando diferentes perfis:
- Usuários com deficiência visual: Utilizando leitores de tela como NVDA.
- Usuários idosos: Verificando a facilidade de leitura e localização de informações.
🔶 Principais insights obtidos
- A hierarquia textual clara facilitou a localização de seções importantes.
- A navegação por teclado funcionou corretamente, com foco visível em todos os elementos interativos.
- O contraste elevado melhorou a experiência para usuários com baixa visão.
🔶 Conclusão
O projeto "Zara Art Gallery" comprova que é possível criar uma experiência digital rica, impactante e altamente acessível sem sacrificar o design. A acessibilidade foi incorporada como pilar principal, e não apenas como um ajuste final.
Link para projeto no Figma: https://figma.fun/MxQqvd
