SVG Acessível · Guia Enciclopédico Inkscape

O que você vai aprender

Adicionar títulos e descrições acessíveis a elementos SVG (, <desc>)</li> <li>Configurar role e aria-label para SVGs usados como ícones ou imagens</li> <li>Garantir contraste adequado entre elementos SVG e fundo</li> <li>Testar SVG com leitores de tela para verificar a experiência acessível</li> </ul> </section> <h1 id="svg-acessivel">SVG Acessível<a class="zola-anchor" href="#svg-acessivel" aria-label="Anchor link for: svg-acessivel">🔗</a></h1> <h2 id="por-que-acessibilidade">Por Que Acessibilidade?<a class="zola-anchor" href="#por-que-acessibilidade" aria-label="Anchor link for: por-que-acessibilidade">🔗</a></h2> <p>SVGs acessíveis funcionam com leitores de tela e são navegáveis por teclado.</p> <h2 id="elementos-essenciais">Elementos Essenciais<a class="zola-anchor" href="#elementos-essenciais" aria-label="Anchor link for: elementos-essenciais">🔗</a></h2> <h3 id="title">title<a class="zola-anchor" href="#title" aria-label="Anchor link for: title">🔗</a></h3> <pre class="giallo" style="color: #E1E4E8; background-color: #24292E;"><code data-lang="plain"><span class="giallo-l"><span><svg></span></span> <span class="giallo-l"><span> <title>Logo da Empresa</title></span></span> <span class="giallo-l"><span> ...</span></span> <span class="giallo-l"><span></svg></span></span></code></pre><h3 id="desc">desc<a class="zola-anchor" href="#desc" aria-label="Anchor link for: desc">🔗</a></h3> <pre class="giallo" style="color: #E1E4E8; background-color: #24292E;"><code data-lang="plain"><span class="giallo-l"><span><svg></span></span> <span class="giallo-l"><span> <title>Logo da Empresa</title></span></span> <span class="giallo-l"><span> <desc>Logo consistindo de um triângulo azul com as letras XYZ no centro</desc></span></span> <span class="giallo-l"><span> ...</span></span> <span class="giallo-l"><span></svg></span></span></code></pre><h2 id="aria-roles">ARIA Roles<a class="zola-anchor" href="#aria-roles" aria-label="Anchor link for: aria-roles">🔗</a></h2> <h3 id="role-img">role="img"<a class="zola-anchor" href="#role-img" aria-label="Anchor link for: role-img">🔗</a></h3> <pre class="giallo" style="color: #E1E4E8; background-color: #24292E;"><code data-lang="plain"><span class="giallo-l"><span><svg role="img" aria-label="Ícone de menu"></span></span> <span class="giallo-l"><span> ...</span></span> <span class="giallo-l"><span></svg></span></span></code></pre><h3 id="role-presentation">role="presentation"<a class="zola-anchor" href="#role-presentation" aria-label="Anchor link for: role-presentation">🔗</a></h3> <p>Para SVGs decorativos:</p> <pre class="giallo" style="color: #E1E4E8; background-color: #24292E;"><code data-lang="plain"><span class="giallo-l"><span><svg role="presentation"></span></span> <span class="giallo-l"><span> ...</span></span> <span class="giallo-l"><span></svg></span></span></code></pre><h2 id="boas-praticas">Boas Práticas<a class="zola-anchor" href="#boas-praticas" aria-label="Anchor link for: boas-praticas">🔗</a></h2> <h3 id="nao-dependa-apenas-de-cor">Não Dependa Apenas de Cor<a class="zola-anchor" href="#nao-dependa-apenas-de-cor" aria-label="Anchor link for: nao-dependa-apenas-de-cor">🔗</a></h3> <ul> <li>Use texto ou ícones com labels</li> <li>Contraste suficiente</li> <li>Não use cor como único indicador</li> </ul> <h3 id="navegacao-por-teclado">Navegação por Teclado<a class="zola-anchor" href="#navegacao-por-teclado" aria-label="Anchor link for: navegacao-por-teclado">🔗</a></h3> <pre class="giallo" style="color: #E1E4E8; background-color: #24292E;"><code data-lang="plain"><span class="giallo-l"><span><svg></span></span> <span class="giallo-l"><span> <a xlink:href="/pagina"></span></span> <span class="giallo-l"><span> <text tabindex="0">Link</text></span></span> <span class="giallo-l"><span> </a></span></span> <span class="giallo-l"><span></svg></span></span></code></pre><h3 id="teste-com-leitores-de-tela">Teste com Leitores de Tela<a class="zola-anchor" href="#teste-com-leitores-de-tela" aria-label="Anchor link for: teste-com-leitores-de-tela">🔗</a></h3> <ul> <li>Use NVDA (Windows)</li> <li>Use VoiceOver (macOS)</li> <li>Use axe DevTools</li> </ul> <h2 id="checklist-de-acessibilidade">Checklist de Acessibilidade<a class="zola-anchor" href="#checklist-de-acessibilidade" aria-label="Anchor link for: checklist-de-acessibilidade">🔗</a></h2> <ul> <li><input disabled="" type="checkbox"/> <code><title></code> presente</li> <li><input disabled="" type="checkbox"/> <code><desc></code> para SVGs complexos</li> <li><input disabled="" type="checkbox"/> <code>role="img"</code> ou <code>role="presentation"</code></li> <li><input disabled="" type="checkbox"/> <code>aria-label</code> quando necessário</li> <li><input disabled="" type="checkbox"/> Contraste de cores adequado</li> <li><input disabled="" type="checkbox"/> Testado com leitor de tela</li> </ul> <div class="note"> <div class="note-body"><p>SVGs inline em HTML herdam estilos do documento. Use <code>aria-hidden="true"</code> em SVGs decorativos para evitar redundância.</p> </div> </div> <section class="recap"> <h2>Você aprendeu</h2> <ul> <li>Elementos <title> e <desc> fornecem contexto para leitores de tela</li> <li>role='img' + aria-label tornam SVGs acessíveis quando usados como ícones</li> <li>Contraste WCAG AA (4.5:1) deve ser mantido entre texto/elementos SVG e o fundo</li> </ul> </section> <h2 id="referencias">Referências<a class="zola-anchor" href="#referencias" aria-label="Anchor link for: referencias">🔗</a></h2> <ul> <li><a rel="external" href="https://inkscape-manuals.readthedocs.io/en/latest/export-png.html">Inkscape Manual — Export PNG</a></li> <li><a rel="external" href="https://www.w3.org/TR/SVG11/">W3C — Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a></li> <li><a rel="external" href="https://www.w3.org/TR/SVG2/">W3C — Scalable Vector Graphics (SVG) 2</a></li> </ul> </div> </article> </main> <aside class="toc-aside" aria-label="Sumário"> <nav class="toc"> <h2 class="toc-title">Nesta página</h2> <ul class="toc-list"> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#svg-acessivel">SVG Acessível</a> <ul class="toc-sublist"> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#por-que-acessibilidade">Por Que Acessibilidade?</a> </li> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#elementos-essenciais">Elementos Essenciais</a> <ul class="toc-sublist"> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#title">title</a></li> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#desc">desc</a></li> </ul> </li> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#aria-roles">ARIA Roles</a> <ul class="toc-sublist"> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#role-img">role="img"</a></li> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#role-presentation">role="presentation"</a></li> </ul> </li> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#boas-praticas">Boas Práticas</a> <ul class="toc-sublist"> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#nao-dependa-apenas-de-cor">Não Dependa Apenas de Cor</a></li> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#navegacao-por-teclado">Navegação por Teclado</a></li> <li><a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#teste-com-leitores-de-tela">Teste com Leitores de Tela</a></li> </ul> </li> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#checklist-de-acessibilidade">Checklist de Acessibilidade</a> </li> <li> <a href="https://pages.singularjourney.org/devjonatas/guia-inkscape/design-web/svg-acessivel/#referencias">Referências</a> </li> </ul> </li> </ul> </nav> </aside> </div> <footer class="site-footer"> <div class="footer-inner"> <p>Guia Enciclopédico de Inkscape · Feito com <a href="https://www.getzola.org" target="_blank" rel="noopener">Zola</a></p> </div> </footer> <script type="text/javascript" src="https://pages.singularjourney.org/devjonatas/guia-inkscape/elasticlunr.min.js" defer></script><script src="https://pages.singularjourney.org/devjonatas/guia-inkscape/js/elasticlunr-pt.js" defer></script> <script type="text/javascript" src="https://pages.singularjourney.org/devjonatas/guia-inkscape/search_index.pt.js" defer></script> <script type="text/javascript" src="https://pages.singularjourney.org/devjonatas/guia-inkscape/js/search.js" defer></script> <script type="text/javascript" src="https://pages.singularjourney.org/devjonatas/guia-inkscape/js/main.js" defer></script> </body> </html>