7 Masters Acessibilidade

© 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


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



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



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



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



A história do w3



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.



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



Educação

� Accessibility University

� Web developer roadmaps

� Human Ability & Accessibility Center

� Forums e wikis de acessibilidade

� Newsletters técnicos



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


Source: http://www-03.ibm.com/able/index.html http://www-03.ibm.com/able/news/html5.html


Ferramentas

� Client-side

� Server-side

� On Screen TTS

� ACTF aDesigner

� Rational Policy tester


Source: http://www.eclipse.org/actf/downloads/tools/aDesigner/index.phphttp://www-01.ibm.com/software/awdtools/tester/policy/accessibility/


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)


Source: https://dojotoolkit.org/reference-guide/1.8/dijit/a 11y/statement.htmlhttp://wave.webaim.org


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>



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



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">[email protected]</td> <td headers="idade">32</td> </tr>

...



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>



Desafios

� Big data acessível

� ARIA em Canvas




Obrigado!

http://twitter.com/alyssonfranklin

http://br.linkedin.com/in/alyssonfrk

Education

7 Masters Acessibilidade