Acessibilidade na prática para você nunca mais esquecer

Talita Pagani

@talitapagani

Acessibilidade web:

Por que e para quem mesmo?

Por que tenho que me importar?

Web é para todos

24% da população brasileira tem algum tipo de  deficiência e essas pessoas consumem conteúdo na web assim como você

Não tem essa de público-alvo

"Como eu convenço meu chefe a me deixar fazer acessibidade?"

acessibilidade não é feature do projeto

É sua rotina, é uma parte inerente do seu trabalho.

Você não precisa de autorização.

"Acessibilidade dá mó trampo, cé loko! Já viu a doc do WCAG?"

Baseado em fatos reais...

https://websitedocaralho.com.br/

Primeiro, o pack básico

Que todos vocês já fazem... espero

Declarar a linguagem do documento

Ter um <h1> na página declarando o título da página

Fazer a divisão adequada dos textos com títulos

Sempre associar <label> aos controles de formulário

Usar adequadamente a semântica dos elementos HTML

Jamais remova o outline dos elementos!

ouline: none; //jamás

#1 | CSS

Não basta estilizar o :hover, tem que ter o :focus também

#2 | CSS

Permita que outros elementos também possam receber foco via teclado

#3 | CSS

TEXTOS CAPITALIZADOS OU EM CAIXA-ALTA: SEMPRE NO CSS, NUNCA NO HTML

Quando possível, não use

#4 | HTML E CSS

Toda imagem precisa ter o atributo alt declarado

Você não precisa ser o(a) mestre da descrição de imagem para isso, precisa ser algo que faça sentido

#5 | HTML

<img src="mestre-reinaldo.jpg" 
     alt="Reinaldo Ferraz vestido como Obi-Wan Kenobi">

Inclusive, o Reinaldo irá falar sobre este assunto mais tarde

Marque o início do conteúdo e insira um link para pular direto a ele

#6 | HTML

Marque As seções do conteúdo com as landmark roles do aria

#7 | HTML

<header role="banner">

<nav role="navigation">

<div id="conteudoprincipal" role="main">

<div id="widget" role="complementary">

<form action="search.php" role="search">

<p class="copyright" role="contentinfo">

"Clique aqui" para links:

Não

#8 | HTML

Temos um conteúdo muito importante para disponibilizar para você, então clique aqui para fazer o download do PDF.

Se você ainda não é cadastrado, clique aqui para fazer o cadastro.

Perdeu sua senha? Clique aqui para recuperar.

Temos um conteúdo muito importante para disponibilizar para você, então faça o download do nosso e-book em PDF.

Se você ainda não é cadastrado, crie sua conta no site XPTO.

Esqueci minha senha.

Assegure contraste adequado entre fonte e cores/imagens de fundo

E não associe informações somente a cores

#9 | CSS

Texto com a mesma cor do background

Texto com a mesma cor do background

Texto com a mesma cor do background

Texto com a mesma cor do background

#FFF

Clique no botão vermelho para cancelar a autodestruição

você só tem uma chance

Teste seu site com CSS e javacript desabilitado

#10 | Geral

Considere diferentes contextos de uso

Baixa visão, daltonismo, deficiência motora temporária ou permanente, limitações cognitivas/neuronais/de aprendizagem, deficiência auditiva, limitações da idade, características do ambiente

Bônus

Links interessantes para saber mais

15 Website Accessibility Tips That Increase Everyone’s Engagement

10 Simple Web Accessibility Tips You Can Do Today

6 Tips for Improving Website Accessibility

Making Your Website Accessible

Mais um mito derrubado com sucesso!

Obrigada!

@talitapagani

talitapagani.com

contato@talitapagani.com