Web acessível
Sumário
• Introdução
o O que é acessibilidade?
o A quem se destina?
• Acessibilidade na Web
• WCAG
o Princípios
o Recomendações
› Níveis de prioridade
• Validação
• Bibliografia
O que é acessibilidade?
• Segundo a legislação brasileira:
Acessibilidade é condição para utilização, com segurança e autonomia,
total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das
edificações, dos serviços de transporte e dos dispositivos, sistemas e
meios de comunicação e informação, por pessoa com deficiência ou
com mobilidade reduzida.
DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004.
https://www.planalto.gov.br/ccivil_03/_Ato2004-
2006/2004/Decreto/D5296.htm
O que é acessibilidade?
• Segundo a WAI(Web Accessibility Initiative):
Acessibilidade na Web significa que pessoas com deficiências podem
perceber, entender, navegar e interagir além de poder contribuir para a web.
O que é acessibilidade?
Acessibilidade na web diz respeito à facilidade de acesso, por
qualquer pessoa, independente de condições físicas, técnicas ou
dispositivos.
A quem se destina?
Acessibilidade é
para todos
A quem se destina?
• Deficientes visuais
o Cegos: Pessoas que navegam com leitores de tela
o Daltônicos: Dificuldade em enxergar cores e contrastes
o Baixa visão: Necessidade de aumento de tela para ler
• Deficientes auditivos
o Pessoas que não conseguem acompanhar um vídeo na internet com áudio.
• Deficientes motores
o Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou
que tenham dificuldades com o uso do mouse.
A quem se destina?
• Displays reduzidos
o Acessando a internet por um telefone celular.
• Deficiência temporária
o Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas,
tendinite, etc.
• Início de aprendizado
o Pessoas que estão iniciando seu processo de informatização ou crianças
descobrindo o computador.
• Idade avançada
o Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse.
A quem se destina?
Fazer um site acessível não é só se preocupar com um
determinado grupo de pessoas: É se preocupar com
todas as pessoas que acessam seu site.
Acessibilidade na Web
Os desenvolvedores de páginas Web devem levar em consideração
diferentes situações ao criar uma página. A Web pode ser utilizada por
pessoas que:
• sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados
tipos de informações;
• tenham dificuldade em ler ou compreender textos;
• não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;
• possuam tela que apresenta apenas texto, ou com dimensões
reduzidas, ou ainda uma conexão lenta com a Internet;
Acessibilidade na Web
Os desenvolvedores de páginas Web devem levar em consideração
diferentes situações ao criar uma página. A Web pode ser utilizada por
pessoas que:
• não falem ou compreendam fluentemente o idioma em que o
documento foi escrito;
• estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em
um ambiente barulhento ou fora de casa ou do trabalho);
• possuam uma versão ultrapassada de navegador web, diferente dos
habituais, um navegador por voz, ou um sistema operacional pouco
convencional.
WCAG 1.0
Web Content Accessibility Guidelines
• É uma recomendação W3C de 5 de maio de 1999
• As recomendações explicam como tornar o conteúdo Web acessível a pessoas
com deficiências.
No entanto, faz também com que o conteúdo da Web se torne de mais fácil acesso
a todos os usuários:
• independentemente da ferramenta usada (computadores de mesa, laptops,
telefones celulares, ou navegador por voz) e das
• limitações associadas ao respectivo uso (ambientes barulhentos, salas mal
iluminadas ou com excesso de iluminação, utilização sem o uso das mãos).
WCAG 2.0
• É uma recomendação W3C de 11 Dezembro de 2008
• Os critérios de sucesso do WCAG 2.0 são escritos como declarações
testáveis, que não são especificamente tecnológicas.
• As WCAG 2.0 foram desenvolvidas através do processo W3C em
colaboração com pessoas e organizações em todo o mundo, com o
objetivo de elaborar um padrão compartilhado referente à acessibilidade
para o conteúdo da Web, que satisfaça as necessidades das pessoas, das
organizações e dos governos, a nível internacional.
Níveis de Abordagem das WCAG 2.0
• Princípios - os principais princípios que constituem a fundação da
acessibilidade da Web: perceptível, operável, compreensível e robusto.
• Recomendações - apresentam os objetivos básicos que os
desenvolvedores devem atingir para tornar o conteúdo mais acessível aos
usuários com diferentes incapacidades.
• Critérios de Sucesso - para satisfazer as necessidades dos diferentes
grupos e situações, são definidos três níveis de conformidade:
o A (o mais baixo), AA e AAA (o mais elevado).
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
• Alternativas em Texto: Fornecer alternativas em texto.
o Atributo “alt”?
• Mídias com base no tempo: Fornecer alternativas para mídias com base
no tempo.
o Legendas e descrição do conteúdo sonoro
• Adaptável: Criar conteúdos que possam ser apresentados de diferentes
maneiras (por ex., um layout mais simples) sem perder informação ou
estrutura.
o CSS para impressão (print) e telas menores (handheld)
Princípio 2: Operável
Os componentes de interface de usuário e a navegação têm de ser
operáveis
• Acessível por Teclado: Fazer com que toda a funcionalidade fique
disponível a partir do teclado.
o Estruturação do conteúdo
• Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que
possa causar ataques epilépticos.
o Evitar piscar de telas
• Navegável: Fornecer formas de ajudar os usuários a navegar, localizar
conteúdos e determinar o local onde estão.
o Finalidade do link (contexto)
Princípio 3: Compreensível
A informação e a utilização da interface de utilizador têm de ser
compreensíveis.
• Legível: Tornar o conteúdo de texto legível e compreensível.
o Identificação do idioma, abreviaturas, etc.
• Previsível: Fazer com que as páginas Web surjam e funcionem de forma
previsível.
o Evitar que links abram novas janelas sem que o usuário saiba.
Princípio 4: Robusto
O conteúdo deve ser suficientemente robusto para ser interpretado de
forma fiável por uma ampla variedade de agentes de utilizador,
incluindo as tecnologias de apoio.
• Compatível: Maximizar a compatibilidade com atuais e futuros agentes de
usuário, incluindo tecnologias assistivas.
o Evitar elementos em desuso das tecnologias do W3C
Recomendações
As recomendações da W3C foram divididas em 3 prioridades:
• Prioridade 1 - O que os desenvolvedores web DEVEM satisfazer;
• Prioridade 2 - O que os desenvolvedores web DEVERIAM satisfazer;
• Prioridade 3 - O que os desenvolvedores web PODEM satisfazer;
Recomendação 1
• Fornecer alternativas ao conteúdo sonoro e visual
o Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer um
equivalente textual como parte do conteúdo dos elementos OBJECT e APPLET.
• Exemplos:
<img src=“imagem.jpg" alt="Foto do Arco do Triunfo">
<applet alt=“Descrição do aplicativo"></applet>
<input type="image" src=“enviar.png" value="Enviar" alt="Enviar dados">
Recomendação 1
<img src="logos.gif" alt="Logotipos" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="79,105,58" href="logo-01.htm" alt="Página do Logo 01">
<area shape="circle" coords="211,221,58" href="logo-02.htm" alt="Página do Logo 02">
</map>
Recomendação 2
• Não recorrer apenas à cor
o Clique no botão vermelho para continuar:
o Clique no número 3 para continuar:
• Indicar claramente qual o idioma utilizado
o Identificar claramente quaisquer mudanças de idioma no texto de um
documento, bem como nos equivalentes textuais (por ex., legendas).
HTML:
<html lang="pt-br">
XHTML:
<html xml:lang="pt-br“>
HTML (acrônimo para a expressão inglesa <span lang=“en”>HyperText Markup Language</span>, que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir
páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do
"casamento" dos padrões <span lang=“en”> HyTime</span> e SGML.
Recomendação 3
Recomendação 4
• Criar tabelas passíveis de transformação harmoniosa
o Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou
de coluna, utilizar marcações para associar as células de dados às células de
cabeçalho.
Recomendação 5
• Assegurar que as páginas dotadas de novas tecnologias sejam transformadas
harmoniosamente
o Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de
estilo.
Recomendação 6
• Assegurar a clareza e a simplicidade dos documentos
○ Utilizar linguagem mais clara e simples possível, adequada ao conteúdo do
site.
Um site com linguagem clara facilita a possibilidade de aprofundamento
do usuário em seu conteúdo.
o Complementar o texto com apresentações gráficas ou sonoras;
Validação
• A validação da acessibilidade deve ser feita por meio de ferramentas
automáticas e da revisão direta. Os métodos automáticos são
geralmente rápidos, mas não são capazes de identificar todas as
variantes da acessibilidade.
• A avaliação humana pode ajudar a garantir a clareza da linguagem e a
facilidade da navegação.
Validação
1 - Utilizar uma ferramenta de acessibilidade automatizada, e uma
ferramenta de validação de navegadores.
2 - Validar a sintaxe (por ex., HTML, XML).
o http://validator.w3.org/
3 - Validar as folhas de estilo (por ex., CSS).
○http://jigsaw.w3.org/css-validator/
4 - Utilizar um navegador exclusivamente textual ou um emulador.
Validação
5 - Utilizar vários navegadores gráficos, com:
o som e gráficos ativos;
o sem gráficos;
o sem som;
o sem mouse;
o sem carregar frames, programas interpretáveis, folhas de estilo ou applets.
6 - Utilizar vários navegadores, antigos e recentes.
7 - Utilizar um navegador de emissão automática de fala, um leitor de tela,
software de ampliação, uma tela de pequenas dimensões.
Validação
8 - Utilizar corretores ortográficos e gramaticais. A eliminação de problemas
gramaticais aumenta o grau de compreensão.
9 - Rever o documento, verificando sua clareza e simplicidade.
10 - Peça a pessoas com deficiências que revejam os documentos.
Web acessível na prática
Bibliografia
• BARBOSA, S. J.; SILVA B. S. Interação Humano-Computador. Rio de Janeiro:
Elsevier, 2010.
• http://www.maujor.com/tutorial/acessibilidade/tentest.php
• http://www.w3c.br/palestras/2009/conip2009/slidy/template.html
• http://www.w3.org/WAI/
• http://www.w3.org/Translations/WCAG20-pt-PT/#guidelines

Web acessível

  • 1.
  • 2.
    Sumário • Introdução o Oque é acessibilidade? o A quem se destina? • Acessibilidade na Web • WCAG o Princípios o Recomendações › Níveis de prioridade • Validação • Bibliografia
  • 3.
    O que éacessibilidade? • Segundo a legislação brasileira: Acessibilidade é condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de comunicação e informação, por pessoa com deficiência ou com mobilidade reduzida. DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004. https://www.planalto.gov.br/ccivil_03/_Ato2004- 2006/2004/Decreto/D5296.htm
  • 4.
    O que éacessibilidade? • Segundo a WAI(Web Accessibility Initiative): Acessibilidade na Web significa que pessoas com deficiências podem perceber, entender, navegar e interagir além de poder contribuir para a web.
  • 5.
    O que éacessibilidade? Acessibilidade na web diz respeito à facilidade de acesso, por qualquer pessoa, independente de condições físicas, técnicas ou dispositivos.
  • 6.
    A quem sedestina? Acessibilidade é para todos
  • 7.
    A quem sedestina? • Deficientes visuais o Cegos: Pessoas que navegam com leitores de tela o Daltônicos: Dificuldade em enxergar cores e contrastes o Baixa visão: Necessidade de aumento de tela para ler • Deficientes auditivos o Pessoas que não conseguem acompanhar um vídeo na internet com áudio. • Deficientes motores o Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou que tenham dificuldades com o uso do mouse.
  • 8.
    A quem sedestina? • Displays reduzidos o Acessando a internet por um telefone celular. • Deficiência temporária o Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinite, etc. • Início de aprendizado o Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o computador. • Idade avançada o Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse.
  • 9.
    A quem sedestina? Fazer um site acessível não é só se preocupar com um determinado grupo de pessoas: É se preocupar com todas as pessoas que acessam seu site.
  • 10.
    Acessibilidade na Web Osdesenvolvedores de páginas Web devem levar em consideração diferentes situações ao criar uma página. A Web pode ser utilizada por pessoas que: • sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados tipos de informações; • tenham dificuldade em ler ou compreender textos; • não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los; • possuam tela que apresenta apenas texto, ou com dimensões reduzidas, ou ainda uma conexão lenta com a Internet;
  • 11.
    Acessibilidade na Web Osdesenvolvedores de páginas Web devem levar em consideração diferentes situações ao criar uma página. A Web pode ser utilizada por pessoas que: • não falem ou compreendam fluentemente o idioma em que o documento foi escrito; • estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em um ambiente barulhento ou fora de casa ou do trabalho); • possuam uma versão ultrapassada de navegador web, diferente dos habituais, um navegador por voz, ou um sistema operacional pouco convencional.
  • 12.
    WCAG 1.0 Web ContentAccessibility Guidelines • É uma recomendação W3C de 5 de maio de 1999 • As recomendações explicam como tornar o conteúdo Web acessível a pessoas com deficiências. No entanto, faz também com que o conteúdo da Web se torne de mais fácil acesso a todos os usuários: • independentemente da ferramenta usada (computadores de mesa, laptops, telefones celulares, ou navegador por voz) e das • limitações associadas ao respectivo uso (ambientes barulhentos, salas mal iluminadas ou com excesso de iluminação, utilização sem o uso das mãos).
  • 13.
    WCAG 2.0 • Éuma recomendação W3C de 11 Dezembro de 2008 • Os critérios de sucesso do WCAG 2.0 são escritos como declarações testáveis, que não são especificamente tecnológicas. • As WCAG 2.0 foram desenvolvidas através do processo W3C em colaboração com pessoas e organizações em todo o mundo, com o objetivo de elaborar um padrão compartilhado referente à acessibilidade para o conteúdo da Web, que satisfaça as necessidades das pessoas, das organizações e dos governos, a nível internacional.
  • 14.
    Níveis de Abordagemdas WCAG 2.0 • Princípios - os principais princípios que constituem a fundação da acessibilidade da Web: perceptível, operável, compreensível e robusto. • Recomendações - apresentam os objetivos básicos que os desenvolvedores devem atingir para tornar o conteúdo mais acessível aos usuários com diferentes incapacidades. • Critérios de Sucesso - para satisfazer as necessidades dos diferentes grupos e situações, são definidos três níveis de conformidade: o A (o mais baixo), AA e AAA (o mais elevado).
  • 15.
    Princípio 1: Perceptível Ainformação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber • Alternativas em Texto: Fornecer alternativas em texto. o Atributo “alt”? • Mídias com base no tempo: Fornecer alternativas para mídias com base no tempo. o Legendas e descrição do conteúdo sonoro • Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras (por ex., um layout mais simples) sem perder informação ou estrutura. o CSS para impressão (print) e telas menores (handheld)
  • 16.
    Princípio 2: Operável Oscomponentes de interface de usuário e a navegação têm de ser operáveis • Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado. o Estruturação do conteúdo • Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que possa causar ataques epilépticos. o Evitar piscar de telas • Navegável: Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. o Finalidade do link (contexto)
  • 17.
    Princípio 3: Compreensível Ainformação e a utilização da interface de utilizador têm de ser compreensíveis. • Legível: Tornar o conteúdo de texto legível e compreensível. o Identificação do idioma, abreviaturas, etc. • Previsível: Fazer com que as páginas Web surjam e funcionem de forma previsível. o Evitar que links abram novas janelas sem que o usuário saiba.
  • 18.
    Princípio 4: Robusto Oconteúdo deve ser suficientemente robusto para ser interpretado de forma fiável por uma ampla variedade de agentes de utilizador, incluindo as tecnologias de apoio. • Compatível: Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas. o Evitar elementos em desuso das tecnologias do W3C
  • 19.
    Recomendações As recomendações daW3C foram divididas em 3 prioridades: • Prioridade 1 - O que os desenvolvedores web DEVEM satisfazer; • Prioridade 2 - O que os desenvolvedores web DEVERIAM satisfazer; • Prioridade 3 - O que os desenvolvedores web PODEM satisfazer;
  • 20.
    Recomendação 1 • Forneceralternativas ao conteúdo sonoro e visual o Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer um equivalente textual como parte do conteúdo dos elementos OBJECT e APPLET. • Exemplos: <img src=“imagem.jpg" alt="Foto do Arco do Triunfo"> <applet alt=“Descrição do aplicativo"></applet> <input type="image" src=“enviar.png" value="Enviar" alt="Enviar dados">
  • 21.
    Recomendação 1 <img src="logos.gif"alt="Logotipos" border="0" usemap="#Map"> <map name="Map"> <area shape="circle" coords="79,105,58" href="logo-01.htm" alt="Página do Logo 01"> <area shape="circle" coords="211,221,58" href="logo-02.htm" alt="Página do Logo 02"> </map>
  • 22.
    Recomendação 2 • Nãorecorrer apenas à cor o Clique no botão vermelho para continuar: o Clique no número 3 para continuar:
  • 23.
    • Indicar claramentequal o idioma utilizado o Identificar claramente quaisquer mudanças de idioma no texto de um documento, bem como nos equivalentes textuais (por ex., legendas). HTML: <html lang="pt-br"> XHTML: <html xml:lang="pt-br“> HTML (acrônimo para a expressão inglesa <span lang=“en”>HyperText Markup Language</span>, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões <span lang=“en”> HyTime</span> e SGML. Recomendação 3
  • 24.
    Recomendação 4 • Criartabelas passíveis de transformação harmoniosa o Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, utilizar marcações para associar as células de dados às células de cabeçalho.
  • 25.
    Recomendação 5 • Assegurarque as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente o Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de estilo.
  • 26.
    Recomendação 6 • Assegurara clareza e a simplicidade dos documentos ○ Utilizar linguagem mais clara e simples possível, adequada ao conteúdo do site. Um site com linguagem clara facilita a possibilidade de aprofundamento do usuário em seu conteúdo. o Complementar o texto com apresentações gráficas ou sonoras;
  • 27.
    Validação • A validaçãoda acessibilidade deve ser feita por meio de ferramentas automáticas e da revisão direta. Os métodos automáticos são geralmente rápidos, mas não são capazes de identificar todas as variantes da acessibilidade. • A avaliação humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegação.
  • 28.
    Validação 1 - Utilizaruma ferramenta de acessibilidade automatizada, e uma ferramenta de validação de navegadores. 2 - Validar a sintaxe (por ex., HTML, XML). o http://validator.w3.org/ 3 - Validar as folhas de estilo (por ex., CSS). ○http://jigsaw.w3.org/css-validator/ 4 - Utilizar um navegador exclusivamente textual ou um emulador.
  • 29.
    Validação 5 - Utilizarvários navegadores gráficos, com: o som e gráficos ativos; o sem gráficos; o sem som; o sem mouse; o sem carregar frames, programas interpretáveis, folhas de estilo ou applets. 6 - Utilizar vários navegadores, antigos e recentes. 7 - Utilizar um navegador de emissão automática de fala, um leitor de tela, software de ampliação, uma tela de pequenas dimensões.
  • 30.
    Validação 8 - Utilizarcorretores ortográficos e gramaticais. A eliminação de problemas gramaticais aumenta o grau de compreensão. 9 - Rever o documento, verificando sua clareza e simplicidade. 10 - Peça a pessoas com deficiências que revejam os documentos.
  • 31.
  • 32.
    Bibliografia • BARBOSA, S.J.; SILVA B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2010. • http://www.maujor.com/tutorial/acessibilidade/tentest.php • http://www.w3c.br/palestras/2009/conip2009/slidy/template.html • http://www.w3.org/WAI/ • http://www.w3.org/Translations/WCAG20-pt-PT/#guidelines