acessibilidade na web: construíndo páginas para pessoas e não só para máquinas
TRANSCRIPT
Acessibilidade na Web
Desenvolvendo para pessoas e não só para máquinas
Reinaldo Ferraz – W3C Brasil - CEWEB.br
24% 45.623.910 pessoas
Censo 2010
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
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.
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
Princípio 1: Perceptível
Princípio 2: Operável
Princípio 3: Compreensível
Princípio 4: Robusto
Princípios do WCAG
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
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
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
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
Não faça isso: <h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
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>
<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>
<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>
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
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...<h2>
<h3>...</h3>
<h4>...</h4>
<h2>...</h2>
<h3>...</h3>
<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>
<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>
<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>
<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>
<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>
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
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