Acessibilidade na Prática

TIAGO RAFAEL
L. NEVES
about.me/rafaneves
tiago@w3c.ae
#quemsoueu
FATEC JAHU – Informática c/ Gestão Prod. Ind.
UNINTER – MBA em Adm. e Marketing

1996
#comochegueiaqui * Imagem: Google Imagens

1999
</>
#comochegueiaqui * Aparência do site em 2002

HTML3
HTML4.01
HTML5
<1999/>
<2011/>
#comochegueiaqui

Uso do CSS
Fim das TABELAS
TABLELESS
Importância da SEMÂNTICA
#comochegueiaqui

ACESSIBILIDADE
#comochegueiaqui

2013
PRIMEIRO
PROJETO
2014
ESTUDOS
E MAIS ESTUDOS...
</>
#comochegueiaqui

2014
Premiação realizada pelo W3C Brasil, em parceria com o NIC.br, CGI.br,
AACD e Ministério do Planejamento e Secretaria dos Direitos da Pessoa
com Deficiência - São Paulo.
Visa estimular e fomentar o desenvolvimento de sites e sistemas acessíveis.

4ª EDIÇÃO
Inscrições até 11/05/2016
Prêmio até R$5.000,00
http://premio.w3c.br

“ O poder da WEB está em
sua universalidade. Ser
acessada por todos,
independente de deficiência,
é um aspecto essencial.”
Sir Tim Berners-Lee
Inventor da WWW
* Fonte Wikipedia - 2014

TODOS
(Mesmo que seja por um curto espaço de tempo)

QUESTÕES VISUAIS
Cegueira total ou grave
Problemas visuais parciais
Cegueira temporária
Daltonismo

QUESTÕES AUDITIVAS
Surdez total
Surdez parcial
Dispositivos sem som

QUESTÕES MOTORAS
Mobilidade reduzida temporariamente
Navegação por teclado
Navegação por apontador
Tetraplegia
Problemas na coordenação fina
Tremores

PRINCIPAIS
BARREIRAS
* Falta de documentação em português
* Documentação muito técnica, não amigável
* Pouca divulgação sobre acessibilidade
* Pequena demanda por parte dos clientes
* Baixo conhecimento dos desenvolvedores

MAIORES
BENEFÍCIOS
* Responsabilidade Moral
* Recompensa Financeira
* 24% dos brasileiros tem alguma deficiência**
* Diferenciação no mercado WEB
#devs
** Fonte: IBGE 2010
* É LEI! (Artigo 63 do Estatuto da Pessoa com Deficiência)

DOCUMENTAÇÃO
eMAG
http://emag.governoeletronico.gov.br/
WCAG 2.0
https://www.w3.org/Translations/WCAG20-pt-PT/
WAI-ARIA
https://www.w3.org/WAI/
Cartilha Acessibilidade WEB
http://goo.gl/YZnoVm

DIV - topo
DIV - menu DIV - corpo
DIV - rodape
ERRADO

<H1>
HIERARQUIA DE TÍTULOS
<H2>
<H3>
<H4>
<H5>
<H6>

<ul>
EXEMPLO DE MENU
<li><a href=“#” title=“”>MENU</a></li>
</ul>

www.totalvalidator.com
https://validator.w3.org

<html lang=“pt-br”>
Linguagem no formato ISO 639-1
<p lang=“en-us”>Hardware</p>

<a href=‘#’ title=“ABC”>
No HTML5 o atributo TITLE pode ser
aplicado em qualquer elemento
<attr title=“World Wide Web”>WWW</attr>

<img src=“foto.jpg” alt=“” />PÉSSIMO

<img src=“foto.jpg” alt=“Paisagem” />RUIM

<img src=“foto.jpg” alt=“Elefantes paisagem” />REGULAR

DICA
Para imagens apenas estéticas, deixe o
atributo ALT em branco e use o aria-hidden

Mostrar qual é o link ativo
para navegação pelo teclado
IDENTIFICAR LINK ATIVO
a:focus {
outline: thin solid #00F;
}

O primeiro item do site deve
ser um link para o conteúdo principal
da página em questão.
CONTEÚDO PRINCIPAL

Manter uma relação adequada
de contraste entre a fonte e o fundo.
CONTRASTE MÍNIMO
Use o software Colour Contrast Analyser
https://www.paciellogroup.com/resources/contrastanalyser/

<label for=“nome”>
Nome completo
</ul>
<input type=“text” id=“nome” title=“” />

search
email
url
tel
number
range
date
month
week
time
datetime
datetime-local
color
<input type=“

role=“banner”
Pode ter apenas 1 por página.
Define a área com informações sobre
o site / empresa

role=“main”
Pode ter apenas 1 por página.
Define a área com as informações
principais (conteúdo) da página.

role=“search”
Pode ter vários por página.
Define a área com uma ferramenta
de pesquisa do site

aria-expanded=“true|false”
Define o estado de um elemento
do “expansível”, como uma tabela
ou menu tipo “acordeon”

aria-describeby=“elemento”
Define um elemento que tem a
descrição para um outro elemento...
<button aria-describeby=“descreve”...>
...
<div id=“descreve”> Descrição do item</div>

aria-haspopup=“true|false”
Define se um elemento tem
Sub-itens no esquema popup
(como um menu)

http://wave.webaim.org/
http://www.sidar.org/hera/
http://www.dasilva.org.br/
http://www.cynthiasays.com/
http://www.acessibilidade.net/web/avalweb.php
TESTES AUTOMATIZADOS

http://intervox.nce.ufrj.br/dosvox/
http://www.freedomscientific.com/Products/Blindness/JAWS
http://www.nvaccess.org/
LEITORES DE TELA

TIAGO RAFAEL L. NEVES
about.me/rafaneves
tiago@w3c.ae
slideshare.net/labombajau
OBRIGADO!

Acessibilidade na Prática

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (15)

Semelhante a Acessibilidade na Prática

Semelhante a Acessibilidade na Prática (20)

Acessibilidade na Prática

Notas do Editor