Acessibilidade web

Por que tenho que me importar?

Mac Giovanni

zeropixel.com.br

Co-Fundador do Zeropixel,

Organizador do Alagoas Social Media, e Alagoas Dev Day

Front-end Developer e UX/UI Designer.

Acessibilidade

Possibilidade e condição de alcance, percepção e entendimento para a utilização com segurança e autonomia de edificações, espaço, mobiliário, equipamento urbano e elementos.

ABnT nBR 9050:2004 [3], item 3.1

Alcance
Percepção
Entendimento

6,2%

da população brasileira

tem algum tipo de deficiência

45,6 milhões

de deficientes no Brasil

4 grupos de deficiências

Auditiva

Visual

Física

Intelectual

Diferentes Contextos

Baixa visão
Daltonismo
Deficiência motora

Limitações cognitivas
Deficiência auditiva
Limitações da idade.

Acessibilidade = Eliminar as barreiras

A Web é para Todos independente do público alvo do projeto

Acessibilidade web

Por que mesmo?

Número de celulares no Brasil chegou a 283,4 milhões em março de 2015

Tem mais celular do que gente

Celular é principal meio de acesso à internet no Brasil segundo o IBGE

entre 9 e 17 anos se conectam pelo celular

82% de usuários

Muita gente conectada

+

pessoas com algum tipo de deficiência

=

precisamos Agir

A formula é simples.

pensar em acessibilidade é pensar em Experiência do Usuário

O famigerado UX

Então, como começar?

Funcional

Leitores de tela,

Navegação via teclado,

Tradutores para línguas de sinais

Audio descrição

Informação

Pessoas com dificuldade de compreensão ou aprendizagem, foco ou atenção

Indicar o progresso das telas

para criar previsibilidade e rotina

Indicativos de localização e navegação

Reforço de conteúdo com

images relacionadas aos botões e links

Páginas mais simples

para dar mais foco e atenção

Habilitar possibilidades de customização

para melhorar a legibilidade

Visibilidade das ações de formulários

para dar um feedback ao usuário

Procurar previnir erros

aumentando a área de clique

ícones devem fazer sentido

e comunicar exatamente a mesma coisa

que o texto que o acompanha

Popups e refresh automático de tela!?

Facilite a escolha e a navegação

para o usuário

Facilite a escolha e a navegação

para o usuário

Ah! mas tudo isso ai

a gente já faz

Ah! Isso faz parte de um projeto web padrão

Ah! Adequar isso tudo dá muito trabalho

Sabia que fazer sites acessíveis melhora o

SEO do site?

Ah, agora SIM,

quero fazer!

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="utf-8" />
  <title>Um pequeno documento</title>
</head>

<body>
  <h1>Cabeçalho principal do meu documento</h1>
  <p>Vejam! Estou escrevendo código</p>
</body>

</html>

Declarar a linguagem do documento


<body>

  <h1>Eu sou o Cabeçalho principal do meu documento</h1>

  <p>Vejam! Estou escrevendo código</p>
  
</body>

Ter um, apenas UM <h1> na página

para declarar o título da página

Sempre associar <label>

aos controles de formulário

<form>

  <div>
    <label for="exampleInputName2">Nome</label>
    <input type="text" id="exampleInputName2" placeholder="Fulano de Tal">
  </div>

  <button type="submit">Enviar dados preenchidos</button>

</form>

Usar adequadamente a semântica dos elementos HTML


<body>

  <h1>Eu sou o Cabeçalho principal do meu documento</h1>

  <p>Vejam! Estou escrevendo código</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <br>
  <br>
  <br>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
</body>

Leitores de tela, SEO e HTML semântico são amigos próximos.

Usar o atributo alt=""

para descrever a imagem


  <img src="menino-jogando-bola.jpg" alt="Imagem de um menino jogando bola">

Criar link no site para o

usuário ir direto para o conteúdo

  <a id="skippy" href="#content">
      <span>Pular para o conteúdo</span>
  </a>

  <div class="content"></div>

<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">

para marcar as seções do site

Landmark Roles ARIA

NUNCA nomear links soltos com chamadas que não fazem sentido com o contexto da leitura

Criamos um e-book fantástico, clique aqui para fazer o download .

Criamos um e-book fantástico,

faça o download do pdf.

Não perca a oportunidade, clique aqui para se cadastrar

Não perca a oportunidade,

se cadastre agora na farofa design

Não sabe sua senha?

Clique aqui para recuperar.

Não sabe sua senha?

Clique aqui para recuperar.

Recuperar minha Senha.

Criar contraste adequado entre texto e background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, repellat, neque. Perspiciatis tenetur eos fugit qui at, eius, temporibus voluptates, iure placeat illum enim est quas cum laboriosam rerum praesentium!

A principal estratégia para induzir e reforçar a mensagem visual é o contraste.

Donis A. em Sintaxe da Linguagem Visual

Não confiar apenas nas cores

para passar uma informação

Clique no botão vermelho

para cancelar sua queda no abismo

Lindo né?

#sqn

Pensar em cores para acessibilidade não é pensar em apenas em daltônicos,

é pensar em todos os usuários.

Ícones e textos ajudam a garantir

que a informação será passada corretamente

Clique no botão vermelho

para cancelar sua queda no abismo

Cancelar

Aprovar

Já ouvi coisas como…

"Se um ícone precisa de descrição então o ícone não está bem feito”

Acessibilidade

é assunto para todos nós

E se fosse você?

tratar as pessoas como nós queremos ser tratados ou agir como se só existisse a gente no mundo.

Dois caminhos.

A palavrinha mágica é: E M P A T I A

Obrigado!

Mac Giovanni

@maclevison

zeropixel.com.br

Co-Fundador do Zeropixel,

Organizador do Alagoas Social Media, e Alagoas Dev Day

Front-end Developer e UX/UI Designer.