acessibilidade na prática
TRANSCRIPT
ACESSIBILIDADEWEB
NA PRÁTICA
TIAGO RAFAELL. NEVES
about.me/[email protected]
#quemsoueu
FATEC JAHU – Informática c/ Gestão Prod. Ind.UNINTER – MBA em Adm. e Marketing
www.w3corp.com.br
#quemsoueu
1996
#comochegueiaqui * Imagem: Google Imagens
1999</>
#comochegueiaqui * Aparência do site em 2002
HTML3HTML4.01
HTML5<1999/>
<2011/>
#comochegueiaqui
Uso do CSS
Fim das TABELASTABLELESS
Importância da SEMÂNTICA#comochegueiaqui
ACESSIBILIDADE
#comochegueiaqui
2013PRIMEIROPROJETO
2014ESTUDOS
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.
www.casajau.com.br
4ª EDIÇÃOInscrições até 11/05/2016
Prêmio até R$5.000,00http://premio.w3c.br
ACESSIBILIDADE?
“ O poder da WEB está em sua universalidade. Ser acessada por todos,independente de deficiência, é um aspecto essencial.”
Sir Tim Berners-LeeInventor da WWW
* Fonte Wikipedia - 2014
Acessibilidadeé para quem?
TODOS(Mesmo que seja por um curto espaço de tempo)
QUESTÕES VISUAIS
Cegueira total ou graveProblemas visuais parciaisCegueira temporáriaDaltonismo
QUESTÕES AUDITIVAS
Surdez total
Surdez parcial
Dispositivos sem som
QUESTÕES MOTORAS
Mobilidade reduzida temporariamente
Navegação por tecladoNavegação por apontador
Tetraplegia
Problemas na coordenação finaTremores
PRINCIPAISBARREIRAS
* 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
MAIORESBENEFÍ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ÇÃOeMAG
http://emag.governoeletronico.gov.br/
WCAG 2.0https://www.w3.org/Translations/WCAG20-pt-PT/
WAI-ARIAhttps://www.w3.org/WAI/
Cartilha Acessibilidade WEBhttp://goo.gl/YZnoVm
#1SEMÂNTICA
DIV - topo
DIV - menu DIV - corpo
DIV - rodape
ERRADO
HEADER
ASIDE ARTICLE
FOOTER
<H1>
HIERARQUIA DE TÍTULOS
<H2><H3>
<H4><H5>
<H6>
<ul>EXEMPLO DE MENU
<li><a href=“#” title=“”>MENU</a></li><li><a href=“#” title=“”>MENU</a></li><li><a href=“#” title=“”>MENU</a></li>
</ul>
#2SEGUIR PADRÕES
www.totalvalidator.comhttps://validator.w3.org
#3LINGUAGEM
<html lang=“pt-br”>Linguagem no formato ISO 639-1
<p lang=“en-us”>Hardware</p>
#4LINKS E TÍTULOS
<a href=‘#’ title=“ABC”>No HTML5 o atributo TITLE pode ser
aplicado em qualquer elemento
<attr title=“World Wide Web”>WWW</attr>
#5IMAGENS
<img src=“foto.jpg” alt=“” />PÉSSIMO
<img src=“foto.jpg” alt=“Paisagem” />RUIM
<img src=“foto.jpg” alt=“Elefantes paisagem” />REGULAR
<img src=“foto.jpg” alt=“Dois elefantes caminhando em uma
paisagem árida com pôr-do-sol ao fundo” />
DICAPara imagens apenas estéticas, deixe o atributo ALT em branco e use o aria-hidden
#7NAVEGAÇÃO
Mostrar qual é o link ativopara navegação pelo teclado
IDENTIFICAR LINK ATIVO
a:focus {outline: thin solid #00F;
}
O primeiro item do site deveser um link para o conteúdo principal
da página em questão.
CONTEÚDO PRINCIPAL
#8CONTRASTE
Manter uma relação adequadade contraste entre a fonte e o fundo.
CONTRASTE MÍNIMO
Use o software Colour Contrast Analyserhttps://www.paciellogroup.com/resources/contrastanalyser/
#9FORMS
<label for=“nome”>Nome completo
</ul><input type=“text” id=“nome” title=“” />
searchemailurltelnumber
rangedatemonthweektime
datetimedatetime-localcolor
<input type=“
#10WAI-ARIA
<ul role=“navigation”><li role=“menubar”>
<a href=“#” title=“” role=“menuitem”>MENU
</a></li>
</ul>
role=“banner”
Pode ter apenas 1 por página.Define a área com informações sobreo site / empresa
role=“main”
Pode ter apenas 1 por página.Define a área com as informaçõesprincipais (conteúdo) da página.
role=“search”
Pode ter vários por página.Define a área com uma ferramentade pesquisa do site
aria-expanded=“true|false”
Define o estado de um elementodo “expansível”, como uma tabelaou 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)
Como façopara testar?
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/JAWShttp://www.nvaccess.org/
LEITORES DE TELA
