O documento discute a acessibilidade na IBM, incluindo: 1) Uma visão geral da IBM e seu uso extensivo da web; 2) A história do intranet da IBM (w3) e seu compromisso com a acessibilidade; 3) Educação, técnicas e ferramentas de acessibilidade usadas na IBM.

1. © 2012 IBM Corporation
Acessibilidade na IBM
Alysson Moreira – Acessibilidade na IBM
21 Agosto 2012

2. © 2012 IBM Corporation2
“once a technology starts to run,
it happens in many places”
Ethan McCarty, Senior Manager, Digital and Social Strategy at IBM

3. © 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

4. © 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

5. © 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

6. © 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

7. © 2012 IBM Corporation7
A história do w3
Acessibilidade na IBM

8. © 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

9. © 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

10. © 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

11. © 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

12. © 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.php
http://www-01.ibm.com/software/awdtools/tester/policy/accessibility/

13. © 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/a11y/statement.html
http://wave.webaim.org

14. © 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

15. © 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"><span
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

16. © 2012 IBM Corporation16
7 a11y: Tabelas com multiplos headers
<table summary="Esta tabela mostra idade e email dos 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

17. © 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

18. © 2012 IBM Corporation18
Desafios
Big data acessível
ARIA em Canvas
Acessibilidade na IBM

19. © 2012 IBM Corporation19
Acessibilidade na IBM
Obrigado!
http://twitter.com/alyssonfranklin
http://br.linkedin.com/in/alyssonfrk