10 Dicas para Melhorar a Acessibilidade da sua Web App

10Dicas para
Melhorar a
Acessibilidade
da sua Web App

Hello!Eu sou Tatiane Aguirres Nogueira
Front-end Dev residente em Utrecht,
Países Baixos 🇳🇱
Você me encontra em @tatianeaguirres

Por que é
indispensável
desenvolver web
apps acessíveis?

212.190.825+
População estimada do Brasil
14.216.785+
Pessoas com deficiência
6,7%
Da população brasileira significa...
Fonte: ibge.gov.br

10Formas de tornar sua
web app acessível para
estes usuários.

<a
class="btn"
href="/somewhere"
>
Submit
</a>
<div
class="btn"
onclick="myFunction()"
>
Submit
</div>
<button
class="btn"
onclick="myFunction()"
>
Submit
</button>

https://developers.google.com/web/fundamentals/accessibility/semantics-builtin

https://developers.google.com/web/fundamentals/accessibility/semantics-aria

Links uteis
✓ Google Developers: Semantics and screen
readers
✓ Google Developers: Accessible to all
✓ WhatSock: The Accessibility Tree
✓ HTML.com: Semantic Markup
✓ MDN Web Docs: HTML elements reference

Lang
✓ É um atributo global.
✓ O valor default de “lang” é “unknown”.
✓ É recomendado sempre especificar
este atributo com o valor apropriado.

<html lang="en-GB">
<blockquote>
<span lang="es-CL">
Es tan corto el amor y tan largo el
olvido - Pablo Neruda
</span>
</blockquote>
span[lang] {
font-style: italic;
}

Página Web Leitor de Tela
Idioma padrão: TchecoIdioma padrão: Tcheco
<html lang="cs">
<p>English text</p>

Links uteis
✓ ISO language code reference
✓ WebAIM: Document language
✓ MDN Web Docs: Lang attribute

Tips & Tricks
✓ Navegação logica e intuitiva
✓ Focus em elementos interativos
✓ Se o elemento não for interativo, utilizar
tabindex=“0”
✓ Evitar tabindex=“1” (ou maior)
✓ Mesma experiência do :hover em :focus

“All functionality that is
available by mouse is
also available by
keyboard.
- W3C Web Accessibility Initiative (WAI)

Links uteis
✓ Web Accessibility I: Make Your Website
Accessible to Keyboard Users
✓ W3C Guideline 2.1 – Keyboard
Accessible
✓ Google Developers: Use semantic HTML
for easy keyboard wins

Tips & Tricks
✓ Forneça um link no topo da página
que direciona o usuário para o início
do conteúdo principal.
✓ Você pode tornar o link invisível até
receber o foco do teclado.
✓ Alternativa: navegação por headings.*
* Esse método é muito eficaz para usuários de leitores de tela, mas usuários de teclado apenas
não conseguem tirar proveito dele.

<body>
<a href="#maincontent">Skip to main content</a>
...
...
<main id="maincontent">
<h1>Heading</h1>
<p>This is the first paragraph</p>
...
</main>
</body>

Links uteis
✓ WebAIM: "Skip Navigation" Links

1.4.3: Contrast (Minimum)
ratio of at least 4.5:1
Level AA
https://www.w3.org/TR/WCAG21/#contrast-minimum

Links uteis
✓ CSS-Tricks: Understanding Web
Accessibility Color Contrast Guidelines
and Ratios
✓ WebAIM: Contrast and Color
Accessibility

Tips & Tricks
✓ Não use textos como 'clique aqui', 'leia
mais' e 'link'. É redundante.
✓ Não remova CSS outlines de links.
✓ Se o elemento <a> possui uma função
onClick(), um atributo href vazio ou não
possui um atributo href ele não é um link.
Use outro elemento HTML no lugar.

“If you want to hide
content from mobile and
tablet users as well as
assistive tech users and
keyboard only users, use
the title attribute.
- Using the HTML title attribute (The Paciello Group)

Links uteis
✓ The Accessibility Project: Creating valid
and accessible links
✓ The Accessibility Project: Never remove
CSS outlines
✓ WebAIM: Links and Hypertext

Tips & Tricks
✓ O elemento <h1> deve descrever a página e ter
conteúdo semelhante ao elemento <title>.
✓ A web page deve ter apenas um elemento <h1>.
✓ Não pule níveis, como de <h2> para <h4>.
✓ Não use headings para obter resultados visuais.
✓ Os headings de <h2> à <h6> representam graus
crescentes de indentação.

<h1>Italian Restaurant Menu</h1>
<h2>Pasta</h2>
<h3>Carbonara</h3>
<h3>Pesto</h3>
<h3>Lasagna</h3>
<h4>Four Cheese</h4>
<h4>Bolognese</h4>
<h2>Risotto</h2>
<h3>Mushroom</h3>
<h3>Garlic Parmesan</h3>

Links uteis
✓ Yale University: Headings
✓ W3C Web Accessibility Tutorials:
Headings

Tips & Tricks
✓ Usar pontuação torna a informação mais compreensível,
especialmente para leitores de tela.
✓ Use texto alternativo nulo e sem nenhum caractere (alt="")
para ocultar imagens decorativas.
✓ Usar 'imagem', 'ícone' ou ‘foto' é redundante.
✓ Evite imagens de texto. É uma má pratica.
✓ Se o proposito da imagem é demonstrar uma emoção ou
impressão ao usuário, use o texto alternativo para isso.

Links uteis
✓ Web Accessibility II: Make Your Website
Accessible to Screen Readers Users
✓ W3C Web Accessibility Tutorials: Images

https://ishadeed.com/article/clickable-area/

Links uteis
✓ Ishadeed: Enhancing The Clickable Area
Size

Tips & Tricks
✓ Utilize “REM” units no tamanho das fontes.
✓ Suporte para zoom.
✓ Suporte para textos grandes.
✓ Boas fontes para usuários com dislexia: Helvetica, Courier,
Arial, Verdana and CMU. Font types: sans serif,
monospaced, and roman.

Links uteis
✓ Google Fonts - Choosing Web Fonts: A
Beginner’s Guide
✓ Dyslexia Help: Good Fonts for Dyslexia
✓ Rem in CSS: Understanding and Using
rem Units
✓ Yale University: Zoom & Resizing Text

“Accessibility is essential for
developers and
organizations that want to
create high-quality websites
and web tools, and not
exclude people from using
their products and services.
- W3C Web Accessibility Initiative (WAI)

#
100
Tips
Of
A11y
1 dica de acessibilidade
por dia durante 100 dias.
Me siga no Twitter ou
LinkedIn para receber
estas dicas diárias.
@tatianeaguirres
Place your screenshot here

Descubra e
Desenvolva as
Skills mais
requisitadas na
Europa para
Front-end Devs.
Place your screenshot here

Thanks!Any questions?
You can find me at:
✓ @tatianeaguirres
✓ tatianeaguirres.com
✓ aguirres.tati@gmail.com

Credits
Special thanks to all the people who made
and released these awesome resources for
free:
✓ Fresh Folk illustrations by Leni Kauffman
✓ Presentation template by SlidesCarnival
✓ Photographs by Cliff Booth from Pexels

10 Dicas para Melhorar a Acessibilidade da sua Web App

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a 10 Dicas para Melhorar a Acessibilidade da sua Web App

Semelhante a 10 Dicas para Melhorar a Acessibilidade da sua Web App (20)

Mais de Tatiane Aguirres Nogueira

Mais de Tatiane Aguirres Nogueira (12)

10 Dicas para Melhorar a Acessibilidade da sua Web App