acessibilidade na prática
TRANSCRIPT
![Page 1: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/1.jpg)
ACESSIBILIDADEWEB
NA PRÁTICA
![Page 2: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/2.jpg)
TIAGO RAFAELL. NEVES
about.me/[email protected]
#quemsoueu
FATEC JAHU – Informática c/ Gestão Prod. Ind.UNINTER – MBA em Adm. e Marketing
![Page 3: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/3.jpg)
www.w3corp.com.br
#quemsoueu
![Page 4: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/4.jpg)
1996
#comochegueiaqui * Imagem: Google Imagens
![Page 5: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/5.jpg)
1999</>
#comochegueiaqui * Aparência do site em 2002
![Page 6: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/6.jpg)
HTML3HTML4.01
HTML5<1999/>
<2011/>
#comochegueiaqui
![Page 7: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/7.jpg)
Uso do CSS
Fim das TABELASTABLELESS
Importância da SEMÂNTICA#comochegueiaqui
![Page 8: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/8.jpg)
ACESSIBILIDADE
#comochegueiaqui
![Page 9: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/9.jpg)
2013PRIMEIROPROJETO
2014ESTUDOS
E MAIS ESTUDOS...
</>
#comochegueiaqui
![Page 10: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/10.jpg)
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.
![Page 11: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/11.jpg)
![Page 12: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/12.jpg)
![Page 13: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/13.jpg)
www.casajau.com.br
![Page 14: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/14.jpg)
4ª EDIÇÃOInscrições até 11/05/2016
Prêmio até R$5.000,00http://premio.w3c.br
![Page 15: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/15.jpg)
ACESSIBILIDADE?
![Page 16: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/16.jpg)
“ 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
![Page 17: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/17.jpg)
Acessibilidadeé para quem?
![Page 18: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/18.jpg)
TODOS(Mesmo que seja por um curto espaço de tempo)
![Page 19: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/19.jpg)
QUESTÕES VISUAIS
Cegueira total ou graveProblemas visuais parciaisCegueira temporáriaDaltonismo
![Page 20: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/20.jpg)
QUESTÕES AUDITIVAS
Surdez total
Surdez parcial
Dispositivos sem som
![Page 21: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/21.jpg)
QUESTÕES MOTORAS
Mobilidade reduzida temporariamente
Navegação por tecladoNavegação por apontador
Tetraplegia
Problemas na coordenação finaTremores
![Page 22: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/22.jpg)
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
![Page 23: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/23.jpg)
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)
![Page 24: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/24.jpg)
</>
![Page 25: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/25.jpg)
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
![Page 26: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/26.jpg)
#1SEMÂNTICA
![Page 27: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/27.jpg)
DIV - topo
DIV - menu DIV - corpo
DIV - rodape
ERRADO
![Page 28: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/28.jpg)
HEADER
ASIDE ARTICLE
FOOTER
![Page 29: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/29.jpg)
<H1>
HIERARQUIA DE TÍTULOS
<H2><H3>
<H4><H5>
<H6>
![Page 30: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/30.jpg)
<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>
![Page 31: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/31.jpg)
#2SEGUIR PADRÕES
![Page 32: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/32.jpg)
www.totalvalidator.comhttps://validator.w3.org
![Page 33: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/33.jpg)
#3LINGUAGEM
![Page 34: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/34.jpg)
<html lang=“pt-br”>Linguagem no formato ISO 639-1
<p lang=“en-us”>Hardware</p>
![Page 35: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/35.jpg)
#4LINKS E TÍTULOS
![Page 36: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/36.jpg)
<a href=‘#’ title=“ABC”>No HTML5 o atributo TITLE pode ser
aplicado em qualquer elemento
<attr title=“World Wide Web”>WWW</attr>
![Page 37: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/37.jpg)
#5IMAGENS
![Page 38: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/38.jpg)
<img src=“foto.jpg” alt=“” />PÉSSIMO
![Page 39: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/39.jpg)
<img src=“foto.jpg” alt=“Paisagem” />RUIM
![Page 40: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/40.jpg)
<img src=“foto.jpg” alt=“Elefantes paisagem” />REGULAR
![Page 41: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/41.jpg)
<img src=“foto.jpg” alt=“Dois elefantes caminhando em uma
paisagem árida com pôr-do-sol ao fundo” />
![Page 42: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/42.jpg)
DICAPara imagens apenas estéticas, deixe o atributo ALT em branco e use o aria-hidden
![Page 43: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/43.jpg)
#7NAVEGAÇÃO
![Page 44: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/44.jpg)
Mostrar qual é o link ativopara navegação pelo teclado
IDENTIFICAR LINK ATIVO
a:focus {outline: thin solid #00F;
}
![Page 45: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/45.jpg)
O primeiro item do site deveser um link para o conteúdo principal
da página em questão.
CONTEÚDO PRINCIPAL
![Page 46: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/46.jpg)
#8CONTRASTE
![Page 47: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/47.jpg)
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/
![Page 48: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/48.jpg)
#9FORMS
![Page 49: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/49.jpg)
<label for=“nome”>Nome completo
</ul><input type=“text” id=“nome” title=“” />
![Page 50: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/50.jpg)
searchemailurltelnumber
rangedatemonthweektime
datetimedatetime-localcolor
<input type=“
![Page 51: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/51.jpg)
#10WAI-ARIA
![Page 52: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/52.jpg)
<ul role=“navigation”><li role=“menubar”>
<a href=“#” title=“” role=“menuitem”>MENU
</a></li>
</ul>
![Page 53: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/53.jpg)
role=“banner”
Pode ter apenas 1 por página.Define a área com informações sobreo site / empresa
![Page 54: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/54.jpg)
role=“main”
Pode ter apenas 1 por página.Define a área com as informaçõesprincipais (conteúdo) da página.
![Page 55: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/55.jpg)
role=“search”
Pode ter vários por página.Define a área com uma ferramentade pesquisa do site
![Page 56: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/56.jpg)
aria-expanded=“true|false”
Define o estado de um elementodo “expansível”, como uma tabelaou menu tipo “acordeon”
![Page 57: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/57.jpg)
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>
![Page 58: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/58.jpg)
aria-haspopup=“true|false”
Define se um elemento tem Sub-itens no esquema popup (como um menu)
![Page 59: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/59.jpg)
Como façopara testar?
![Page 60: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/60.jpg)
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
![Page 61: Acessibilidade na Prática](https://reader035.vdocuments.com.br/reader035/viewer/2022062821/58885cf41a28abad0d8b4bdd/html5/thumbnails/61.jpg)
http://intervox.nce.ufrj.br/dosvox/http://www.freedomscientific.com/Products/Blindness/JAWShttp://www.nvaccess.org/
LEITORES DE TELA