Projetos

Web Livro Acessível

PapelProduct Designer
ClienteSEAD/UFES
PlataformaWeb
FerramentasFigma
Tags
WebAcessibilidade
Web Livro Acessível — visão geral

Problema

A publicação digital existente da SEAD/UFES estava desatualizada tanto em termos de design quanto de acessibilidade — inacessível para usuários com deficiência visual ou motora. O projeto teve como objetivo redesenhar a publicação como um web livro moderno, legível e acessível para todos os perfis de leitores.

Equipe

O projeto foi desenvolvido em colaboração multidisciplinar com Edson Rufino, Hellen Rodex, Rafael Moraes e Semiramis Louzada — reunindo competências de design, desenvolvimento e acessibilidade para garantir a qualidade e conformidade da entrega.

Color System
Primary #1B4F8A
Text #1A1A1A
Link / Accent #0056B3
Background #FFFFFF
Muted #555F6E
Typography System
Heading 1 — Georgia, 26px, Bold Web Livro Acessível
Heading 2 — Georgia, 18px, Bold Capítulo e seções
Body — Open Sans, 14px, Regular Texto corrido com legibilidade otimizada para leitura prolongada e acesso universal.
Caption — Open Sans, 12px, Regular Legendas, notas de rodapé e metadados auxiliares.

Pesquisa

A pesquisa envolveu entrevistas e análise de necessidades de três perfis distintos de usuários com deficiência: pessoas cegas (usuários de leitores de tela), pessoas com baixa visão (necessidades de contraste e redimensionamento) e pessoas com deficiência motora (navegação por teclado e dispositivos assistivos). Cada perfil orientou decisões específicas de design e acessibilidade.

Cego / Screen Reader Total visual impairment
  • Semantic heading hierarchy (H1–H4)
  • ARIA labels on all interactive elements
  • Alt text on every image and figure
  • Full keyboard navigability
  • Skip-to-content shortcut
Baixa Visão Low vision
  • WCAG AA & AAA contrast ratios
  • Scalable text — no pixel locking
  • High-legibility sans-serif typefaces
  • Minimum 44px touch targets
  • Reflow support up to 400% zoom
Deficiência Motora Motor disability
  • Full Tab / Shift+Tab navigation
  • Visible focus indicators
  • No time-limited interactions
  • Compatible with switch-access devices
  • No mouse-only controls

Acessibilidade

A solução foi projetada com conformidade às diretrizes WCAG em múltiplas dimensões: Tipografia — uso exclusivo de fontes sans-serif de alta legibilidade com suporte a redimensionamento sem perda de conteúdo; Contraste — paleta de cores validada para atender os níveis AA e AAA das WCAG; Semântica — estrutura de headings hierárquica e atributos ARIA para compatibilidade com leitores de tela; Navegação — suporte completo à navegação via tecla TAB e atalhos de teclado para usuários com limitações motoras.