flex e acessibilidade. sim, é possível!
DESCRIPTION
Desenvolver aplicações flex acessíveis a deficientes visuais é simples e praticamente não muda seu fluxo de trabalho. Que tal fazer um pequeno esforço para democratizar seus projetos? Nesta palestra vamos ver um caso real que deu certo.TRANSCRIPT
![Page 1: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/1.jpg)
Flex e Acessibilidade: Sim, é possível!
por Odair Seixas
![Page 2: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/2.jpg)
sobre...Desenvolvedor web há 11 anos,
trabalho com flash nesse mesmo período e comecei com o flex
em 2009.Sou um dos fundadores do FUGAL Flash User Group
Alagoas (www.fugal.com.br) e diretor da Rino (www.rino.nu).
www.twitter.com/odairseixaswww.odairseixas.com
![Page 3: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/3.jpg)
sumário
• Motivação
• Tecnologias assistivas
• Ambiente de desenvolvimento
• Componentes e containers acessíveis
• Propriedades de acessibilidade
• Características de uma aplicação acessível
• Teclas de atalho
• Boas práticas na ordem de leitura e tabulação
![Page 4: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/4.jpg)
motivação...
![Page 5: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/5.jpg)
motivação......o cliente
![Page 6: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/6.jpg)
tecnologias assitivas
• Teclado
• Assistente de tela (CPqD, ZoomText)
• Legendas e feedbacks visuais
• Amplificadores de audio
• Reconhecimento biométrico
![Page 7: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/7.jpg)
ambiente de desenvolvimento
• Flash Builder 4.5
• VirtualBox
• Windows XP (MSAA - Microsoft Active Accessibility)
• aDesigner
• CPqD
• Firefox
![Page 8: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/8.jpg)
ambiente de desenvolvimentoFlash Builder
![Page 9: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/9.jpg)
ambiente de desenvolvimentoCPqD
http://www.mc.gov.br/aplicativo-leitor-de-telas
![Page 10: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/10.jpg)
componentes e containers acessíveis
• Spark - (http://goo.gl/JeZcz)
• MX - (http://goo.gl/Anqtg)
• Customizados - Devem expor: Name, State e mais informações em conformidade com o MSAA.
![Page 11: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/11.jpg)
propriedades de acessibilidade
• flash.accessibility API (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/accessibility/package-detail.html).
• AccesibilityProperties.name / component.accessibilityName
• AccessibilityProperties.description / component.accessibilityDescription
• AccessibilityProperties.shortcut / component.accessibilityShortcut = "Alt+S" (Não implementa o atalho realmente, apenas expõe para as tecnologias assistivas)
• AccessibilityProperties.silent - Tem a mesma função que o accessibilityEnabled, só que com valores inversos. Por padrão, components fora da tela ou invisíveis não expões as propriedades de acessibilidade.
• AccessibilityProperties.forceSimple - Propriedade que define se os objetos filhos serão acessíveis. Não tem propriedade acessória, pois normalmente só é usado em implementações customizadas de acessibilidade.
• Accessibility.updateProperties() - Atualizar as informações de acessibilidade, as propriedade acessórias implementam automaticamente.
![Page 12: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/12.jpg)
características de uma aplicação acessível
• Teclado-acessível
• Informações equivalentes
• Ações alternativas
![Page 13: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/13.jpg)
características de uma aplicação acessível
Teclado-acessível
• Todos os controles acessíveis pelo teclado
• tabIndex bem definido
• Teclas de atalho
![Page 14: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/14.jpg)
características de uma aplicação acessível
Informações equivalentes
• Imagens com legenda
• Gráficos com legendas organizadas
• Alertas visuais com texto equivalente e tipo identificável
• Botões com apenas ícones, devem ter o accessibilityName informado
![Page 15: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/15.jpg)
características de uma aplicação acessível
Ações alternativas (exemplos)
• Drag-and-drop
• Menus contextuais
• Barras de ferramentas
![Page 16: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/16.jpg)
teclas de atalho
• Em mnemônicos (salvar, imprimir)
• Em reprodução de mídia (play, pause)
• Em ações que precisam ser executadas rapidamente (vídeo de background)
Quando usar?
![Page 17: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/17.jpg)
boas práticas na ordem de leitura e tabulação
• Tabulação lógica e bem definida
• Alertas primeiro
• Ignore conteúdo irrelevante
• Reporte situações de transição
• Evite informações redundantes
![Page 18: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/18.jpg)
exemplos
![Page 19: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/19.jpg)
referências
• Adobe - Accessibility Resource Center
• Best practices for accessibility with Adobe® Flex® 4 (http://blogs.adobe.com/accessibility/2011/03/flex-4-accessibility-best-practices.html)
![Page 20: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/20.jpg)
Dúvidas?
![Page 21: Flex e acessibilidade. Sim, é possível!](https://reader033.vdocuments.net/reader033/viewer/2022042614/5590a12e1a28abf2788b459e/html5/thumbnails/21.jpg)
Obrigado!