Acessibilidade

ACESSIBILIDADE garantindo usabilidade para nós mesmos

Porquê acessibilidade não é altruísmo!

Por que se preocupar com acessibilidade?

1. É lei. Decreto de lei nº 5.296 (dez/2004)

2. Público deficiente é alto

190 milhões de brasileiros. Censo 2010 45 milhões (23,9%) é
deficiente.

3. Atender todo tipo pessoa

Pessoa com algum tipo de deficiência física, visual e/ou auditiva.

Pessoas com mais idade.

Pessoas com pouca ou nenhuma escolaridade.

Pessoas com dificuldade e/ou medo da tecnologia.

E além desse grupo?

"Nesse mundo mobile, somos todos Daltónicos e sofremos do Mal
de Parkinson" - LULI RADFAHRER

Nós não temos controle sobre nosso usuário!

Tem que fazer parte do nosso dia-a-dia!

Beleza, mas… e na prática?

WCAG Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG20-TECHS/Overview.html

General Techniques 200+ técnicas http://www.w3.org/TR/WCAG20-TECHS/general.html

1. Fazer com que o primeiro link da página seja
uma âncora para o conteúdo. <a href=“#content_scheme”>Ir para o conteúdo</a>

2. Adicionar texto informativo em formulários. <label> <input type="text" name="cpf"
required class="required"/> <span class="hidden">Campo CPF, obrigatório o preenchimento.</small> </label>

3. Disponibilizar breadcrumbs.

4. Fornecer uma página com o sitemap do site.

5. Disponibilizar uma versão em áudio do conteúdo.

6. Disponibilizar alguma forma de correção de dados.

7. Salvar dados de sessões perdidas.

8. Validar o código da página.

9. Prover um campo para busca.

10. Disponibilize todas as funções da página via teclado

11. Sempre, SEMPRE forneça feedback.

90+ http://www.w3.org/TR/WCAG20-TECHS/html.html HTML Techniques

1. Criar uma ordem lógica da tecla TAB, via links,
forms e objetos. <form action="/save" method="POST"> <label> <input type="text" name="login" required class="required" tabindex="1"/> <span class="hidden">Campo Login, obrigatório o preenchimento.</small> </label> ! <label> <input type="text" name=“nome" /> <span class="hidden">Campo Nome.</small> </label> ! <label> <input type="password" name="senha" required class="required" tabindex="2" /> <span class="hidden">Campo Senha, obrigatório o preenchimento.</small> </label> </form>

2. Prover abreviações na página. <p>Welcome to the <abbr title="World
Wide Web">WWW</abbr>!</p>

3. Use o atributo longdesc. <p><img src="chart.gif" alt="a complex chart"
longdesc="chartdesc.html"/></p>

4. Use a tag kbd. <p>Você deve utilizar a tecla
<kbd>ESC</kbd> para encerrar o aplicativo</p>

5. Use o atributo lang na tag html. <html lang=“pt-BR">

6. Use a tag optgroup em selects <form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label> <select id="food" name="food"> <optgroup label="Fruits"> <option value="1">Apples</option> <option value="3">Bananas</option> <option value="4">Peaches</option> <option value="5">...</option> </optgroup> <optgroup label="Vegetables"> <option value="2">Carrots</option> <option value="6">Cucumbers</option> <option value="7">...</option> </optgroup> </select> </form>

www.w3.org/TR/WCAG20-TECHS/

eMag 3.0 Modelo de Acessibilidade em Governo Eletrônico http://emag.governoeletronico.gov.br/emag/

Intro to WAI-ARIA Web Accessibility Initiative - Accessible Rich Internet
Applications http://www.w3.org/WAI/intro/aria

Roles <input type="image" src="thumb.gif" alt="Efetividade" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42
percent" aria-labelledby="leffective">

States and Properties <input type="image" src="thumb.gif" alt="Efetividade" role="slider" aria-valuemin=“0" <!—-
Armazena o menor valor possível —-> aria-valuemax=“100" <!—- Armazena o maior valor possível —-> aria-valuenow=“42" <!—- Armazena o valor atual —-> aria-valuetext="42 percent”<!—- Armazena o texto do widget —-> aria-labelledby=“eftvdd" <!—- id do label com a descrição —-> > !

Document Landmark Roles

Live Regions aria-live="off" aria-live aria-live="polite" aria-live="assertive" aria-atomic aria-atomic="false" aria-atomic="true" aria-busy
aria-busy="false" aria-busy="true" aria-relevant aria-relevant="additions" aria-relevant="removals" aria-relevant="text" aria-relevant="all"

Internet Explorer 8+ Browsers Opera 9.5+ Chrome Tecnologias Assistivas JAWS
7.1+ Window-Eyes 5.5+ Firefox 1.5+ NVDA Zoomtext 9+ Suporte

www.w3.org/WAI/intro/aria

Referências: http://www.slideshare.net/horacio.soares/frontend-com-acessibilidade-frontinsampa-nov-2012 ! http://www.slideshare.net/reinaldoferraz/acessibilidade-na-web-modo-jedi-master ! http://www.w3.org/ ! http://brunotorres.net/acessibilidade-nao-e-altruismo ! http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
! http://dev.opera.com/articles/view/introduction-to-wai-aria/

guilhermepontes.com ! ! @guiiipontes /in/guilhermepontes http://bit.do/acessibilidade

Obrigado! !

Acessibilidade

Acessibilidade

More Decks by guilherme

Other Decks in Technology

Featured

Transcript