SlideShare une entreprise Scribd logo
1  sur  49
Télécharger pour lire hors ligne
Acessibilidade em Aplicações Web
           Trilha – Web
           Sofia Larissa da Costa
        Mestre em Ciência da Computação




                                          Globalcode – Open4education
Sobre a palestrante
 Sofia Larissa da Costa
   Mestre em Ciência da Computação
   Professora: Faculdades Objetivo
   Atuação: Desenvolvimento Web, MDD, IHC

  Contato:
   Twitter: @sofialarissa
   E-mail: sofialarissa@gmail.com




                                     Globalcode – Open4education
Agenda
 Usabilidade na Web
 O que é acessibilidade?
 Interfaces acessíveis: como fazer?
 WCAG 2.0
 Princípios da WCAG 2.0:
       Perceptível
       Operável
       Compreensível
       Robusto

                                      Globalcode – Open4education
Usabilidade na Web



              Globalcode – Open4education
Web
 Ampla capacidade da Web em disponibilizar e
 distribuir conteúdo
 Acesso ao conteúdo de qualquer local do planeta
 com acesso à Internet
 Interfaces devem ser
 simples e fáceis de
 utilizar




                                   Globalcode – Open4education
O que o usuário quer?
 O usuário deseja que o aplicativo que ele está
 usando ajude-o a concluir as suas tarefas
 cotidianas (trabalho, escola, etc.).
 O usuário deve alcançar três objetivos:
   Eficácia – o usuário alcança quando conclui
   uma tarefa.
   Eficiência – o usuário alcança quando completa
   a tarefa com mínimo tempo e esforço.
   Satisfação – o usuário alcança quando ele se
   sente gratificado em usar o aplicativo.
                                  Globalcode – Open4education
O que o usuário quer?




                        Globalcode – Open4education
Usabilidade
 Usabilidade refere-se à capacidade de uma
 aplicação ser:
   Compreendida
   Aprendida
   Utilizada
   Atrativa para o usuário, em condições
   específicas de utilização.
                                    (ISO/IEC 9126)


                                   Globalcode – Open4education
Usabilidade na Web
Assume importância ímpar na Internet:
  No design de produtos e software tradicionais,
  usuários pagam antes e experimentam a
  usabilidade depois.
  Na web experimentam a usabilidade antes e
  pagam depois.

Má usabilidade equivale a nenhum cliente.



                                     Globalcode – Open4education
Usabilidade na Web
Efeitos negativos da falta
de usabilidade podem ser
sentidos diretamente sobre
o usuário e a sua tarefa:
   Sobrecarga perceptiva
   (dificuldade de leitura).
   Sobrecarga cognitiva
   (desorientação ou
   hesitação).
   Sobrecarga física
   (dificuldade de
   acionamento)                Globalcode – Open4education
Usabilidade e Negócios
 Um aplicativo adequadamente projetado para o seu
 domínio proporciona vantagens dentro da empresa:
    Custos reduzidos
    Aumento do rendimento do trabalho
    Número reduzido de faltas ao trabalho
 O aplicativo que alcançar, primeiro, um nível de
 usabilidade adequado, alcança vantagem sobre os
 outros produtos similares.
 Investimento em usabilidade: estratégia que produz
 maior retorno de investimento: Ordem de 8€ para cada
 1€ investido em usabilidade ( www.seisdeagosto.com).
                                      Globalcode – Open4education
W3C
World Wide Web Consortium: visa desenvolver
padrões para a criação e a interpretação de
conteúdos para a Web.
Cria padrões de
recomendação para
a Web.
Produziu um guia
de recomendações
para acessibilidade
em conteúdos Web.

                                 Globalcode – Open4education
O que é acessibilidade?



                 Globalcode – Open4education
O que é acessibilidade?
 Indivíduos com alguma deficiência ou sem as
 dependências de software e hardware são
 privados do acesso a determinados conteúdos.
 Usuário tem direito não só de acessar a Web, mas
 também de eliminar as barreiras arquitetônicas, de
 disponibilidade de comunicação,
 de equipamentos e programas
 adequados, de acesso físico,
 de conteúdo e apresentação
  da informação em formatos
 alternativos.
                                    Globalcode – Open4education
O que é acessibilidade?
 Situações que podem trazer dificuldade ao acesso de
 conteúdo web (W3C e WAI – Web Accessibility Initiative):
       Incapacidade de ver, ouvir e deslocar-se
       Dificuldade de interpretação de certas informações
       Dificuldade visual para ler ou compreender textos
       Incapacidade para usar mouse e teclado, ou não
         dispor deles
       Dificuldade para compreender o idioma
       Ocupação dos olhos, ouvidos e mãos, ou ambiente
         barulhento
       Navegador desatualizado ou diferente do habitual.

                                         Globalcode – Open4education
Interfaces Acessíveis:
     como fazer?


                 Globalcode – Open4education
Interfaces acessíveis:
como fazer?
 Proporcionar respostas simultâneas a vários
 grupos de incapacidade ou deficiência.
 Páginas em HTML com a utilização e divisão de
 folhas de estilo para controle de tipos de letra, e
 eliminação do elemento FONT.
 Resultado: benefício a totalidade dos usuários da
 Web.




                                      Globalcode – Open4education
Princípios para
acessibilidade na Web
Segundo a Acessibilidade Brasil (acessobrasil.org.br):
  Apresentação da informação: associação de um
  texto a cada elemento não textual (imagens,
  mapas, gráficos, animações, botões gráficos, etc).
  Navegação: elementos da página disponíveis por
  teclado; palavras ou expressões compreensíveis.
  Implantação: utilização dos requisitos de
  acessibilidade da W3C/WAI.
  Página principal: símbolo de acessibilidade

                                      Globalcode – Open4education
Lei de Acessibilidade -
Decreto lei nº 5296

Art. 8o Para os fins de acessibilidade, considera-se:
(...)
V - ajuda técnica: os produtos, instrumentos,
   equipamentos ou tecnologia adaptados ou
   especialmente projetados para melhorar a
   funcionalidade da pessoa portadora de deficiência
   ou com mobilidade reduzida,
   favorecendo a autonomia pessoal,
   total ou assistida
                                      Globalcode – Open4education
WCAG 2.0



           Globalcode – Open4education
WCAG 2.0

 Guia de Acessibilidade para Conteúdo Web
 (Web Content Accessibility Guidelines)
 Segunda versão do documento publicado como
 Recomendação da W3C.
 Disponível em:
 Original em Inglês:
 http://www.w3.org/TR/2008/REC-WCAG20-20081211
 Versão em Português:
 http://www.ilearn.com.br/TR/WCAG20/

                               Globalcode – Open4education
WCAG 2.0
 Diversas recomendações para tornar o conteúdo
 Web mais acessível.
 Seguir as recomendações tornará o conteúdo
 acessível para um amplo grupo de pessoas:
     Cegueira e baixa visão
     Surdez e baixa audição
     Dificuldades de aprendizagem
     Limitações cognitivas
     Limitações de movimentos
     Incapacidade de fala
     Fotosensibilidade
                                    Globalcode – Open4education
WCAG 2.0
 Recomendações Gerais sobre acessibilidade
 Documentos separados fornecem informações gerais
 e sobre como satisfazer o critério de sucesso em
 tecnologias específicas.
 Não aborda as necessidades de pessoas com todos
 os tipos, graus e combinações de incapacidades.
 Facilitam a utilização do conteúdo da Web por
 pessoas mais velhas, cujas capacidades estão em
 constante mudança devido ao envelhecimento.
 Facilitam a utilização para os usuários em geral.

                                   Globalcode – Open4education
Níveis de abordagem das
WCAG 2.0
 Princípios
 Recomendações de caráter geral
 Critérios de sucesso testáveis
 Conjunto de técnicas de tipo suficiente e de tipo
 aconselhada
 Falhas comuns documentadas com exemplos,
 links para recursos e código fonte.



                                     Globalcode – Open4education
Princípios das WCAG 2.0



                 Globalcode – Open4education
Princípio 1: Perceptível


  A informação e os componentes da
     interface do usuário têm de ser
  apresentados aos usuários em formas
       que eles possam perceber.




                           Globalcode – Open4education
Princípio 1: Perceptível
 Recomendação 1.1 Alternativas em Texto:
    Fornecer alternativas em texto para qualquer conteúdo
   não textual permitindo, assim, que o mesmo possa ser
   alterado para outras formas mais adequadas à
   necessidade do indivíduo, tais como impressão em
   caracteres ampliados, braille, fala, símbolos ou
   linguagem mais simples.

   Uso do atributo ALT na tag IMG




                                         Globalcode – Open4education
Globalcode – Open4education
Princípio 1: Perceptível
 Recomendação 1.2 Mídias com base no tempo:
    Fornecer alternativas para mídias com base no tempo.

   Para áudio e vídeo ao vivo, fornecer uma cópia.
   Ligar as informações do vídeo a conteúdo textual.




                                         Globalcode – Open4education
Princípio 1: Perceptível
 Recomendação 1.3 Adaptável:
   Criar conteúdos que possam ser apresentados de
   diferentes maneiras (por exemplo, um layout mais
   simples) sem perder informação ou estrutura.

   Permitir que o conteúdo seja renderizado de diferentes
   formas, mais simples, dependendo do dispositivo que o
   usuário utiliza.




                                         Globalcode – Open4education
Princípio 1: Perceptível
 Recomendação 1.4 Discernível:
   Facilitar a audição e a visualização de conteúdos aos usuários,
   incluindo a separação do primeiro plano e do plano de fundo.

   Utilização de cores: contraste do plano de fundo com o primeiro
   plano; transmitir informações usando cores.
   Uso do CSS para focar o componente de interface.
   Redimensionamento do texto até 200%
   Não utilizar imagens de texto (apenas quando é decorativa ou
   quando é essencial - logotipos)
   Áudio: controlar som e vídeo independe do controle do sistema.



                                                Globalcode – Open4education
Princípio 1: Perceptível




                           Globalcode – Open4education
Princípio 1: Perceptível




                           Globalcode – Open4education
Princípio 1: Perceptível




                           Globalcode – Open4education
Princípio 2: Operável



Os componentes de interface de usuario
  e a navegação têm de ser operáveis.




                           Globalcode – Open4education
Princípio 2: Operável
 Recomendação 2.1 Acessível por Teclado:
   Fazer com que toda a funcionalidade fique disponível a
   partir do teclado.

   Permitir o uso de atalhos pelo teclado.
   Conteúdo em Flash não é acessível para programas que
   realizam leitura de tela.




                                         Globalcode – Open4education
Princípio 2: Operável
 Recomendação 2.2 Tempo Suficiente:
   Fornecer tempo suficiente aos usuários para lerem e
   utilizarem o conteúdo.

   Tempo ajustável: parar, colocar em pausa, prolongar




                                        Globalcode – Open4education
Princípio 2: Operável
 Recomendação 2.3 Ataques Epilépticos:
   Não criar conteúdo de uma forma conhecida que possa
   causar ataques epilépticos.

   Não mais do que três flashes por segundo.




                                        Globalcode – Open4education
Princípio 2: Operável
 Recomendação 2.4 Navegável:
 Fornecer formas de ajudar os usuários a navegar,
 localizar conteúdos e determinar o local onde estão.

 Colocar um link que vá direto para o conteúdo da
 página, saltando outros links.
 Permitir que sub-menus sejam acessíveis por teclado.




                                       Globalcode – Open4education
Princípio 2: Operável




                        Globalcode – Open4education
Princípio 3: Compreensível



 A informação e a operação da interface
  de usuário têm de ser compreensíveis.




                             Globalcode – Open4education
Princípio 3: Compreensível
 Recomendação 3.1 Legível:
 Tornar o conteúdo de texto legível e
 compreensível.

 Utilizar meta-tags
 Ligar palavras unusuais ou jargões a definições
 Colocar um link para um glossário




                                        Globalcode – Open4education
Princípio 3: Compreensível
 Recomendação 3.2 Previsível:
   Fazer com que as páginas Web surjam e funcionem de
   forma previsível.

   Consistência nas interfaces




                                      Globalcode – Open4education
Princípio 3: Compreensível
 Recomendação 3.3 Assistência de Entrada:
   Ajudar os usuários a evitar e corrigir erros.

   Alertas e validação de dados do usuário
   Colocar foco nos campos que contém erro
   Retornar mensagem de sucesso quando dados forem
   submetidos com sucesso




                                            Globalcode – Open4education
Princípio 4: Robusto


    O conteúdo tem de ser robusto o
  suficiente para poder ser interpretado
  de forma concisa por diversos agentes
     do usuário, incluindo tecnologias
                assistivas.



                            Globalcode – Open4education
Princípio 4: Robusto
 Recomendação 4.1 Compatível:
 Maximizar a compatibilidade com atuais e futuros
 agentes de usuário, incluindo tecnologias
 assistivas.

 Tags de início e fim completas
 Elementos encaixados conforme as especificações




                                    Globalcode – Open4education
Finalmente...
 Acessibilidade: importante item a ser considerado
 no desenvovimento de sites e aplicações Web
 Recomendações auxiliam na usabilidade para os
 usuários em geral
 Aplicação dos princípios da WCAG 2.0 são
 fundamentais para inclusão digital de usuários com
 deficiência.
 Existem ferramentas automatizadas que ajudam
 na avaliação de acessibilidade.


                                    Globalcode – Open4education
Sites sobre acessibilidade
 Acessibilidade Brasil: acessobrasil.org.br

 Acessibilidade Legal: acessibilidadelegal.com

 Bengala Legal: bengalalegal.com

 Avaliador de Acessibilidade de sites em português:
 Da Silva: dasilva.org.br


                                     Globalcode – Open4education
Acessibilidade em Aplicações Web

             Sofia Costa
               @sofialarissa
         sofialarissa@gmail.com

                                  Globalcode – Open4education

Contenu connexe

Tendances

Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitaisMake it Loyal
 
Introdução a Internet
Introdução a InternetIntrodução a Internet
Introdução a InternetMarcio Duarte
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões webDivulgrs
 
Aplicações Web Acessíveis
Aplicações Web AcessíveisAplicações Web Acessíveis
Aplicações Web AcessíveisDiego Pessoa
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2Leo Serrao
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveisLeandro Borges
 
Palestra: Acessibilidade na web - Iran Pontes
Palestra: Acessibilidade na web -  Iran PontesPalestra: Acessibilidade na web -  Iran Pontes
Palestra: Acessibilidade na web - Iran PontesIpontes Mercês
 
Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SPAcessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SPLucas J Silva
 
Design Universal
Design UniversalDesign Universal
Design Universalaiadufmg
 
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Juliana Fernandes
 
Acessibilidade Web - IxDA Joinville
Acessibilidade Web - IxDA JoinvilleAcessibilidade Web - IxDA Joinville
Acessibilidade Web - IxDA JoinvillePaulo Aguilera Filho
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeNécio de Lima Veras
 

Tendances (18)

Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 01 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 01 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 01 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 01 - ...
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Introdução a Internet
Introdução a InternetIntrodução a Internet
Introdução a Internet
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
Aplicações Web Acessíveis
Aplicações Web AcessíveisAplicações Web Acessíveis
Aplicações Web Acessíveis
 
Sc ad-tp-g4-a
Sc ad-tp-g4-aSc ad-tp-g4-a
Sc ad-tp-g4-a
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Palestra: Acessibilidade na web - Iran Pontes
Palestra: Acessibilidade na web -  Iran PontesPalestra: Acessibilidade na web -  Iran Pontes
Palestra: Acessibilidade na web - Iran Pontes
 
Joomla! para iniciantes - Evidosol 2011
Joomla! para iniciantes - Evidosol 2011Joomla! para iniciantes - Evidosol 2011
Joomla! para iniciantes - Evidosol 2011
 
Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SPAcessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
 
Joomla e acessibilidade
Joomla e acessibilidadeJoomla e acessibilidade
Joomla e acessibilidade
 
Acessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias AssistivasAcessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias Assistivas
 
Design Universal
Design UniversalDesign Universal
Design Universal
 
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14
 
Acessibilidade Web - IxDA Joinville
Acessibilidade Web - IxDA JoinvilleAcessibilidade Web - IxDA Joinville
Acessibilidade Web - IxDA Joinville
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 

En vedette (20)

blog
blogblog
blog
 
Stay Anonymous app report
Stay Anonymous app reportStay Anonymous app report
Stay Anonymous app report
 
Apresentacao it
Apresentacao itApresentacao it
Apresentacao it
 
Beatriz Rodriguez Prieto
Beatriz Rodriguez PrietoBeatriz Rodriguez Prieto
Beatriz Rodriguez Prieto
 
Apa review
Apa reviewApa review
Apa review
 
Los jovenes en_la_era_de_la_hiperconectividad
Los jovenes en_la_era_de_la_hiperconectividadLos jovenes en_la_era_de_la_hiperconectividad
Los jovenes en_la_era_de_la_hiperconectividad
 
Clase1 new
Clase1 newClase1 new
Clase1 new
 
ANWB Explorers game op Hyves
ANWB Explorers game op HyvesANWB Explorers game op Hyves
ANWB Explorers game op Hyves
 
C o n v o.. e atas 27.08.2009
C o n v o.. e atas 27.08.2009C o n v o.. e atas 27.08.2009
C o n v o.. e atas 27.08.2009
 
Entendo o consumidor
Entendo o consumidorEntendo o consumidor
Entendo o consumidor
 
Adverb,
Adverb,Adverb,
Adverb,
 
Percepcao img+fotografos
Percepcao img+fotografosPercepcao img+fotografos
Percepcao img+fotografos
 
Calaméo
CalaméoCalaméo
Calaméo
 
clase de perros
clase de perrosclase de perros
clase de perros
 
Trabajo#4
Trabajo#4Trabajo#4
Trabajo#4
 
Ediçãovídeos
EdiçãovídeosEdiçãovídeos
Ediçãovídeos
 
Tecnologia
TecnologiaTecnologia
Tecnologia
 
TURKEY
TURKEY  TURKEY
TURKEY
 
Bondia Lleida 25052012
Bondia Lleida 25052012Bondia Lleida 25052012
Bondia Lleida 25052012
 
Bondia Lleida 06092012
Bondia Lleida 06092012Bondia Lleida 06092012
Bondia Lleida 06092012
 

Similaire à Sofiatdc2011 111030182133-phpapp01

Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisLogan Web
 
Desafios da educação a distância para deficientes visuais: Análise Heurística...
Desafios da educação a distância para deficientes visuais: Análise Heurística...Desafios da educação a distância para deficientes visuais: Análise Heurística...
Desafios da educação a distância para deficientes visuais: Análise Heurística...Luis Arratia
 
Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)Leo Abdala
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2aiadufmg
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevLucas J Silva
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2aiadufmg
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019Maurício Pereiro
 
Acessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaAcessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaLucas J Silva
 
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escalaTDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escalaCleber Dantas
 
Acessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaAcessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaRuan Aragão
 
T@rget trust integrando flex e java com blazeds
T@rget trust   integrando flex e java com blazedsT@rget trust   integrando flex e java com blazeds
T@rget trust integrando flex e java com blazedsTargettrust
 
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...SouMaisWeb
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Horácio Soares
 
Acessibilidade 2.0 = usabilidade = design universal?
Acessibilidade 2.0 = usabilidade = design universal?Acessibilidade 2.0 = usabilidade = design universal?
Acessibilidade 2.0 = usabilidade = design universal?monica m fernandes
 

Similaire à Sofiatdc2011 111030182133-phpapp01 (20)

Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
 
Desafios da educação a distância para deficientes visuais: Análise Heurística...
Desafios da educação a distância para deficientes visuais: Análise Heurística...Desafios da educação a distância para deficientes visuais: Análise Heurística...
Desafios da educação a distância para deficientes visuais: Análise Heurística...
 
Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
 
Acessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaAcessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in Sampa
 
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escalaTDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
 
Open Source2
Open Source2Open Source2
Open Source2
 
Open S
Open SOpen S
Open S
 
Open Source2
Open Source2Open Source2
Open Source2
 
Acessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaAcessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisa
 
T@rget trust integrando flex e java com blazeds
T@rget trust   integrando flex e java com blazedsT@rget trust   integrando flex e java com blazeds
T@rget trust integrando flex e java com blazeds
 
Apresentacao
ApresentacaoApresentacao
Apresentacao
 
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13
 
Acessibilidade 2.0 = usabilidade = design universal?
Acessibilidade 2.0 = usabilidade = design universal?Acessibilidade 2.0 = usabilidade = design universal?
Acessibilidade 2.0 = usabilidade = design universal?
 

Sofiatdc2011 111030182133-phpapp01

  • 1. Acessibilidade em Aplicações Web Trilha – Web Sofia Larissa da Costa Mestre em Ciência da Computação Globalcode – Open4education
  • 2. Sobre a palestrante Sofia Larissa da Costa Mestre em Ciência da Computação Professora: Faculdades Objetivo Atuação: Desenvolvimento Web, MDD, IHC Contato: Twitter: @sofialarissa E-mail: sofialarissa@gmail.com Globalcode – Open4education
  • 3. Agenda Usabilidade na Web O que é acessibilidade? Interfaces acessíveis: como fazer? WCAG 2.0 Princípios da WCAG 2.0: Perceptível Operável Compreensível Robusto Globalcode – Open4education
  • 4. Usabilidade na Web Globalcode – Open4education
  • 5. Web Ampla capacidade da Web em disponibilizar e distribuir conteúdo Acesso ao conteúdo de qualquer local do planeta com acesso à Internet Interfaces devem ser simples e fáceis de utilizar Globalcode – Open4education
  • 6. O que o usuário quer? O usuário deseja que o aplicativo que ele está usando ajude-o a concluir as suas tarefas cotidianas (trabalho, escola, etc.). O usuário deve alcançar três objetivos: Eficácia – o usuário alcança quando conclui uma tarefa. Eficiência – o usuário alcança quando completa a tarefa com mínimo tempo e esforço. Satisfação – o usuário alcança quando ele se sente gratificado em usar o aplicativo. Globalcode – Open4education
  • 7. O que o usuário quer? Globalcode – Open4education
  • 8. Usabilidade Usabilidade refere-se à capacidade de uma aplicação ser: Compreendida Aprendida Utilizada Atrativa para o usuário, em condições específicas de utilização. (ISO/IEC 9126) Globalcode – Open4education
  • 9. Usabilidade na Web Assume importância ímpar na Internet: No design de produtos e software tradicionais, usuários pagam antes e experimentam a usabilidade depois. Na web experimentam a usabilidade antes e pagam depois. Má usabilidade equivale a nenhum cliente. Globalcode – Open4education
  • 10. Usabilidade na Web Efeitos negativos da falta de usabilidade podem ser sentidos diretamente sobre o usuário e a sua tarefa: Sobrecarga perceptiva (dificuldade de leitura). Sobrecarga cognitiva (desorientação ou hesitação). Sobrecarga física (dificuldade de acionamento) Globalcode – Open4education
  • 11. Usabilidade e Negócios Um aplicativo adequadamente projetado para o seu domínio proporciona vantagens dentro da empresa: Custos reduzidos Aumento do rendimento do trabalho Número reduzido de faltas ao trabalho O aplicativo que alcançar, primeiro, um nível de usabilidade adequado, alcança vantagem sobre os outros produtos similares. Investimento em usabilidade: estratégia que produz maior retorno de investimento: Ordem de 8€ para cada 1€ investido em usabilidade ( www.seisdeagosto.com). Globalcode – Open4education
  • 12. W3C World Wide Web Consortium: visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web. Cria padrões de recomendação para a Web. Produziu um guia de recomendações para acessibilidade em conteúdos Web. Globalcode – Open4education
  • 13. O que é acessibilidade? Globalcode – Open4education
  • 14. O que é acessibilidade? Indivíduos com alguma deficiência ou sem as dependências de software e hardware são privados do acesso a determinados conteúdos. Usuário tem direito não só de acessar a Web, mas também de eliminar as barreiras arquitetônicas, de disponibilidade de comunicação, de equipamentos e programas adequados, de acesso físico, de conteúdo e apresentação da informação em formatos alternativos. Globalcode – Open4education
  • 15. O que é acessibilidade? Situações que podem trazer dificuldade ao acesso de conteúdo web (W3C e WAI – Web Accessibility Initiative): Incapacidade de ver, ouvir e deslocar-se Dificuldade de interpretação de certas informações Dificuldade visual para ler ou compreender textos Incapacidade para usar mouse e teclado, ou não dispor deles Dificuldade para compreender o idioma Ocupação dos olhos, ouvidos e mãos, ou ambiente barulhento Navegador desatualizado ou diferente do habitual. Globalcode – Open4education
  • 16. Interfaces Acessíveis: como fazer? Globalcode – Open4education
  • 17. Interfaces acessíveis: como fazer? Proporcionar respostas simultâneas a vários grupos de incapacidade ou deficiência. Páginas em HTML com a utilização e divisão de folhas de estilo para controle de tipos de letra, e eliminação do elemento FONT. Resultado: benefício a totalidade dos usuários da Web. Globalcode – Open4education
  • 18. Princípios para acessibilidade na Web Segundo a Acessibilidade Brasil (acessobrasil.org.br): Apresentação da informação: associação de um texto a cada elemento não textual (imagens, mapas, gráficos, animações, botões gráficos, etc). Navegação: elementos da página disponíveis por teclado; palavras ou expressões compreensíveis. Implantação: utilização dos requisitos de acessibilidade da W3C/WAI. Página principal: símbolo de acessibilidade Globalcode – Open4education
  • 19. Lei de Acessibilidade - Decreto lei nº 5296 Art. 8o Para os fins de acessibilidade, considera-se: (...) V - ajuda técnica: os produtos, instrumentos, equipamentos ou tecnologia adaptados ou especialmente projetados para melhorar a funcionalidade da pessoa portadora de deficiência ou com mobilidade reduzida, favorecendo a autonomia pessoal, total ou assistida Globalcode – Open4education
  • 20. WCAG 2.0 Globalcode – Open4education
  • 21. WCAG 2.0 Guia de Acessibilidade para Conteúdo Web (Web Content Accessibility Guidelines) Segunda versão do documento publicado como Recomendação da W3C. Disponível em: Original em Inglês: http://www.w3.org/TR/2008/REC-WCAG20-20081211 Versão em Português: http://www.ilearn.com.br/TR/WCAG20/ Globalcode – Open4education
  • 22. WCAG 2.0 Diversas recomendações para tornar o conteúdo Web mais acessível. Seguir as recomendações tornará o conteúdo acessível para um amplo grupo de pessoas: Cegueira e baixa visão Surdez e baixa audição Dificuldades de aprendizagem Limitações cognitivas Limitações de movimentos Incapacidade de fala Fotosensibilidade Globalcode – Open4education
  • 23. WCAG 2.0 Recomendações Gerais sobre acessibilidade Documentos separados fornecem informações gerais e sobre como satisfazer o critério de sucesso em tecnologias específicas. Não aborda as necessidades de pessoas com todos os tipos, graus e combinações de incapacidades. Facilitam a utilização do conteúdo da Web por pessoas mais velhas, cujas capacidades estão em constante mudança devido ao envelhecimento. Facilitam a utilização para os usuários em geral. Globalcode – Open4education
  • 24. Níveis de abordagem das WCAG 2.0 Princípios Recomendações de caráter geral Critérios de sucesso testáveis Conjunto de técnicas de tipo suficiente e de tipo aconselhada Falhas comuns documentadas com exemplos, links para recursos e código fonte. Globalcode – Open4education
  • 25. Princípios das WCAG 2.0 Globalcode – Open4education
  • 26. Princípio 1: Perceptível A informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber. Globalcode – Open4education
  • 27. Princípio 1: Perceptível Recomendação 1.1 Alternativas em Texto: Fornecer alternativas em texto para qualquer conteúdo não textual permitindo, assim, que o mesmo possa ser alterado para outras formas mais adequadas à necessidade do indivíduo, tais como impressão em caracteres ampliados, braille, fala, símbolos ou linguagem mais simples. Uso do atributo ALT na tag IMG Globalcode – Open4education
  • 29. Princípio 1: Perceptível Recomendação 1.2 Mídias com base no tempo: Fornecer alternativas para mídias com base no tempo. Para áudio e vídeo ao vivo, fornecer uma cópia. Ligar as informações do vídeo a conteúdo textual. Globalcode – Open4education
  • 30. Princípio 1: Perceptível Recomendação 1.3 Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras (por exemplo, um layout mais simples) sem perder informação ou estrutura. Permitir que o conteúdo seja renderizado de diferentes formas, mais simples, dependendo do dispositivo que o usuário utiliza. Globalcode – Open4education
  • 31. Princípio 1: Perceptível Recomendação 1.4 Discernível: Facilitar a audição e a visualização de conteúdos aos usuários, incluindo a separação do primeiro plano e do plano de fundo. Utilização de cores: contraste do plano de fundo com o primeiro plano; transmitir informações usando cores. Uso do CSS para focar o componente de interface. Redimensionamento do texto até 200% Não utilizar imagens de texto (apenas quando é decorativa ou quando é essencial - logotipos) Áudio: controlar som e vídeo independe do controle do sistema. Globalcode – Open4education
  • 32. Princípio 1: Perceptível Globalcode – Open4education
  • 33. Princípio 1: Perceptível Globalcode – Open4education
  • 34. Princípio 1: Perceptível Globalcode – Open4education
  • 35. Princípio 2: Operável Os componentes de interface de usuario e a navegação têm de ser operáveis. Globalcode – Open4education
  • 36. Princípio 2: Operável Recomendação 2.1 Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado. Permitir o uso de atalhos pelo teclado. Conteúdo em Flash não é acessível para programas que realizam leitura de tela. Globalcode – Open4education
  • 37. Princípio 2: Operável Recomendação 2.2 Tempo Suficiente: Fornecer tempo suficiente aos usuários para lerem e utilizarem o conteúdo. Tempo ajustável: parar, colocar em pausa, prolongar Globalcode – Open4education
  • 38. Princípio 2: Operável Recomendação 2.3 Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que possa causar ataques epilépticos. Não mais do que três flashes por segundo. Globalcode – Open4education
  • 39. Princípio 2: Operável Recomendação 2.4 Navegável: Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. Colocar um link que vá direto para o conteúdo da página, saltando outros links. Permitir que sub-menus sejam acessíveis por teclado. Globalcode – Open4education
  • 40. Princípio 2: Operável Globalcode – Open4education
  • 41. Princípio 3: Compreensível A informação e a operação da interface de usuário têm de ser compreensíveis. Globalcode – Open4education
  • 42. Princípio 3: Compreensível Recomendação 3.1 Legível: Tornar o conteúdo de texto legível e compreensível. Utilizar meta-tags Ligar palavras unusuais ou jargões a definições Colocar um link para um glossário Globalcode – Open4education
  • 43. Princípio 3: Compreensível Recomendação 3.2 Previsível: Fazer com que as páginas Web surjam e funcionem de forma previsível. Consistência nas interfaces Globalcode – Open4education
  • 44. Princípio 3: Compreensível Recomendação 3.3 Assistência de Entrada: Ajudar os usuários a evitar e corrigir erros. Alertas e validação de dados do usuário Colocar foco nos campos que contém erro Retornar mensagem de sucesso quando dados forem submetidos com sucesso Globalcode – Open4education
  • 45. Princípio 4: Robusto O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. Globalcode – Open4education
  • 46. Princípio 4: Robusto Recomendação 4.1 Compatível: Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas. Tags de início e fim completas Elementos encaixados conforme as especificações Globalcode – Open4education
  • 47. Finalmente... Acessibilidade: importante item a ser considerado no desenvovimento de sites e aplicações Web Recomendações auxiliam na usabilidade para os usuários em geral Aplicação dos princípios da WCAG 2.0 são fundamentais para inclusão digital de usuários com deficiência. Existem ferramentas automatizadas que ajudam na avaliação de acessibilidade. Globalcode – Open4education
  • 48. Sites sobre acessibilidade Acessibilidade Brasil: acessobrasil.org.br Acessibilidade Legal: acessibilidadelegal.com Bengala Legal: bengalalegal.com Avaliador de Acessibilidade de sites em português: Da Silva: dasilva.org.br Globalcode – Open4education
  • 49. Acessibilidade em Aplicações Web Sofia Costa @sofialarissa sofialarissa@gmail.com Globalcode – Open4education