10 diretrizes de acessibilidade na web

Planejando uma melhor acessibilidade para seus projetos!

Acessibilidade é inclusão, é diversidade, é web ❤️ — Créditos da imagem Dyno Mapper

O que diabos é a acessibilidade da Web?

1. Não dependa da cor (~45 minutos)

2. Não bloqueie o zoom (~5 minutos)

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

3. Redescubra o atributo alt (~45 minutos)

<symbol id="langIcon">
<title>Ícone de linguagem</title>
<desc>Uma descrição maior</desc>
<path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" />
</symbol>

4. Adicione subtítulos e legendas aos seus vídeos (mais de 4 horas)

<video controls>
<source src="movie.mp4" type="video/mp4">
<track label="English Captions" kind="captions" srclang="eN" src="captions.vtt" default>
<track label="Subtitulos en español" kind="captions" srclang="es" src="subs.vtt">
</video>

5. Semântica = acessibilidade (~45 minutos)

6. Use a marcação correta (~30 minutos)

<time>14:54</time> Horas e minutos
<time>2018-06</time> Ano e mês
<time>-03:00</time> Fuso horário
<time>2h 32m</time> Duração do Harry Potter 2
<p>CSSConf Argentina acontecerá em <time datetime=”2016-08-07”>7 de Agosto</time></p>
<ul>
<li> <ins datetime="2017-08-02">Sorvete</ins></li>
<li>Doce</li>
<li>Macarrão</li>
</ul>
<ul>
<li><del datetime="2017-06-05">Reassistir Harry Potter 8</del></li>
<li><del datetime="2017-06-05">O personagem ____ morre.</del></li>
<li><del datetime="2017-06-06">Escrever um artigo</del></li>
<li>Reservar uma mesa</li>
</ul>
<button aria-label="Close">X</button>

7. Use roles quando necessário (~1 hora)

<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
Button
</a>


function handleBtnClick(event) {
// Faz algo...
}

function handleBtnKeyPress(event) {
// Verifica se `barra de espaço`
// ou `enter` foram usados
if (event.keyCode === 32 || event.keyCode === 13) {
// Previne a ação padrão, no caso da barra de espaço
// irá previnir o navegador de realizar o scroll
event.preventDefault();

// Faz algo...

}
}

8. Elementos escondidos (~1 hora)

.visually-hidden { 
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

9. Siga os padrões de acessibilidade da web (~30 minutos por semana)

10. Auditoria e revisão (~3 horas)

Experiência da Aerolab com acessibilidade na web

Finalizando

Créditos

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store