Top Banner
Acessibilidade na Web Desenvolvendo para pessoas e não só para máquinas Reinaldo Ferraz W3C Brasil - CEWEB.br
103

Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Jan 15, 2017

Download

Internet

Reinaldo Ferraz
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Acessibilidade na Web

Desenvolvendo para pessoas e não só para máquinas

Reinaldo Ferraz – W3C Brasil - CEWEB.br

Page 2: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

@reinaldoferraz

Slideshare.com/reinaldoferraz

Page 3: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 4: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 5: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Acessibilidade na Web: A quem se destina?

Page 6: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Cegos - daltônicos - baixa visão

Page 7: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Deficiência auditiva

Page 8: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Deficiência motora

Page 9: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 10: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

24% 45.623.910 pessoas

Censo 2010

Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm

Page 11: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm

LEI Nº 13.146, DE 6 DE JULHO DE 2015.

Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou

representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência,

garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.

Page 12: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

LEI Nº 13.146, DE 6 DE JULHO DE 2015.

Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou

representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência,

garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.

Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm

Page 13: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

A Web foi feita para as pessoas

Page 14: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Andy Walker

Page 15: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Leonardo Gleisson

Page 16: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Ivy Bean

Page 17: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Neil Harbisson

http://www.youtube.com/watch?v=CvPOh0p9cf0

Page 18: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Acessibilidade na web

Porque não desenvolvemos

web sites acessíveis?

Algumas hipóteses:

Page 19: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Desconhecimento

Page 20: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 21: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 22: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 23: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 24: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 25: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Preconceito

Page 26: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 27: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Público alvo

Page 28: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 29: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Já testou o seu site?

Page 30: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Foto: Flickr.com - Baddog_

Page 31: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 32: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Beneficia pessoas com deficiência

Page 33: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Acessibilidade na web: A quem se destina?

Acessibilidade é para todos !

Page 34: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 35: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Você acha que tem controle sobre o seu usuário?

Page 36: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

NÃO

Page 37: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Você não tem controle sobre o seu usuário

Page 38: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

É muito caro! O prazo é curto! Não sei fazer! Dá muito trabalho!

Page 39: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Acessibilidade deve fazer parte da rotina

Page 40: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/

Page 41: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Princípio 1: Perceptível

Princípio 2: Operável

Princípio 3: Compreensível

Princípio 4: Robusto

Princípios do WCAG

Page 42: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.

http://www.w3.org/WAI/intro/aria

Page 43: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip

73 ROLES (Ou Papéis)

alert Alertdialog button checkbox dialog menu menubar menuitem option ...

http://www.w3.org/TR/wai-aria/roles#role_definitions

Page 44: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

aria-activedescendant aria-atomic aria-autocomplete aria-busy (state) aria-checked (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-expanded (state) aria-flowto aria-grabbed (state)

35 States and Properties (Estados e Propriedades)

aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns ...

http://www.w3.org/TR/wai-aria/states_and_properties

Page 45: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.

Page 46: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 47: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

1. As WCAG utilizam a semântica do HTML para tornar o conteúdo acessível

2. ARIA são atributos que conseguem mudar a semântica dos elementos para tornar o conteúdo acessível

Page 48: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Quatro regras de WAI-ARIA

Page 49: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Regra nº 1

Não use ARIA (prefira os elementos semânticos do HTML)

Page 50: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Regra nº 2

Não mude a semântica dos elementos (apenas se você realmente precisar)

Page 51: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Não faça isso: <h1 role=button>heading button</h1>

Page 52: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Não faça isso: <h1 role=button>heading button</h1>

Faça isso:

<h1>

<button>heading button</button>

</h1>

Page 53: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Não faça isso: <h1 role=button>heading button</h1>

Faça isso:

<h1>

<button>heading button</button>

</h1>

Se não puder usar o elemento correto, faça isso:

<h1>

<span role=button>heading button</span>

</h1>

Page 54: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Regra nº 3

Todos os controles interativos devem ser acessíveis via teclado

Page 55: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Regra nº 4

Não use role="presentation" ou

aria-hidden="true“ em um elemento de foco visível

Page 56: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 57: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 1:

Uma galeria de imagens

Page 58: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<img src=“starwars.jpg”

alt=“Foto de Luke Skywalker no filme Star

Wars – O império contra ataca”>

Page 59: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

reinaldoferraz.com.br

Page 60: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 2:

Esconder conteúdo de um leitor de tela

Page 61: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<a href=“#”

role="presentation">

<img src=“starwars.jpg”

alt=“Foto de Luke Skywalker no filme Star

Wars – O império contra ataca”>

</a>

<a href=“#”

aria-hidden="true“>

<img src=“starwars.jpg”

alt=“Foto de Luke Skywalker no filme Star

Wars – O império contra ataca”>

</a>

Page 62: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<p aria-hidden="true“>

Conteúdo que deve estar escondido não deve

permitir foco via teclado. Utilizar role

presentation somente tira a semântica do

elemento.

</p>

Page 63: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Formas de ocultar elementos e efeitos na acessibilidade

CSS Efeito na tela Efeito na acessibilidade

visibility:hidden; O elemento fica oculto, mas continua a ocupar o espaço que normalmente ocuparia

O conteúdo é ignorado pelos leitores de tela

display:none; O elemento fica oculto e não ocupa espaço

O conteúdo é ignorado pelos leitores de tela

height: 0; width: 0; overflow: hidden;

O elemento fica oculto e não ocupa espaço

O conteúdo é ignorado pelos leitores de tela

text-indent: -999em;

O conteúdo é movido para "fora da tela", não sendo mais visível, mas links podem ser focalizados de maneira imprevisível

Os leitores de tela acessam o conteúdo, mas somente texto e elementos inline

position: absolute; left: -999em;

O conteúdo é removido de sua posição, não ocupando espaço e é movido para "fora da tela", ficando oculto

Os leitores de tela acessam o conteúdo

Fonte: http://emag.governoeletronico.gov.br/cursodesenvolvedor/desenvolvimento-web/praticas-web-acessivel-apresentacao-design.html

Page 64: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 65: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 3:

Uma página cheia de destaques

Page 66: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 67: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 68: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<a href=“#contents”>Saltar</a>

<elemento id=“contents”>

Page 69: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h2>...<h2>

<h3>...</h3>

<h4>...</h4>

<h2>...</h2>

<h3>...</h3>

Page 70: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

html5accessibility.com

Page 71: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<input type=“email”> <input type=“url”> <input type=“tel”>

Page 72: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 73: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 74: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 4:

Menu e Submenus

Page 75: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

CSS:

a:hover

a:focus

JavaScript:

onmouseover="#"

onfocus="#"

onmouseout="#"

onblur="#"

Page 76: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 77: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 5:

Formulários

Page 78: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<fieldset>

<legend>

Identifique-se!

</legend>

<label for="text">

Nome</label>

<input id="text" type="text"

aria-describedby="comp">

<p id="comp">

Preencha seu nome

de verdade, viu?</p>

</fieldset>

Page 79: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<fieldset>

<legend>

Identifique-se!

</legend>

<label for="text">

Nome</label>

<input id="text" type="text"

aria-describedby="comp">

<p id="comp">

Preencha seu nome

de verdade, viu?</p>

</fieldset>

Page 80: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<fieldset>

<legend>

Identifique-se!

</legend>

<label for="text">

Nome</label>

<input id="text" type="text"

aria-describedby="comp">

<p id="comp">

Preencha seu nome

de verdade, viu?</p>

</fieldset>

Page 81: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<fieldset>

<legend>

Identifique-se!

</legend>

<label for="text">

Nome</label>

<input id="text" type=“range"

aria-describedby="comp">

<p id="comp">

Preencha seu nome

de verdade, viu?</p>

</fieldset>

Page 82: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

html5accessibility.com

Page 83: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 84: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 6:

Utilização de cores

Page 85: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 86: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Visão normal

Page 87: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Protanopia (Deficiências em vermelho)

Page 88: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Deuteranopia (Deficiências em verde)

Page 89: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Tritanopia (Deficiências em azul)

Page 90: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Acromatopsia (Deficiências todas as cores)

Page 91: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 92: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 93: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Page 94: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 95: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 7:

Múltiplos idiomas

Page 96: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 97: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Situação 8:

Elementos dinâmicos

Page 98: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

<button role=“button” aria-pressed=“false”>

<img src=“off.png” alt=“Status Desligado”>

</button>

<button role=“button” aria-pressed=“true”>

<img src=“on.png” alt=“Status Ligado”>

</button>

Page 99: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Live Regions

Page 100: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Exemplos

Page 101: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Dicas importantes para melhorar a acessibilidade

• Validação de Markup

• Siga as diretrizes de acessibilidade (WCAG e ARIA)

• Validação automática de acessibilidade

• Verificação de avisos

• Teste com tecnologias assistivas

• Coloque a acessibilidade na rotina do desenvolvimento

Page 102: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

http://premio.ceweb.br/

Page 103: Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

Obrigado

[email protected] @reinaldoferraz

“Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.”

Adaptado da arq. Thais Frota