Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© 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, Digita...
© 2012 IBM Corporation3
Agenda
Geradora de conteúdo: A IBM e seus números
Um olhar sobre o ambiente: o w3
Educação
Técnica...
© 2012 IBM Corporation4
A IBM com geradora de conteúdo
Em torno de 400,000 IBMers (e crescendo)
100% base utilizando o w3
...
© 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 Te...
© 2012 IBM Corporation6
A história do w3
80’s: mirror do www.ibm.com
1996: W3 On demand Workplace (17.800 pageviews/dia)
1...
© 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...
© 2012 IBM Corporation9
Premissas
~750M/1B no mundo com alguma deficiência – temporal
ou permanente
U.S. Rehabilitation Ac...
© 2012 IBM Corporation10
Educação
Accessibility University
Web developer roadmaps
Human Ability & Accessibility Center
For...
© 2012 IBM Corporation11
Técnicas
Interação via teclado: consistencia, lógica, intuição, customização, descoberta
Manipula...
© 2012 IBM Corporation12
Ferramentas
Client-side
Server-side
On Screen TTS
ACTF aDesigner
Rational Policy tester
Acessibil...
© 2012 IBM Corporation13
7 a11y: Metodologias
Validação on-the-fly do código com wave
http://wave.webaim.org
Use accessibi...
© 2012 IBM Corporation14
7 a11y: Navegação
Utilize atalhos via teclado com accesskey. Faça a
associação lógica da tecla e ...
© 2012 IBM Corporation15
7 a11y: Conteúdo
Utilize containers ocultos para adicionar informações para
leitores de tela quan...
© 2012 IBM Corporation16
7 a11y: Tabelas com multiplos headers
<table summary="Esta tabela mostra idade e email dos presen...
© 2012 IBM Corporation17
7 a11y: Tabelas com scope
<thead>
<tr>
<th scope="col"> Dept. Code/ Class Number</th>
<th scope="...
© 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/alys...
Upcoming SlideShare
Loading in …5
×

7 Masters Acessibilidade

231 views

Published on

Mini talk sobre projetos de a11y na IBM feita para o iMasters em seu evento mensal com mestres em assuntos de TI

Published in: Education
  • Be the first to comment

  • Be the first to like this

7 Masters Acessibilidade

  1. 1. © 2012 IBM Corporation Acessibilidade na IBM Alysson Moreira – Acessibilidade na IBM 21 Agosto 2012
  2. 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. 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. 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. 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. 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. 7. © 2012 IBM Corporation7 A história do w3 Acessibilidade na IBM
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. © 2012 IBM Corporation18 Desafios Big data acessível ARIA em Canvas Acessibilidade na IBM
  19. 19. © 2012 IBM Corporation19 Acessibilidade na IBM Obrigado! http://twitter.com/alyssonfranklin http://br.linkedin.com/in/alyssonfrk

×