7 masters acessibilidade
Post on 13-Feb-2017
171 Views
Preview:
TRANSCRIPT
© 2012 IBM Corporation
Acessibilidade na IBM
Alysson Moreira – Acessibilidade na IBM
21 Agosto 2012
© 2012 IBM Corporation2
“once a technology starts to run, it happens in many places”
Ethan McCarty, Senior Manager, Digital and Social Strategy at IBM
© 2012 IBM Corporation3
Agenda
�Geradora de conteúdo: A IBM e seus números
�Um olhar sobre o ambiente: o w3
�Educação
�Técnicas
�Ferramentas
�Desafios atuais
Acessibilidade na IBM
© 2012 IBM Corporation4
A IBM com geradora de conteúdo
� Em torno de 400,000 IBMers (e crescendo)
� 100% base utilizando o w3
� +30.000 blogs internos
� +20.000 wikis
� 100.000 users frequentes/semana em wikis e blogs
� Preocupação estratégica com acessibilidade
Source: http://www.melcrum.com/research/harness-digital-technologies/connecting-global-organization-through-ibms-intranet
Acessibilidade na IBM
© 2012 IBM Corporation5
O w3 On Demand Workplace
� 27 anos de história
� 5.5 milhões de páginas (2007)
� Intranet World's Top Ten 2006 pelo Nielsen Group
� Uma das 10 Intranets que definiram a indústria pelo IBF
� Gera savings anuais de $2B
Source: http://www.ibforum.com/2012/06/12/10-intranets-that-have-defined-the-industry-from-10-years-of-ibf/http://www-03.ibm.com/press/us/en/pressrelease/19156.wss
Acessibilidade na IBM
© 2012 IBM Corporation6
A história do w3
� 80’s: mirror do www.ibm.com
� 1996: W3 On demand Workplace (17.800 pageviews/dia)
� 1998: v3.0 e bluepages
� 2000: v6
� 2002: w3v8
� 2004: w3v8 produção
� 2010: v17 (alpha)
� Sempre acessível
Acessibilidade na IBM
© 2012 IBM Corporation7
A história do w3
Acessibilidade na IBM
© 2012 IBM Corporation8
IBM Usable access
Oferecer acessibilidade com usabilidade embarcado na experiência, possibilitando pessoas com deficiências a
executar tarefas ou usar conteúdos em ambientes diversos com eficiência, satisfação e sucesso.
Acessibilidade na IBM
© 2012 IBM Corporation9
Premissas
� ~750M/1B no mundo com alguma deficiência – temporal ou permanente
� U.S. Rehabilitation Act Section 508
� Instrução corporativa CI-162 (1998)
� WCAG 2.0 do W3C WAI
� E-Mag
Acessibilidade na IBM
© 2012 IBM Corporation10
Educação
� Accessibility University
� Web developer roadmaps
� Human Ability & Accessibility Center
� Forums e wikis de acessibilidade
� Newsletters técnicos
Acessibilidade na IBM
© 2012 IBM Corporation11
Técnicas
� Interação via teclado: consistencia, lógica, intuição, customização, descoberta
� Manipulação direta tolerante
� Apresentação consistente, lógica e limpa
� Métodos alternativos competitivos
� Análise Usable Access
� UI e markup
Acessibilidade na IBM
Source: http://www-03.ibm.com/able/index.html http://www-03.ibm.com/able/news/html5.html
© 2012 IBM Corporation12
Ferramentas
� Client-side
� Server-side
� On Screen TTS
� ACTF aDesigner
� Rational Policy tester
Acessibilidade na IBM
Source: http://www.eclipse.org/actf/downloads/tools/aDesigner/index.phphttp://www-01.ibm.com/software/awdtools/tester/policy/accessibility/
© 2012 IBM Corporation13
7 a11y: Metodologias
� Validação on-the-fly do código com wave http://wave.webaim.org
� Use accessibility API's se possivel
� Criar uma biblioteca de elementos acessíveis (com ARIA se possivel) e reutilizar quando replicado. (ex. Tabelas)
� Utilizar bibliotecas com acessibilidade embarcada (ex. Dojo)
Acessibilidade na IBM
Source: https://dojotoolkit.org/reference-guide/1.8/dijit/a 11y/statement.htmlhttp://wave.webaim.org
© 2012 IBM Corporation14
7 a11y: Navegação
� Utilize atalhos via teclado com accesskey. Faça a associação lógica da tecla e dê o feedback visual: <a href="#" accesskey="A"><u>A</u>brir</a>
<a href="#" accesskey="S"><u>S</u>alvar</a>
<a href="#" accesskey="D"><u>D</u>eletar</a >
� Fornecendo via CSS a tecla de atalho:
<a href="#" accesskey="D">Deletar</a> <style>a[accesskey]:after {
content: "[" attr(accesskey) "]";}</style>
Acessibilidade na IBM
© 2012 IBM Corporation15
7 a11y: Conteúdo
� Utilize containers ocultos para adicionar informações para leitores de tela quando necessário (ex. css-sprites) <a class=”sprite nav contrib” accesskey="c"><sp an class=”access”>Adicionar contribuidor</span></a><style> .access{ position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */clip: rect(1px, 1px, 1px, 1px); }</style>
�
�
�
imagem do sprite
Acessibilidade na IBM
© 2012 IBM Corporation16
7 a11y: Tabelas com multiplos headers
<table summary="Esta tabela mostra idade e email do s presentes nas palestras do 7 masters."><caption> 7masters presença</caption><thead> <tr> <th id="nome">Nome</th> <th id="email">email</th> <th id="idade">Idade</th> </tr>
</thead> <tbody>
<tr> <th headers=”nome”>João</th> <td headers="email">joao@zinho.com</td> <td headers="idade">32</td> </tr>
...
Acessibilidade na IBM
© 2012 IBM Corporation17
7 a11y: Tabelas com scope
<thead><tr> <th scope="col"> Dept. Code/ Class Number</th> <th scope="col"> Section</th> …</tr>
</thead><tbody>
<tr> <th scope="row"> BIO 100</th> <td>1</td> …</tr> <tr>
</tbody>
Acessibilidade na IBM
© 2012 IBM Corporation18
Desafios
� Big data acessível
� ARIA em Canvas
Acessibilidade na IBM
© 2012 IBM Corporation19
Acessibilidade na IBM
Obrigado!
http://twitter.com/alyssonfranklin
http://br.linkedin.com/in/alyssonfrk
top related