Razões para tornar um web site acessível
-
Upload
milton-design-studio -
Category
Design
-
view
1.414 -
download
5
description
Transcript of Razões para tornar um web site acessível
![Page 1: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/1.jpg)
Razões para tornar um portal web mais
Turma: 131 – Projeto WebGrupo de Trabalho: Milton Ferreira de Andrade FilhoAdriano EmerickBruno Abraão Diego Caldas Dias Mello Vera Graña Cassano
ACESSÍVEL
![Page 2: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/2.jpg)
Introdução"A construção de uma sociedade de plena participação e igualdade tem como um de seus princípios a interação efetiva de todos os cidadãos. Nesta perspectiva é fundamental a construção de políticas de inclusão para o reconhecimento das diferenças e para desencadear uma revolução conceitual que conceba uma sociedade em que todos devem participar, com direito de igualdade e de acordo com suas especificidades".
(Design e Avaliação de Tecnologia Web-acessível – XXV Congresso da Sociedade Brasileira de Computação - Amanda Meincke Melo e M. Cecília C. Baranauskas, Unicamp)
![Page 3: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/3.jpg)
Proposta da Acessibilidade• Acessibilidade significa não apenas permitir que pessoas com
deficiências participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população ou público alvo.
• O W3C-WAI (Web Accessibility Initiative) é um consórcio de empresas de tecnologia que têm como objetivo desenvolver padrões para a criação e a interpretação dos conteúdos para a Web. (http://www.w3.org/WAI/)
![Page 4: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/4.jpg)
Leis da
Acessibilidade
Decreto Lei Nº 5296 regulamenta as leis Nº 10048 – de 8 de novembro de 2000 – que dá prioridade de atendimento às pessoas que especifica e a lei Nº 10098 de 19 de dezembro de 2000 – que estabelece normas gerais e critérios básicos para a promoção da acessibilidade.
![Page 5: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/5.jpg)
A Importância da
AcessibilidadeVivemos hoje a era da tecnologia, onde o acesso à informação é vital para o sucesso de qualquer esforço voltado para o desenvolvimento humano. É responsabilidade dos desenvolvedores e pesquisadores o emprego da evolução tecnológica com fins de promover benefícios à todos.
![Page 6: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/6.jpg)
Razões para a
Acessibilidade na WebExistem milhões de pessoas portadoras de necessidades especiais quetem o seu acesso a Web restrito. Atualmente a maioria dos Web sitestêm barreiras de acessibilidade que dificultam ou mesmo tornamimpossível para estas pessoas acessar o site. Contudo, se os Websites forem projetados para facilitar a acessibilidade, estas pessoas poderão tornar-se efetivamente consumidores de produtos e serviços.
![Page 7: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/7.jpg)
Quadro das deficiências
![Page 8: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/8.jpg)
Deficiência no BrasilO CENSO 2000, revelou a existência de 24,5 milhões de pessoas com algum tipo de deficiência, o que representa 14,5% da população brasileira.
Deste percentual, temos:• alguma dificuldade de enxergar (57,16%)• grande dificuldade de enxergar (10,50%)• incapaz de enxergar (0,6%)• alguma dificuldade de ouvir (19%)• grande dificuldade de ouvir (4,27%)• incapaz de ouvir (0,68%)• paralisias (tetraplegia, paraplegia, ou hemiplegia (0,44%)• falta de um membro ou parte dele (5,31%)• deficiência mental (11,5%)
Expectativa de vida média 68,6 anos, onde se passa 80% da vida sem apresentar nenhuma incapacidade e os 20% restantes (14 anos) com algum tipo de deficiência.
Segundo a FGV (2003), 6,5% das pessoas com alguma deficiência possuem computador em casa, contra 10,2% da população em geral.
![Page 9: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/9.jpg)
Dificuldades de acessoNo que se refere a utilização do computador, identifica-se quatro tipos principais de situações por parte de usuários com deficiência:
• Acesso ao computador sem mouse: pessoas com cegueira, dificuldade de controle dos movimentos, paralisia ou amputação de um membro superior.
• Acesso ao computador sem teclado: pessoas com amputações, grandes limitações de movimentos ou falta de força nos membros superiores.
• Acesso ao computador sem monitor: pessoas com deficiências visuais. Recorrem a um software leitor de tela que capta essa informação e a envia para um sintetizador de voz ou para um terminal Braille.
• Acesso ao computador sem áudio: encontram-se relacionadas neste caso pessoas com baixa audição e pessoas com surdez completa.
![Page 10: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/10.jpg)
As deficiências
![Page 11: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/11.jpg)
Deficiência física e motoraA deficiência física ou motora pode envolver fraqueza, limitação no controle muscular, limitações de sensação, problemas nas juntas ou perda de membros. Algumas pessoas podem ainda sentir dor, impossibilitando o movimento.
Para acessar a internet, os usuários com deficiência motora podem utilizar um teclado alternativo com disposição da teclas que estejam de acordo com o movimento da mão, um mouse especial, um dispositivo tipo ponteiro fixado na cabeça ou na boca, um software de reconhecimento de voz ou outras tecnologias assistiva para acesso e interação.
![Page 12: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/12.jpg)
Deficiência mental ou dificuldade de aprendizadoNeste grupo encontram-se pessoas com dislexia e déficit de memória, que apresentam dificuldades em processar a linguagem escrita ou oral, focar uma informação ou entender informações complexas.
Pessoas com deficiência na aprendizagem, podem necessitar de diferentes modalidades de recursos para acessar a informação. Pode usar um leitor de tela com sintetizador de voz para facilitar a compreensão do conteúdo da página, enquanto uma pessoa com dificuldade em processar a audição, pode ser auxiliado por legendas para entender um áudio etc.
![Page 13: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/13.jpg)
Deficiência auditiva
Para acessar a internet, muitas pessoas dependem de legendas para entender o conteúdo do áudio.
Pode ser necessário ativar a legenda de um arquivo áudio ou depender de imagens suplementares para entender o contexto do conteúdo.
Os usuários também podem necessitar de ajuste no volume do áudio.
![Page 14: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/14.jpg)
Deficiência visual totalPara acessar a internet, muitas pessoas com deficiência visual, utilizam o leitor de tela.
Alguns usuários usam navegadores textuais como o Lynx ou navegadores com voz em vez de utilizar um navegador comum (navegador com interface gráfica).
É muito comum essas pessoas utilizarem da tecla “tab” para navegar somente em links ao invés de ler todas as palavras que estão na página. Deste modo eles têm uma rápida noção do conteúdo da página ou podem acessar o link desejado mais rapidamente.
![Page 15: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/15.jpg)
Deficiência visual parcialPara acessar a internet, algumas pessoas com deficiência visual parcial usam monitores grandes e aumentam o tamanho das fontes e imagens.
Outros usuários utilizam os ampliadores de tela.
Alguns usam combinações específicas de cores para texto e fundo (background) da página, por exemplo, amarelo para a fonte e preto para o fundo, ou escolhem certos tipos de fontes.
![Page 16: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/16.jpg)
DaltonismoO daltonismo refere-se à falta de percepção a certas cores. Uma das formas mais comuns do daltonismo inclui a dificuldade de distinguir entre as cores vermelha e verde, ou amarelo e azul. Algumas vezes o daltonismo resulta em não perceber as cores.
![Page 17: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/17.jpg)
Projetar siteAcessível
![Page 18: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/18.jpg)
Acessibilidade e usabilidade
• A idéia para um design que respeite e considere as diferenças e que os objetivos estabelecidos na interação sejam alcançados com eficácia, eficiência e satisfação.
• Se um usuário não consegue alcançar os objetivos estabelecidos na interação, a usabilidade deste web site fica comprometida.
![Page 19: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/19.jpg)
Design universalUso eqüitativo – deve ser útil para pessoas com habilidades diversas.
Flexibilidade no uso – o resultado deve acomodar uma grande variedade de preferências e habilidades individuais.
Simples e intuitivo – o uso deve ser fácil de entender.
Informação perceptível – deve apresentar a informação necessária ao usuário independente de suas habilidades sensoriais.
Tolerância ao erro – deve minimizar o risco e conseqüências adversas de ações acidentais ou não intencionais.
Baixo esforço físico – deve ser usado efetivamente, confortavelmente e com um mínimo de fadiga.
![Page 20: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/20.jpg)
Como projetar?
Codificação correta e uso adequado das marcações HTML são condições necessárias ao desenvolvimento de tecnologias Web-acessíveis, bem como a separação entre estrutura e apresentação.
Alguns recomendações:
Como projetar?
• Planejamento adequado do web site (arquitetura da informação)• Título das páginas que façam sentido;• Título e descrição para as imagens;• Filmes com legenda e opção de ajuste de volume;• Tabelas que tenham lógica na sua seqüênciação;• Formulários que permitam o uso da tecla TAB;• Não usar Frames sem a tag <noframe> com caminho alternativo;• Evitar a construção do site em flash;• Uso de folha de estilo etc.
![Page 21: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/21.jpg)
Ferramentas para testar Acessibilidade de um web site
![Page 22: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/22.jpg)
Ases – avaliador e simulador de acessibilidade para sites
• Avaliador de acessibilidade (e-MAG e WCAG);
• Avaliador de CSS; • Avaliador de HTML (4.01 e XHTML); • Simuladores de leitor de tela (tempo) e Baixa visão (daltonismo,
miopia, catarata);
• Ferramenta para selecionar o DocType, conteúdo alternativo, associador de rótulos, links redundantes, corretor de eventos e preenchimento de formulários.
O ASES é uma ferramenta que permite avaliar, simular e corrigir a acessibilidade de páginas, sites e portais, sendo uma ferramenta muito útil para os desenvolvedores e publicadores de conteúdo.
![Page 23: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/23.jpg)
Ases – avaliador e simulador de acessibilidade para sites
![Page 24: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/24.jpg)
Simulações de deficiência visual parcial utilizando oAses
![Page 25: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/25.jpg)
Visão normal
![Page 26: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/26.jpg)
Catarata
![Page 27: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/27.jpg)
Hipermetropia
![Page 28: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/28.jpg)
Glaucoma
![Page 29: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/29.jpg)
Retinopatia
![Page 30: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/30.jpg)
Daltonismo – protonopia (sem vermelho)
![Page 31: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/31.jpg)
Daltonismo – deuteranopia (sem verde)
![Page 32: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/32.jpg)
Daltonismo – tritanopia (sem azul)
![Page 33: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/33.jpg)
Daltonismo – monocromia
![Page 34: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/34.jpg)
Ferramentasde simulações on-line
![Page 35: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/35.jpg)
Paleta de simulações para daltonismo - http://www.iamcal.com/toys/colors/
![Page 36: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/36.jpg)
Verificador em Browsers - http://browsershots.org/
![Page 37: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/37.jpg)
Resultado do BrowserShots testando o site da Sociedade Brasileira de Nefrologia – www.sba.org.br
![Page 38: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/38.jpg)
Validador on-line DaSilva - http://www.dasilva.org.br/
![Page 39: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/39.jpg)
Firefox – Complementos paraAcessibilidade
• Firefox Accessibility Extension (ferramentas para teste de acessibilidade)
• LowBrowse Bundle (para pessoas com baixa visão. Inclui – faixa para leitura com alto contraste ampliando o texto, link; ampliador de imagem individual; leitor de tela em inglês)
![Page 40: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/40.jpg)
Firefox Accessibility Extension
![Page 41: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/41.jpg)
Firefox Accessibility Extension
![Page 42: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/42.jpg)
LowBrowse Bundle
![Page 43: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/43.jpg)
LowBrowse Bundle
![Page 44: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/44.jpg)
LowBrowse Bundle
![Page 45: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/45.jpg)
Guia de acessibilidade - http://www.acessibilidadelegal.com/13-guia.php
![Page 46: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/46.jpg)
Tecnologias assistivas
Apontador de cabeça
Mouse especial para deficiente visual ou motor
Leitor de tela gráfico
Leitor de tela textual
Teclado virtual windows
Impressora braile
![Page 47: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/47.jpg)
Alguns uso das tecnologias assistivas
![Page 48: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/48.jpg)
![Page 49: Razões para tornar um web site acessível](https://reader031.fdocumentos.tips/reader031/viewer/2022020207/559af3c01a28abbd708b4765/html5/thumbnails/49.jpg)
BibliografiaFontes Utilizada:Wikipédia - Link: http://pt.wikipedia.org/wiki/Acessibilidade - em 10/03/2009
Serpro - Link: http://www.serpro.gov.br/acessibilidade/ - em 10/03/2009
Site do Maujor - Link: http://www.maujor.com/w3c/introwac.html
http://ies.portadoresdedeficiencia.vilabol.uol.com.br/DeficienciaVisual.htm
http://www.designacessivel.net/wiki/deficiencia-visual-parcial
Design e Avaliação de Tecnologia Web-acessível – XXV Congresso da Sociedade Brasileira de Computação - Amanda Meincke Melo e M. Cecília C. Baranauskas, Unicamp
Acessibilidade legal - http://www.acessibilidadelegal.com
Bengala Legal - www.bengalalegal.com
Milton Andrade – www.miltonandrade.com