Acessibilidade na WebPROF(A). MSC. HELENA MACEDO REIS

O que é acessibilidade na web?

”Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento”

Cenários de uso da WEB

•Usuário com tendinite crônica emite comandos ao computador via voz para preencher um formulário

•Usuário com mobilidade reduzida realiza compras de livros pela Internet

Cenários de uso da WEB

•Pessoa idosa, com catarata e audição reduzida, acessa Webmail, mantido por seu provedor de acesso à Internet, com auxílio de um leitor de telas; seu sistema operacional é o Windows

Cenários de uso da WEB

•Alunos de escola de ensino fundamental acessam sites com conteúdos educacionais; seu acesso à rede é lento e o sistema operacional que utilizam é o Linux; um desses alunos é cego

Cenários de uso da WEB•Participantes de um programa de inclusão digital acessam a Internet com máquinas e navegadores antigos

•Estudante universitária, destra, está com seu braço direito engessado; prefere usar o teclado, a ter que utilizar o mouse com a mão esquerda, para fazer pesquisas na biblioteca digital de sua universidade

Cenários de uso da WEB•Participantes de um programa de inclusão digital acessam a Internet com máquinas e navegadores antigos

•Estudante universitária, destra, está com seu braço direito engessado; prefere usar o teclado, a ter que utilizar o mouse com a mão esquerda, para fazer pesquisas na biblioteca digital de sua universidade

Cenários de uso da WEB

•Aluna cega realiza sua matrícula via Internet; para leitura das informações, utiliza seu leitor de telas preferido, o teclado como dispositivo de entrada, e imprime seu comprovante de matrícula em braile

Cenários de uso da WEB

•Aluno surdo, cuja primeira língua é a Língua Brasileira de Sinais (LIBRAS), participa em um curso à distância via Web

•Estrangeiro procura informações sobre programas de pós-graduação no site da UFMG

Cenários de uso da WEB•Usuário afásico, com dificuldades em oralizar suas ideias, faz novos amigos em sala de bate-papo

•Funcionária com baixa visão deseja conhecer as atividades oferecidas pela Faculdade de Educação Física no site da instituição; para isso, além de um programa ampliador de telas, usa um programa leitor de telas

Cenários de uso da WEB

•Estudantes universitários acessam conteúdo disponibilizado na Web via interface de televisão digital interativa

•Usuário deseja obter as últimas notícias de seu jornal preferido via celular

Cenários de uso da WEB

•Usuário com paralisia cerebral, para participar de um fórum de discussões, utiliza o teclado com auxílio de uma ponteira de cabeça, além de um dispositivo apontador do tipo eyegaze system

Dispositivos de acessabilidade

Eyegaze Systems – interação com o olho

Dispositivos de acessabilidade

Teclado Virtual do Windows

Dispositivos de acessabilidade

Acesso ao computador via voz

Dispositivos de acessabilidade

Ponteira de Cabeça

Lente de aumento do Windows

Dispositivos de acessabilidade● Teclados alternativos

Dispositivos de acessabilidade

● Leitores de tela com

síntese de voz

O que é acessibilidade para o W3C?Acessibilidade na web significa acesso para todos independentemente de qualquer tipo de limitação pessoal

•Aplicações e sítios na web que pessoas com necessidades especiais possam

perceber, entender, navegar e interagir

•Browsers e tocadores que possam ser usados efetivamente e que

funcionem com tecnologias assistivas usadas por pessoas com limitações

• Ferramentas de autoria e novas tecnologias web que suportem produção

de sítios e conteúdos para web acessíveis

Objetivos de longo prazo?•Web para todos

• Independente da língua, da habilidade dos usuários, da localização geográfica ou do dispositivo usado para acesso

•Web em todas as coisas

• Não somente em PCs, mas em telefones, PDAs, Televisão …

•Web baseada no conhecimento: pesquisa e compartilhamento avançados

• Informações para serem processadas por humanos e máquinas

•Confiança e confidencialidade

• Tecnologias para ambientes colaborativos

• Uma web que garanta responsabilização, segurança, confiança e confidencialidade

Iniciativa Accessibilidade na Web - WAIFunciona de acordo com o Processo W3C para prover:

•Suporte de acessibilidade nas tecnologias W3C

•Regras para implementar acessibilidade

•Métodos para avaliar acessibilidade

•Capacitação e expansão das atividades

•Coordenação com P&D (Pesquisa e Desenvolvimento)

Escopo da acessibilidade na web• Foco nas pessoas com limitações de visão e audição física, cognitiva ou

neurológica

•É muito relevante para pessoas idosas com limitações funcionais relacionadas a idade

•Beneficia muitos outros grupos, incluindo:

• Limitações temporárias e situacionais

• Limitações econômicas e sociais

•Comunidades rurais ou localizadas remotamente

•Usuários de novas tecnologias móveis

Exemplos de barreiras na Web• Falta de textos alternativos para imagens, vídeo e áudio

• Formulários e controles que não podem ser operados pelo teclado

•Estrutura e layout de sites inconsistentes ou complexos

•Tamanhos e cores de fontes que não podem ser adaptados pelo usuário

•Marcação inválida ou estrutura de marção insuficiente

• ...

Padrões W3C para acessibilidade na web•Os padrões W3C para web são desenvolvidos internacionalmente de uma

maneira cooperada

•Os padrões W3C para web são livres de royalties e estão disponíveis

gratuitamente

•O processo de desenvolvimento dos padrões é aberto com diversas

maneiras de participação

•Há política para traduções voluntárias ou autorizadas

•Os padrões W3C para web são reconhecidos em diversos países, inclusive

o Brasil

Normas de acessibilidade web do W3C/WAI• Normas de acessibilidade em conteúdo para web (WCAG) – define

as exigências e critérios específicos para desenvolvedores de web sites

• Normas de acessibilidade para ferramentas de autoria (ATAG) –

foca nos softwares que são usados para gerar conteúdos web

• Normas de acessibilidade para ferramentas de usuário (UAAG) –

foca os navegadores e media players que renderizam conteúdos web

•Primeira versão foi publicada em 1999

•Cumpriu o papel de conscientização e contribuiu para uma web

mais inclusiva

•A segunda versão está em desenvolvimento para:

•Prover melhores critérios de testes de acessibilidade

•Atualizar para as novas tecnologias web

•WCAG 2.0 está no estágio final de teste

Versão 2.0 das normas WCAG – situação atual

•No desenvolvimento técnico de novos padrões e

recursos

•No desenvolvimento de material educacional e

promocional

•No oferecimento de comentários nas listas de

discussão

•Na participação do desenvolvimento de traduções para

a língua portuguesa

Toda a participação é bem-vinda no W3C/WAI

O Projeto WAI-AGE foi criado pela Comunidade Européia com os

objetivos de:

•Compreender melhor as necessidades de acessibilidade dos

usários idosos

•Convidar a comunidade de idosos a participar do W3C-WAI

•Refletir e compartilhar as descobertas nos espaços de Recursos

WAI

•Manter informado sobre o desenvolvimento de novas soluções

técnicas

Educação e Harmonização para Idosos - WAI-AGE

O W3C tem um processo definido para traduções autorizadas:

•Uma organização responsável pela tradução (LTO) inicia o

processo

•Diversos atores da comunidade são convidados a participar do

processo

•A organização responsável (LTO) deve comprovar a obtenção de

consensos e capacidade de resolver problemas reportados

•Uma vez que a comunidade chega a um consenso a tradução é

autorizada

Política W3C para traduções autorizadas

Tecnologia Assistiva“É uma área do conhecimento, de característica interdisciplinar, queengloba produtos, recursos, metodologias, estratégias, práticas eserviços que objetivam promover a funcionalidade, relacionada àatividade e participação de pessoas com deficiência, incapacidades oumobilidade reduzida, visando sua autonomia, independência,qualidade de vida e inclusão social"

(Comitê de Ajudas Técnicas – CAT -http://www.pessoacomdeficiencia.gov.br/app/publicacoes/tecnologia-assistiva)

Tecnologia AssistivaSegundo o WCAG (1999), tecnologia assistiva consiste emhardware ou software projetado para apoiar pessoascom deficiência, em atividades do cotidiano. Exemplos:

• Leitor de Tela

• Navegador Textual

• Navegador com Voz

• Ampliador de Tela

• Teclado Alternativo

• Síntese de Braille

• Reconhecedor de Voz

• Mouse Adaptado

Leitores de tela• Software utilizado principalmente por pessoas cegas, que

fornece informações por meio de síntese de voz sobre oselementos exibidos na tela do computador

• Navegação na Web com um leitor de tela

– Lendo toda a página (navegação por setas)

Leitores de tela– Lendo os links (navegação com a tecla Tab)

– Lendo os cabeçalhos (navegação com a tecla h)

http://emag.governoeletronico.gov.br/cursodesenvolvedor/introducao/tecnologia-assistiva-leitores-de-tela.html

10

Principais leitores de tela• JAWS: leitor de tela pago para Windows

– http://www.freedomscientific.com/

• NVDA: leitor de tela gratuito para Windows– http://www.nvaccess.org/

• Virtual Vision: leitor de tela pago para Windows– http://www.micropower.com.br/

• Orca: leitor de tela gratuito para Linux– https://wiki.gnome.org/action/show/Projects/Orca?action=show&redirect=Orca

• VoiceOver: leitor de tela para IOS que acompanha os dispositivos da Apple– http://www.apple.com/br/accessibility/osx/voiceover/

Tecnologia Assistiva• Ampliadores de tela – usuários com baixa visão

Tecnologia Assistiva• DOSVOX - sistema operacional que utiliza sintetizador

de voz em língua portuguesa e outros idiomas, epossui aplicativos como editores de textos,gerenciadores de e-mail, aplicativos de bate-papo,entre outros

– Disponível em: http://intervox.nce.ufrj.br/dosvox/

– Roda em ambiente Windows

– Criando pela UFRJ

– Visão geral: http://www.youtube.com/watch?v=NHB66GEiUVk

Diretrizes de Acessibilidade• Web Content Accessibility Guidelines (WCAG 2.0) [WCAG,

2008] – Recomendação do W3C

– Disponível em: http://www.w3.org/Translations/WCAG20-pt-br/

– 12 diretrizes divididas em 61 critérios de sucesso e 3 níveis de

conformidade A (mais baixo), AA, AAA (mais elevado)

• Princípios

– 1. O conteúdo deve ser perceptível

– 2. Os elementos da interface devem ser operáveis

– 3. Os conteúdos e controles da interface devem ser de fácil entendimento

– 4. O conteúdo deve ser suficientemente robusto para funcionar com tecnologias atuais e outrastecnologias vindouras (inclusive tecnologias assistivas)

Diretrizes de Acessibilidade• Modelo de Acessibilidade em Governo Eletrônico

(eMAG), versão 3.1– Disponível em:

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG

– Baseia-se na WCAG 2.0

– Possui 45 recomendações

– Curso de acessibilidade para conteudistas e desenvolvedores: http://emag.governoeletronico.gov.br/curso/index.html

WCAG 2.01.1. Alternativas em Texto: Fornecer alternativastextuais para qualquer conteúdo não textual

• Exemplo:

<img src="celula.jpg" alt="Imagem de uma célula“

longdesc="Célular contendo núcleo, citoplasma, e

organelas citoplasmáticas"/>

WCAG 2.0• Uso do elemento label para auxiliar os usuários a

compreender a finalidade do campo

Contra-exemplo:

WCAG 2.01.2. Mídias com base em tempo: Forneceralternativas para mídias baseadas em tempo

• áudios: fornecer descrição textual

• vídeos: fornecer descrição sonora(audiodescrição) ou textual (legendas)

WCAG 2.01.3. Garantir que as informações e a estrutura dosite estejam separadas da apresentação

Contra-exemplo:

a)Para continuar, clique no link azul, e paracancelar, clique no link vermelho:

WCAG 2.01.4. Facilitar a visualização do conteúdo aos usuários, incluindo a separação entre o primeiro plano e o plano de fundo

Atentar para o contraste das cores!!!

Não consigo ler isso!!!!

Visão normal

Tipos de Daltonismo

Protanopia (Deficiências em vermelho)

Deuteranopia (Deficiências em verde)

Tritanopia (Deficiências em azul)

40

Acromatopsia (Deficiências todas as cores)

Nunca utilize somente cor para

transmitir uma informação na Web!!

WCAG 2.02.1. Permitir que todas as funcionalidades sejamoperáveis via teclado

• Prover teclas de atalho

2.2 Permitir que os usuários tenham controlesobre o limite de tempo para leitura ou interação

• Contra-exemplo: Notícias “rolantes”

WCAG 2.03.1. O conteúdo textual deve ser fácil de ler eentender

• Uso do atributo lang

• Exemplo:

<html lang=“pt-br”>

...

Esse texto está em português <span lang=“en”>and

this one in english</span>

Avaliação de acessibilidade • Objetivo: encontrar barreiras de acessibilidade

nas páginas Web

• Métodos

– Avaliação automática

– Avaliação manual

– Testes com os usuários finais

Avaliação Automática de Acessibilidade

• Ferramentas automáticas podem checar problemas de acessibilidade de forma automática

• Exemplos:– daSilva (http://www.dasilva.org.br/)

– TAW (http://www.tawdis.net/)

– AChecker (http://achecker.ca/checker/)

– WAVE (http://wave.webaim.org/)

– Mais opções: http://www.w3.org/WAI/ER/tools/

Dicas importantes para melhorar aacessibilidade

• Seguir as diretrizes de acessibilidade (WCAG 2.0 eeMAG)

• Validação automática de acessibilidade• Teste com tecnologia assistiva• Coloque a acessibilidade na rotina do

desenvolvimento

“Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.”

Adaptado da arquiteta Thais Frota

Atividade da semana• Realize as avaliações automáticas dos 4 sites:– www.uol.com.br

– www.fesc.com.br

– www.previdencia.gov.br/

– www.saocarlosagora.com.br/

• Utilizando a ferramenta AChecker (www.achecker.ca)

• Escolhendo as opções: WCAG 2.0(level AAA) e View byguideline

• Enviar o relatório final de avaliação (em pdf) no Moodle até segunda (02/10) às 23h