SVGs acessíveis: inclusão além dos padrões

Scalable Vector Graphics (SVGs) tornou-se um padrão aberto do W3C em 1999 - quando a nova tecnologia era o telefone Blackberry, o Napster invadiu os dormitórios da faculdade pela primeira vez e o bug Y2K provocou medo em todos nós. Avance rapidamente para o nosso mundo digital moderno e você notará que, embora as outras tendências tecnológicas tenham diminuído, os SVGs ainda estão por aí e prosperando.

Isso se deve em parte ao fato de os SVGs terem um tamanho pequeno 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 situações/locais onde os dados são valiosos. 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 do passado.

Se nos concentrarmos no aspecto de acessibilidade dos SVGs, também avançamos muito. Hoje, temos muitos padrões e técnicas robustos para nos ajudar a otimizar a inclusão. 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 de sua situação específica e do nível de conformidade das WCAG visado - a realidade é que a maioria das pessoas para por aí, concentrando-se na conformidade do código e não nos usuários finais reais e suas necessidades. Se a verdadeira inclusão está além dos padrões — que outros fatores devemos considerar ao projetar e desenvolver SVGs acessíveis?

Cor e contraste SVG

O foco principal dos SVGs acessíveis é a conformidade dos leitores de tela — que é apenas parte do problema e parte da solução. Globalmente, as pessoas com baixa visão e daltonismo superam as pessoas cegas 14:1. Estamos falando de impressionantes 546 milhões no total (246 milhões de usuários de baixa visão mais 300 milhões de usuários daltônicos) contra 39 milhões de usuários que são legalmente cegos. Muitas pessoas com baixa visão e daltonismo não dependem de leitores de tela, mas podem usar ferramentas como redimensionamento do navegador, folhas de estilo personalizadas ou software de ampliação para ajudá-los a ver o que está na tela. Para esses 546 milhões de pessoas, a saída do leitor de tela provavelmente não é tão importante para eles quanto garantir que a cor e o contraste sejam bons o suficiente para que eles possam ver o SVG na tela - mas como podemos verificar isso?

Ferramentas e verificações

O primeiro passo que você deve tomar ao projetar sua paleta de cores SVG é revisar as diretrizes de relação de contraste de cores WCAG. Embora os SVGs e outros ícones estivessem isentos dos requisitos de taxa de contraste de cores há pouco tempo (ao visar a conformidade com WCAG AA), a recente atualização das diretrizes WCAG 2.1 fez com que todas as imagens essenciais que não fossem texto devem aderir a uma taxa de contraste de pelo menos 3:1 contra cores adjacentes. Por essencial, significa que se o seu SVG desaparecesse, isso mudaria fundamentalmente as informações ou a funcionalidade do conteúdo? Se você puder responder “não”, provavelmente estará isento desta diretriz. Se você puder responder "sim" ou "talvez", você precisa verificar se as taxas de contraste de cores SVG estão corretas.

Um exemplo de uma imagem não-texto essencial é um ícone SVG usado como botão ou link de CTA - como vemos neste botão inicial. Neste SVG, vemos um desenho de linha de uma casa sem texto visual. Quando examinamos o código, vemos o texto “Home” em um span com uma classe chamada "sr-only" (somente leitor de tela) nele. Essa classe, junto com o CSS relacionado, oculta o texto span de usuários com visão, mas não de usuários AT (este é apenas um exemplo de um padrão de imagem/gráfico acessível) .

Este é um bom primeiro passo, mas escolher o padrão SVG correto é uma peça do quebra-cabeça - outra peça é o contraste de cores entre o ícone e seu plano de fundo. Voltando ao exemplo, à primeira vista parece que ambos os SVGs podem ser acessíveis. No entanto, ao usar uma ferramenta de contraste de cores e testar o ícone da casa em seu plano de fundo, vemos que o primeiro SVG falha em conformidade com uma relação de contraste de cor de 2:1 entre o traço ( #8f8f8f ) e o plano de fundo ( #cccccc ), enquanto o o segundo SVG passa com uma taxa de contraste de cor de 3:1 entre o traço ( #717171 ) e o fundo ( #cccccc ). Usando o mesmo padrão acessível, mas dando um passo extra e alterando a cor do traço para algo um pouco mais escuro, tornamos nosso SVG mais inclusivo para uma gama mais ampla de habilidades.

Para verificar as taxas de contraste de cores acessíveis, há muitas ferramentas disponíveis para uso. Para uma verificação rápida do contraste de cores, você pode usar o Verificador de contraste no Chrome DevTools. Para verificar o contraste de cores em designs não codificados, confira a ferramenta Color Contrast Analyzer. E para uma revisão da paleta de cores, A11y Color Palette é uma ótima maneira de ajudá-lo a ver quais combinações de cores são as mais acessíveis. Claro, certifique-se de experimentar algumas das ferramentas e escolher o que funciona melhor para você e sua equipe – a melhor ferramenta é aquela que você realmente usa.

Modo claro/escuro

Além de verificar as taxas de contraste de cores, você também deve considerar a consulta de mídia cada vez mais popular e suportada chamada @prefers-color-scheme que permite ao usuário escolher uma versão com tema claro ou escuro do site ou aplicativo que está visitando. Embora essa consulta de mídia não substitua a verificação das taxas de contraste de cores, ela pode oferecer aos usuários mais opções no que diz respeito à experiência geral do seu site ou aplicativo.

Permitir que seus usuários escolham sua experiência é sempre melhor do que presumir que você sabe o que eles querem.

“

Assim como em outras consultas de mídia, para ver as alterações do tema claro/escuro, o desenvolvedor do site ou aplicativo deve adicionar um código adicional direcionado à consulta. Voltando ao exemplo do ícone de casa anterior, você pode ver no código a seguir que as cores de traço, preenchimento e plano de fundo do SVG são controladas pelo CSS. Como esses elementos de estilo são controlados externamente e não codificados na marcação SVG, podemos adicionar algumas linhas extras de CSS para fazer o SVG funcionar em um tema escuro.

Modo leve/padrão:

 body { background: #cccccc; } .nav-home1 { stroke: #8f8f8f; } .nav-home2 { stroke: #717171; } #home-svg1, #home-svg2 { fill: #64b700; } #home-door-svg1, #home-door-svg2 { fill: #b426ff; }

Modo escuro:

 @media (prefers-color-scheme: dark) { body { background: #333333; } .nav-home1 { stroke: #606060; } .nav-home2 { stroke: #7C7C7C; } }

Como este exemplo mostra, configurar seus designs para usar CSS para controlar elementos de estilo significa que criar uma versão de tema escuro do seu SVG pode ser relativamente simples. Por outro lado, se você tiver estilos codificados na marcação SVG, talvez seja necessário reimaginar seu SVG de uma maneira que permita que o CSS tenha mais controle sobre o design. Ou você pode considerar criar uma versão escura completamente nova do seu SVG e trocar a versão clara quando as preferências do tema mudarem. Apenas lembre-se, se você planeja mostrar/ocultar imagens diferentes com base no modo de usuário, você também precisa ocultar o SVG não visível dos usuários AT!

Nota: neste exemplo em particular, o tema padrão já era claro, então fazia sentido também torná-lo a experiência padrão e criar um tema escuro para uma experiência alternativa. Caso contrário, se começarmos com um tema escuro, poderíamos ter feito o oposto, tornando o tema escuro a experiência padrão e usando @media (prefers-color-scheme: light) para criar um tema claro.

No próximo exemplo, estamos analisando um SVG mais complexo com versões de modo claro e escuro por meio da consulta de mídia @prefers-color-scheme . Nosso amigo Karma Chameleon (em formato SVG) tem um tema escuro e um tema claro/padrão. Ao alterar suas configurações de preferência de claro/escuro (configurações de modo escuro do Mac OS + Win OS) e navegar para um navegador que suporte a consulta de mídia @prefers-color-scheme , você pode ver a alteração do ambiente. No modo leve/padrão, Karma Chameleon está sentado em um galho em uma floresta verde cercada por uma borboleta vermelha esvoaçante. No modo escuro, ela está sentada em um galho no espaço com um foguete azul passando. Em ambos os ambientes, suas cores mudam automaticamente e seus olhos se movem.

Acessibilidade de cores e contrastes

Embora os exemplos acima sejam maneiras divertidas de mostrar o que você pode fazer com cores e contrastes e a consulta de mídia @prefers-color-scheme , existem alguns motivos reais muito bons para considerar a adição de um tema escuro, incluindo:

• Temas escuros são úteis para pessoas com fotofobia ou sensibilidade à luz. Pessoas com fotofobia podem desencadear dores de cabeça e enxaquecas quando visualizam um site ou aplicativo muito brilhante.
• Algumas pessoas acham o texto em um site ou aplicativo mais fácil de ler no modo escuro, enquanto outros podem achar que os temas mais claros são mais fáceis de ler – basicamente se resume a dar ao usuário uma escolha e permitir que ele defina sua preferência.
• Ao contrário de outras consultas de mídia baseadas em cores ou contraste, como @inverted-colors (atualmente suportado apenas pelo Safari) e @forced-colors (desenvolvido por engenheiros Edge/IE com suporte ao Chromium em breve), o suporte do navegador é bastante universal para @prefers-color-scheme — então essa consulta de mídia é útil imediatamente e deve permanecer por algum tempo. Além disso, com as alterações recentes no MS Edge usando o Chromium nos bastidores, há ainda mais suporte para essa consulta de mídia daqui para frente (RIP -ms-high-contrast-mode ).

Animação SVG

Em conjunto com a cor e o contraste, como seu SVG se move na tela é outro aspecto a ser considerado ao projetar e desenvolver com inclusão em mente. As diretrizes de movimento das WCAG são claras: informações não essenciais em movimento, piscando ou rolando que iniciam automaticamente, duram mais de cinco segundos e fazem parte de outros elementos da página devem permitir que o usuário pause, pare ou oculte. Mas por que precisamos dessa regra?

Para alguns usuários, mover, piscar ou rolar o conteúdo pode ser muito perturbador. Pessoas com TDAH e outros transtornos de déficit de atenção podem se distrair tanto com seus SVGs animados que esquecem por que foram ao seu site/aplicativo em primeiro lugar. Enquanto para outras pessoas, o movimento pode desencadear reações físicas. Por exemplo, pessoas com problemas vestibulares podem ficar enjoadas e tontas ao ver o movimento. Enquanto outros podem ser acionados para ter uma convulsão ao visualizar conteúdo que pisca ou é brilhante – uma situação que você obviamente deseja evitar.

Embora todos gostemos de ficar “encantados” com recursos interessantes de sites e aplicativos, precisamos encontrar um equilíbrio entre ser criativo e distrair (ou prejudicar) nossos usuários durante sua interação com conteúdo em movimento.

“

Parada manual/automática

Como as animações SVG, como outros conteúdos em movimento, não devem ser reproduzidas automaticamente por mais de cinco segundos, você deve criar uma maneira de os usuários pausarem ou interromperem a animação. Uma maneira de fazer isso é criar um botão de alternância JS para reproduzir/pausar a animação.

Se o seu SVG for grande ou for o principal recurso do seu site (por exemplo, animações que aparecem e desaparecem conforme você rola uma página), um botão de pausa/reprodução na parte superior da tela pode ser uma opção realista para controlar toda a experiência do a página. Se seus SVGs forem menores em escala ou relacionados à entrada do usuário (por exemplo, uma animação ocorre quando um usuário envia um formulário), um botão de pausa/reprodução pode não ser realista para cada imagem individual, portanto, uma opção alternativa é codificar a animação para parar em cinco segundos vs. jogando em um loop infinito. ### Movimento reduzido

Além de usar uma opção de pausa/reprodução ou criar um loop de animação finito, você também pode considerar adicionar a consulta de mídia @prefers-reduced-motion para abordar a animação em seus SVGs. Semelhante ao exemplo do tema claro/escuro, a consulta de mídia @prefers-reduced-motion verifica as configurações do usuário quanto a restrições de movimento e implementa uma experiência visual com base em sua preferência. No caso de @prefers-reduced-motion , um usuário pode optar por minimizar a quantidade de animação ou movimento que vê.

No exemplo a seguir, o SVG animado “escreve” uma palavra à medida que a página é carregada — essa é sua animação padrão. Na versão de movimento reduzido, o SVG é estacionário e a palavra é carregada sem a animação. Dependendo da complexidade de sua animação SVG e de como você deseja que a experiência de movimento reduzido pareça, a quantidade de código extra envolvido pode variar.

Movimento padrão:

 .svg-color { stroke: #ff4b00; } #a11y-svg { stroke-linecap: round; padding: 0.25rem; stroke-dasharray: 1000; stroke-dashoffset: 0; -webkit-animation: dash 5s linear forwards; animation: dash 5s linear forwards; overflow: visible; font-size: 100px; height: 0; margin: 10rem 0 5rem; position: relative; } #a11y-svg-design { cursor: pointer; stroke-width: 2px; } @-webkit-keyframes dash { from { stroke-dashoffset: 1000; fill: transparent; } to { stroke-dashoffset: 0; fill: #ff4b00; } }

Movimento reduzido:

 @media (prefers-reduced-motion: reduce) { #a11y-svg { animation: none; fill: #ff4b00; } }

Tenha em mente que ter o código @prefers-reduced-motion implementado é um passo para tornar seus SVGs mais acessíveis, mas você também precisa considerar a forma como o movimento é reduzido. Por exemplo, digamos que você crie uma versão mais lenta de sua animação SVG usando @prefers-reduced-motion . No entanto, a versão mais lenta está em um loop infinito, então a animação dura mais de cinco segundos, o que viola uma parte das regras WCAG sobre movimento. Se, em vez disso, você criar uma versão de movimento reduzido do seu SVG animado que interrompe a animação em cinco segundos, essa parte da regra passará. Essa mudança sutil de código equivale a duas experiências de usuário completamente diferentes.

No próximo exemplo, o Karma Chameleon está de volta com uma consulta de mídia @prefers-reduced-motion e código relacionado. Ao alterar suas configurações de movimento (configurações do Mac, Win, Android e iOS) e usar um navegador compatível com consulta de mídia @prefers-reduced-motion , você pode ver a alteração da animação. No modo de luz com movimento reduzido, Karma Chameleon em uma floresta com uma borboleta vermelha estacionária. No modo escuro com movimento reduzido, ela está no espaço com um foguete azul estacionário ao fundo. Em ambos os ambientes, suas cores e olhos também são estacionários, pois a animação SVG original é completamente removida.

Acessibilidade de animação

Do ponto de vista da acessibilidade, existem alguns ótimos motivos para considerar limitar o movimento na tela ou fornecer animações alternativas em seus SVGs, incluindo:

• Menos é mais! Manter suas animações SVG simples para pessoas com distúrbios cognitivos e de atenção pode ajudar na experiência geral do usuário. Isso é especialmente verdadeiro para SVGs essenciais para o conteúdo ou funcionalidade do seu site ou aplicativo, como navegação, botões, links ou qualquer animação acionada pela entrada do usuário.
• Não deixe as pessoas doentes! Algumas pessoas com convulsões, distúrbios vestibulares e de visão podem desencadear reações físicas por movimento em seus SVGs, portanto, seja responsável com seus designs e códigos. Nota: você deve verificar novamente quaisquer SVGs animados que possam ser problemáticos na área piscando/piscando, usando a ferramenta de análise de epilepsia fotossensível (PEAT) gratuita para garantir que você não desencadeie convulsões com seu conteúdo.
• A maioria dos principais navegadores agora oferece suporte @prefers-reduced-motion media query em computadores e dispositivos móveis - o que significa que mais pessoas podem limitar sua exposição a movimentos indesejados em suas telas. Ao contrário da consulta de mídia @prefers-color-scheme que tem muitos concorrentes, atualmente não há outra consulta de mídia de redução de movimento disponível.

Empacotando

Cor, contraste e animação estão no centro de cada SVG. Estudos relatam que esses elementos visuais possuem significado intrínseco, contribuem para o reconhecimento da marca e estão vinculados ao valor percebido de uma empresa – tornando os SVGs uma área muito grande onde designers e desenvolvedores podem ter um impacto direto e imediato em nossos usuários.

Mas também é importante que não pensemos na acessibilidade SVG apenas como algo para ajudar “outras pessoas” – porque quem não se viu em uma situação em que precisa lutar contra o brilho na tela de um dispositivo? Ou você tem uma enxaqueca e os SVGs ficam flutuando dentro e fora da tela, deixando-o doente em vez de “encantado”. Ou talvez você visite um site em um ambiente com pouca luz e o texto seja difícil de ler devido ao esquema de cores cinza sobre cinza?

Com o uso de ferramentas de acessibilidade, diretrizes WCAG e a adição e suporte contínuos de novas consultas de mídia CSS para permitir mais opções, podemos impactar todas as pessoas de maneira mais responsável e inclusiva.

Pois a verdadeira inclusão digital é entender que cada um de nós pode se beneficiar de designs e códigos mais acessíveis.

“