Carie Fisher
Gráficos Vetoriais Escaláveis (SVGs) se tornaram um padrão aberto do W3C em 1999 — na época em que a nova tecnologia em alta era o telefone Blackberry, o Napster invadia os dormitórios universitários pela primeira vez e o bug do Y2K gerava medo em todos nós. Avançando para o nosso mundo digital moderno, você notará que, enquanto outras tendências tecnológicas diminuíram, os SVGs ainda estão presentes e prosperando. Isso se deve em parte ao fato de que os SVGs têm uma pequena pegada para uma fidelidade visual tão alta, em um mundo onde a largura de banda e o desempenho importam mais do que nunca — especialmente em dispositivos móveis e em situações/localizações onde os dados são escassos. Mas também porque os SVGs são tão flexíveis com seus estilos integrados, interatividade e opções de animação. O que podemos fazer com SVGs hoje vai muito além das formas básicas de antigamente.
Se focarmos no aspecto de acessibilidade dos SVGs, também avançamos bastante. Hoje, temos muitos padrões e técnicas robustas para nos ajudar a otimizar a inclusividade. Isso é verdade, independentemente de você estar criando ícones, imagens simples ou imagens mais complexas. Embora o padrão específico que você decida usar possa variar dependendo da sua situação particular e do nível de conformidade WCAG que você deseja atingir — a realidade é que a maioria das pessoas para por aí, focando na conformidade do código e não nos usuários finais e suas necessidades. Se a verdadeira inclusividade vai além dos padrões — quais outros fatores devemos considerar ao projetar e desenvolver SVGs acessíveis?
Junte-se a mim para aprender mais sobre:
Cor + Contraste em SVG
Diretrizes/ferramentas de proporção de contraste de cor WCAG
Simuladores/filtros de daltonismo
Consulta de mídia: @prefers-color-scheme - o que é e como usá-lo?
Animação SVG
Diretrizes de movimento WCAG para animações
Opções de pausa/parar/ocultar animação
Consulta de mídia: @prefers-reduced-motion - o que é e como usá-lo?