SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
Como construir
sites acessíveis




  ©2012 Cláudio Diniz Alves e Janicy Rocha
1 - Separando marcação/conteúdo (HTML/XHTML) de
apresentação (CSS).

Exemplo:


2 - Seguindo as diretrizes de Acessibilidade
•	WCAG
•	e-MAG
WCAG 1.0:
Composto por 14 diretrizes de acessibilidade organizadas em torno de 2 princípios.
                                1.	 Fornecer alternativas equivalentes ao conteúdo sonoro e visual
                                2.	 Não recorrer apenas à cor para a percepção do conteúdo
                                3.	 Utilizar corretamente anotações e folhas de estilo
                                4.	 Indicar claramente qual a língua utilizada
                                5.	 Criar tabelas passíveis de transformação harmoniosa
             Assegurar uma      6.	Assegurar que as páginas dotadas de novas tecnologias sejam
              transformação        transformadas harmoniosamente
             harmoniosa das     7.	 Assegurar o controle do usuário sobre as alterações temporais
                 páginas            do conteúdo
                                8.	Assegurar a acessibilidade direta de interfaces do usuário
                                   integradas
                                9.	Pautar a concepção pela independência face a dispositivos
                                10.	 Utilizar soluções de transição
                                11.	 Utilizar as tecnologias e as diretrizes do W3C
                                12.	 Fornecer contexto e orientações
            Tornar o conteúdo
             compreensível e    13.	 Fornecer mecanismos de navegação claros
                navegável       14.	 Assegurar a clareza e a simplicidade dos documentos
WCAG 1.0:
Pontos de Verificação: são associados a cada diretriz
e explicam como ela deve ser aplicada, oferecendo
exemplos para sua implementação.
Níveis de Prioridade: são associados aos Pontos de
Verificação de cada recomendação e representam o
impacto destes na acessibilidade do site.
Níveis de Conformidade: grau de acessibilidade do
site (A, AA ou AAA) medido a partir dos Níveis de
Prioridade.
Nível de Conformidade
 Nível de        Significado da       (conforme atendimento a
                                     todas as recomendações da
Prioridade         Prioridade             cada prioridade)
                                      A    AA        AAA
               Requisitos básicos
Prioridade 1                          X     X         X
               para acessibilidade
                  Remoção de
                  significativas
Prioridade 2                                X         X
                   barreiras de
                 acessibilidade
               Melhoria do acesso
Prioridade 3                                          X
                  ao conteúdo
Exemplo:
Princípio: Assegurar uma transformação harmoniosa
das páginas.
Diretriz: Fornecer alternativas equivalentes ao
conteúdo sonoro e visual.
Ponto de verificação: Fornecer um texto equivalente a
cada elemento não-textual.
Nível de Prioridade: 1
WCAG 2.0:
Composto por 12 diretrizes de acessibilidade organizadas em torno de 4 princípios
    Princípios                                    Diretrizes
                   1.1.	 Fornecer alternativas textuais para conteúdos não textuais
                   1.2.	Fornecer alternativas   sincronizadas    para   apresentações
                        multimídia
1.	 Perceptível    1.3.	Criar o conteúdo apresentável de diferentes maneiras, sem que
                        a informação ou estrutura se percam
                   1.4.	Separar o primeiro e segundo plano, facilitando a visão e a
                        audição do conteúdo
                   2.1.	Tornar todas as funções disponíveis pelo teclado
                   2.2.	Fornecer tempo suficiente de leitura e uso do conteúdo
2.	 Operável       2.3.	Não criar conteúdos que pisquem, causando ataques ou
                        ausências
                   2.4.	Fornecer auxílio de navegação e localização aos usuários
                   3.1.	Disponibilizar conteúdo textual compreensível e legível
3.	 Compreensível 3.2.	Tornar o funcionamento das páginas previsível
                   3.3.	Fornecer auxílio na prevenção e correção de erros
                   4.1.	Maximizar a compatibilidade com agentes de usuários atuais e
4.	 Robusto
                        futuros, incluindo as tecnologias assistivas
e-MAG 1.0: primeira versão do Modelo de
Acessibilidade para o Governo Eletrônico, baseada no
WCAG 2.0, lançada em janeiro de 2005 e colocada em
Consulta Pública.
e-MAG 2.0: segunda versão do Modelo de
Acessibilidade para o Governo Eletrônico, lançada em
dezembro de 2005, contendo alterações sugeridas
durante a Consulta Pública.
•	O e-MAG 2.0 é composto por dois documentos:
•	Visão do Cidadão: direcionado aos cidadãos, define os 3 níveis de
 acessibilidade (A, AA e AAA), apresenta o histórico e os objetivos do
 modelo e divide os princípios de acessibilidade nas áreas de:
     •		Percepção: refere-se à apresentação do conteúdo, preocupando-se
       com a percepção de elementos como gráficos, imagens e sons.
     •	Operação: refere-se à manipulação da informação, preocupando-se
      em ofertar formas alternativas de acesso às informações e controle
      de navegação ao usuário.
     •	Entendimento: refere-se à compreensão do conteúdo,
      preocupando-se em garantir a apresentação de conteúdos
      compreensíveis a todos os usuários.
     •	Compatibilidade: refere-se à necessidade da adoção de
      tecnologias acessíveis e compatíveis com o modelo.
Cartilha Técnica: documento com 8 diretrizes de acessibilidade, às
quais estão vinculadas 57 recomendações de acessibilidade.

 Número                                     Diretriz
   1      Fornecer alternativas equivalentes para conteúdo gráfico e sonoro.
          Assegurar que o site seja legível e compreensível mesmo sem o uso de
    2
          formatações.
    3     Dar preferência às tecnologias de marcação e formatação.
          Assegurar que toda a informação seja interpretada corretamente, com clareza
    4
          e simplicidade.
          Assegurar que as tecnologias utilizadas funcionem - de maneira acessível -
    5
          independente de programas, versões e futuras mudanças.
    6     Assegurar o controle do usuário sobre a navegação no sítio.
    7     Identificar claramente os mecanismos de navegação.
          Em casos não contemplados pelas diretrizes anteriores, utilizar recursos
    8     reconhecidos por instituições com propriedade no assunto, como tecnologias
          acessíveis.
Segundo o e-MAG 2.0 o processo de acessibilidade
ocorre em 4 etapas distintas:
    •	Verificação da necessidade de tornar o
     conteúdo acessível;
    •	Aplicação e validação das recomendações;
    •	Promoção e divulgação da acessibilidade;
    •	Vigilância constante para que o site permaneça
     acessível.
e-MAG 3.0
Passou por consulta pública entre os meses de novembro de 2010 e
janeiro de 2011, sendo lançada oficialmente em setembro de 2011, com
diversas modificações estruturais em relação à versão 2.0:
      •	 Tornou-se um documento único, não mais dividido em duas
       partes, como na versão anterior;
      •	 Não adota mais dos níveis de prioridade A, AA e AAA,
       “visto que o padrão é voltado às páginas do Governo, não
       sendo permitidas exceções com relação ao cumprimento das
       recomendações” (BRASIL, 2011).
      •	 Não divide mais os princípios de acessibilidade nas áreas de
       percepção, operação, entendimento e compatibilidade.
e-MAG 3.0: apresenta 45 recomendações de acessibilidade,
classificadas nas seções de:

•	 arcação: contém recomendações específicas sobre a construção do código
 M
 HTML (HyperText Markup Language) das páginas dos websites, com foco na mar-
 cação (Markup), ou seja, no conjunto de códigos (tags) aplicados ao texto para
 adicionar informações particulares sobre ele;

•	 omportamento: contém recomendações específicas sobre o comportamento
 C
 das páginas dos websites (atualização, redirecionamento automáticos e outros)
 e dos elementos nelas contidos (scripts, Flash, conteúdos dinâmicos e outros);

•	 onteúdo/informação: contém recomendações específicas sobre o conteúdo das
 C
 páginas dos websites e das informações nelas contidas, como títulos e links cla-
 ros, sucintos e significativos, mecanismos para indicar a localização do usuário
 no website, descrição textual de conteúdos gráficos e outros;
•	 presentação/design: contém recomendações específicas sobre o design das
 A
 páginas dos websites, tais como layout, contraste entre cores, redimensiona-
 mento de textos e outros;

•	 ultimídia: contém recomendações específicas sobre a inserção de elementos
 M
 multimídia (vídeos e áudio) nas páginas dos websites, tais como legendas, audi-
 odescrição, controles de áudio e de animação e outros;

•	 ormulário: contém recomendações específicas para os formulários presentes
 F
 nas páginas dos websites, tais como alternativas textuais para botões em forma-
 to de imagens, ordem lógica de navegação/tabulação, instruções para a entrada
 de dados, captchas acessíveis e outros.
e-MAG 3.0 - Processo de Avaliação de Acessibilidade
  a)	 Validar os códigos do conteúdo HTML e das folhas de estilo;
  b)	 Verificar o fluxo de leitura da página, utilizando um navegador
      textual, como o Lynx, ou um leitor de tela (NVDA ou ORCA).
  c)	 Verificar o fluxo de leitura da página sem estilos, sem script e
      sem as imagens;
  d)	 Verificar as funcionalidades da barra de acessibilidade, aumen-
      tando e diminuindo a letra, modificando o contraste, etc.;
  e)	 Realizar a validação automática de acessibilidade utilizando o
      ASES e outros avaliadores automáticos;
  f)	 Realizar a validação manual, utilizando os checklists de vali-
      dação humana.
e-MAG 3.0 - Algumas considerações
O e-MAG possui uma recomendação polêmica:
RECOMENDAÇÃO 25 – Garantir a leitura e compreensão das informações
•	 A avaliação com usuários não consta como um dos passos do Processo de
 Avaliação de Acessibilidade. Entretanto o documento ressalta que uma etapa
 essencial da validação de uma página é a realização de testes com usuários
 com deficiência.
•	 O Mapa do Sítio não consta como uma recomendação de acessibilidade, mas
 é mencionado em outra seção do documento.
•	 Muitas recomendações são detalhadas em documentos externos (Formulári-
 os e Tabelas Acessíveis, Manual de Redação para a Web, etc), o que dificulta
 que elas sejam seguidas.
•	 Desde o lançamento da versão 3.0 do e-MAG, é recomendada sua adoção pe-
 los websites governamentais brasileiro, em substituição à versão 2.0, entre-
 tanto os avaliadores automáticos ainda não foram atualizados.
Diretrizes de Acessibilidade: exemplos práticos
MARCAÇÃO - Recomendação 6: Fornecer âncoras para ir direto a
um bloco de conteúdo.
MARCAÇÃO - Recomendação 9: Não abrir novas instâncias sem a
solicitação do usuário. Não devem ser utilizados:
•	 Pop-ups
•	 Aberturas de novas abas ou janelas
COMPORTAMENTO - Recomendação 11: Não criar páginas com
atualização automática periódica.
CONTEÚDO/INFORMAÇÃO - Recomendação 17: Oferecer um título
descritivo e informativo à página.
CONTEÚDO/INFORMAÇÃO – Recomendação 18: Disponibilizar
informação sobre a localização do usuário na página.
CONTEÚDO/INFORMAÇÃO – Recomendação 19: Descrever links
clara e sucintamente.
CONTEÚDO/INFORMAÇÃO – Recomendação 20: Fornecer
alternativa em texto para imagens no sítio.
FORMULÁRIOS - Recomendação 36: Fornecer alternativa em texto
para botões de imagens em formulários.




 <img src="crianca.jpg" alt="Foto de uma criança cheirando uma flor">
CONTEÚDO/INFORMAÇÃO – Recomendação 22: Disponibilizar
documentos em formatos acessíveis.
APRESENTAÇÃO/DESIGN - Recomendação 28: Oferecer contraste
mínimo entre plano de fundo e primeiro plano.
APRESENTAÇÃO/DESIGN - Recomendação 30: Permitir
redimensionamento de texto, sem perda de funcionalidade.
APRESENTAÇÃO/DESIGN - Recomendação 31: Dividir as áreas de
informação.
MULTIMIDIA - Recomendação 33: Fornecer alternativa para vídeo.
MULTIMIDIA - Recomendação 34: Fornecer alternativa para áudio.
MULTIMIDIA - Recomendação 35: Fornecer áudio-descrição para vídeo
pré-gravado.
MULTIMIDIA - Recomendação 36: Fornecer controle de áudio para som.
FORMULÁRIOS - Recomendação 42: Fornecer instruções para
entrada de dados.
FORMULÁRIOS - Recomendação 43: Identificar e descrever erros
de entrada de dados.
FORMULÁRIOS - Recomendação 44: Agrupar campos de
formulários.
FORMULÁRIOS - Recomendação 45: Fornecer captcha humano.
REFERÊNCIAS
http://www.slideshare.net/CassianaFerraz/acessibilidade-web-12581391
http://www.ivogomes.com/apresentacoes/acessibilidade-web.pdf
BRASIL. Decreto nº 5.296 de 02 de Dezembro de 2004. Diário Oficial da União, Brasília: Senado Federal, 03 dez.
2004. Disponível em: <http://www.trt02.gov.br/geral/tribunal2/Legis/Decreto/5296_04.html>.
BRASIL. Recomendações de Acessibilidade para Construção e Adaptação de Conteúdos do Governo Brasileiro na
Internet: eMag. Disponível em: <https://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG>.
DIAS, C. Usabilidade na Web: Criando Portais mais Acessíveis. Alta Books, 2007.
FERREIRA, Simone Bacellar Leal et al. Panorama da acessibilidade na web brasileira. In: Encontro Nacional dos
Programas de Pós Graduação em Administração, 2007, Rio de Janeiro. Anais do ENANPAD 2007.
NBR 9050: Associação Brasileira de Normas Técnicas. Acessibilidade de Pessoas Portadoras de Deficiências a
Edificações, Espaço, Mobiliário e Equipamentos Urbanos. ABNT. RJ. 1994. Disponível em <http://www.mpdft.
gov.br/sicorde/NBR9050-31052004.pdf>.
SERPRO. Serviço Federal de Processamento de Dados. Disponível em: <http://www.serpro.gov.br/
acessibilidade/>.
W3C. Web Content Accessibility Guidelines 1.0. 1999. Disponível em: <http://www.w3.org/TR/#tr_Web_Content_
Accessibility_Guidelines__WCAG_>

Mais conteúdo relacionado

Destaque

Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationDiaspark
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semânticasamuelfructuoso
 
Análise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLAAnálise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLAThiago Nascimento Oliveira
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenowaltermancheno66
 
Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalRichard Duchatsch Johansen
 
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
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesWillian Watanabe
 
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectUsing WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectReinaldo Ferraz
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidadeRenan Alfarth
 
Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTMLTales Augusto
 
01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de ProgramaçãoJorge Brandão
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaReinaldo Ferraz
 
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios GovBR
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...Claudio Diniz - Designer Gráfico
 

Destaque (20)

Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions application
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semântica
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Análise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLAAnálise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLA
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter mancheno
 
Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacional
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
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
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queries
 
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectUsing WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidade
 
Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTML
 
Seletores css
Seletores cssSeletores css
Seletores css
 
01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação
 
Web semantica
Web semanticaWeb semantica
Web semantica
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
 

Semelhante a Sites acessíveis

E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2Leo Serrao
 
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
 
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
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevLucas J Silva
 
DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011Hudson Augusto
 
Palestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadePalestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadeFernando Ruano
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbOtávio Souza
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2aiadufmg
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2aiadufmg
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveisLeandro Borges
 
Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0Paula Ferreira
 
Acessibilidade em CSS - TDC
Acessibilidade em CSS - TDCAcessibilidade em CSS - TDC
Acessibilidade em CSS - TDCLucas J Silva
 
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
 
Boas praticas na producao de conteudos acessiveis.pdf
Boas praticas na producao de conteudos acessiveis.pdfBoas praticas na producao de conteudos acessiveis.pdf
Boas praticas na producao de conteudos acessiveis.pdfwarez6666
 
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
 

Semelhante a Sites acessíveis (20)

Web acessível
Web acessívelWeb acessível
Web acessível
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
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)
 
Acessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaAcessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in Sampa
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
 
DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
 
Análise de Webstandars
Análise de WebstandarsAnálise de Webstandars
Análise de Webstandars
 
Palestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadePalestra - Testes de Acessibilidade
Palestra - Testes de Acessibilidade
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova Intrawebb
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
 
Acessibilidade em CSS - TDC
Acessibilidade em CSS - TDCAcessibilidade em CSS - TDC
Acessibilidade em CSS - TDC
 
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
 
USABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVELUSABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVEL
 
Boas praticas na producao de conteudos acessiveis.pdf
Boas praticas na producao de conteudos acessiveis.pdfBoas praticas na producao de conteudos acessiveis.pdf
Boas praticas na producao de conteudos acessiveis.pdf
 
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
 
sites-boas-praticas
sites-boas-praticassites-boas-praticas
sites-boas-praticas
 

Mais de aiadufmg

Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2aiadufmg
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2aiadufmg
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2aiadufmg
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2aiadufmg
 
LinkedIn - parte 2
LinkedIn - parte 2LinkedIn - parte 2
LinkedIn - parte 2aiadufmg
 
Last Fm - parte 2
Last Fm - parte 2Last Fm - parte 2
Last Fm - parte 2aiadufmg
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2aiadufmg
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2aiadufmg
 
Avaliacao de Interfaces
Avaliacao de InterfacesAvaliacao de Interfaces
Avaliacao de Interfacesaiadufmg
 
Acessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisAcessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisaiadufmg
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidadeaiadufmg
 
Design Universal
Design UniversalDesign Universal
Design Universalaiadufmg
 
Deficiências e Tecnologias Assistivas
Deficiências e Tecnologias AssistivasDeficiências e Tecnologias Assistivas
Deficiências e Tecnologias Assistivasaiadufmg
 
Ai ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingAi ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingaiadufmg
 

Mais de aiadufmg (20)

Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
LinkedIn - parte 2
LinkedIn - parte 2LinkedIn - parte 2
LinkedIn - parte 2
 
Last Fm - parte 2
Last Fm - parte 2Last Fm - parte 2
Last Fm - parte 2
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2
 
Avaliacao de Interfaces
Avaliacao de InterfacesAvaliacao de Interfaces
Avaliacao de Interfaces
 
Acessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisAcessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitais
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Design Universal
Design UniversalDesign Universal
Design Universal
 
Deficiências e Tecnologias Assistivas
Deficiências e Tecnologias AssistivasDeficiências e Tecnologias Assistivas
Deficiências e Tecnologias Assistivas
 
Flickr
FlickrFlickr
Flickr
 
Ai ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingAi ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsorting
 
Skoob
SkoobSkoob
Skoob
 
Livemocha
LivemochaLivemocha
Livemocha
 
Linked In
Linked InLinked In
Linked In
 
Delicious
DeliciousDelicious
Delicious
 
Last.fm
Last.fmLast.fm
Last.fm
 

Último

livro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensoriallivro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensorialNeuroppIsnayaLciaMar
 
Alemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf HitlerAlemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf Hitlerhabiwo1978
 
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHASMARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHASyan1305goncalves
 
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...azulassessoria9
 
O Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhosoO Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhosoVALMIRARIBEIRO1
 
APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.HandersonFabio
 
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdfufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdfManuais Formação
 
Testes de avaliação português 6º ano .pdf
Testes de avaliação português 6º ano .pdfTestes de avaliação português 6º ano .pdf
Testes de avaliação português 6º ano .pdfCsarBaltazar1
 
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na ÁfricaPeriodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na Áfricajuekfuek
 
Livro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-criançasLivro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-criançasMonizeEvellin2
 
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptxEB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptxIlda Bicacro
 
Sequência didática Carona 1º Encontro.pptx
Sequência didática Carona 1º Encontro.pptxSequência didática Carona 1º Encontro.pptx
Sequência didática Carona 1º Encontro.pptxCarolineWaitman
 
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptxSlides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptxLuizHenriquedeAlmeid6
 
Insegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoasInsegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoasdiegosouzalira10
 
O que é, de facto, a Educação de Infância
O que é, de facto, a Educação de InfânciaO que é, de facto, a Educação de Infância
O que é, de facto, a Educação de InfânciaHenrique Santos
 
Peça de teatro infantil: A cigarra e as formigas
Peça de teatro infantil: A cigarra e as formigasPeça de teatro infantil: A cigarra e as formigas
Peça de teatro infantil: A cigarra e as formigasBibliotecaViatodos
 
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptxSanta Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptxMartin M Flynn
 
UFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdf
UFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdfUFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdf
UFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdfManuais Formação
 

Último (20)

livro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensoriallivro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensorial
 
Alemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf HitlerAlemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf Hitler
 
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHASMARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
 
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...
 
O Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhosoO Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhoso
 
Poema - Maio Laranja
Poema - Maio Laranja Poema - Maio Laranja
Poema - Maio Laranja
 
APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.
 
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdfufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
 
Testes de avaliação português 6º ano .pdf
Testes de avaliação português 6º ano .pdfTestes de avaliação português 6º ano .pdf
Testes de avaliação português 6º ano .pdf
 
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na ÁfricaPeriodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
 
Livro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-criançasLivro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-crianças
 
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptxEB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
 
Sequência didática Carona 1º Encontro.pptx
Sequência didática Carona 1º Encontro.pptxSequência didática Carona 1º Encontro.pptx
Sequência didática Carona 1º Encontro.pptx
 
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptxSlides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
 
Insegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoasInsegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoas
 
O que é, de facto, a Educação de Infância
O que é, de facto, a Educação de InfânciaO que é, de facto, a Educação de Infância
O que é, de facto, a Educação de Infância
 
Peça de teatro infantil: A cigarra e as formigas
Peça de teatro infantil: A cigarra e as formigasPeça de teatro infantil: A cigarra e as formigas
Peça de teatro infantil: A cigarra e as formigas
 
Poema - Aedes Aegypt.
Poema - Aedes Aegypt.Poema - Aedes Aegypt.
Poema - Aedes Aegypt.
 
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptxSanta Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
 
UFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdf
UFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdfUFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdf
UFCD_8291_Preparação e confeção de peixes e mariscos_índice.pdf
 

Sites acessíveis

  • 1. Como construir sites acessíveis ©2012 Cláudio Diniz Alves e Janicy Rocha
  • 2. 1 - Separando marcação/conteúdo (HTML/XHTML) de apresentação (CSS). Exemplo: 2 - Seguindo as diretrizes de Acessibilidade • WCAG • e-MAG
  • 3. WCAG 1.0: Composto por 14 diretrizes de acessibilidade organizadas em torno de 2 princípios. 1. Fornecer alternativas equivalentes ao conteúdo sonoro e visual 2. Não recorrer apenas à cor para a percepção do conteúdo 3. Utilizar corretamente anotações e folhas de estilo 4. Indicar claramente qual a língua utilizada 5. Criar tabelas passíveis de transformação harmoniosa Assegurar uma 6. Assegurar que as páginas dotadas de novas tecnologias sejam transformação transformadas harmoniosamente harmoniosa das 7. Assegurar o controle do usuário sobre as alterações temporais páginas do conteúdo 8. Assegurar a acessibilidade direta de interfaces do usuário integradas 9. Pautar a concepção pela independência face a dispositivos 10. Utilizar soluções de transição 11. Utilizar as tecnologias e as diretrizes do W3C 12. Fornecer contexto e orientações Tornar o conteúdo compreensível e 13. Fornecer mecanismos de navegação claros navegável 14. Assegurar a clareza e a simplicidade dos documentos
  • 4. WCAG 1.0: Pontos de Verificação: são associados a cada diretriz e explicam como ela deve ser aplicada, oferecendo exemplos para sua implementação. Níveis de Prioridade: são associados aos Pontos de Verificação de cada recomendação e representam o impacto destes na acessibilidade do site. Níveis de Conformidade: grau de acessibilidade do site (A, AA ou AAA) medido a partir dos Níveis de Prioridade.
  • 5. Nível de Conformidade Nível de Significado da (conforme atendimento a todas as recomendações da Prioridade Prioridade cada prioridade) A AA AAA Requisitos básicos Prioridade 1 X X X para acessibilidade Remoção de significativas Prioridade 2 X X barreiras de acessibilidade Melhoria do acesso Prioridade 3 X ao conteúdo
  • 6. Exemplo: Princípio: Assegurar uma transformação harmoniosa das páginas. Diretriz: Fornecer alternativas equivalentes ao conteúdo sonoro e visual. Ponto de verificação: Fornecer um texto equivalente a cada elemento não-textual. Nível de Prioridade: 1
  • 7. WCAG 2.0: Composto por 12 diretrizes de acessibilidade organizadas em torno de 4 princípios Princípios Diretrizes 1.1. Fornecer alternativas textuais para conteúdos não textuais 1.2. Fornecer alternativas sincronizadas para apresentações multimídia 1. Perceptível 1.3. Criar o conteúdo apresentável de diferentes maneiras, sem que a informação ou estrutura se percam 1.4. Separar o primeiro e segundo plano, facilitando a visão e a audição do conteúdo 2.1. Tornar todas as funções disponíveis pelo teclado 2.2. Fornecer tempo suficiente de leitura e uso do conteúdo 2. Operável 2.3. Não criar conteúdos que pisquem, causando ataques ou ausências 2.4. Fornecer auxílio de navegação e localização aos usuários 3.1. Disponibilizar conteúdo textual compreensível e legível 3. Compreensível 3.2. Tornar o funcionamento das páginas previsível 3.3. Fornecer auxílio na prevenção e correção de erros 4.1. Maximizar a compatibilidade com agentes de usuários atuais e 4. Robusto futuros, incluindo as tecnologias assistivas
  • 8. e-MAG 1.0: primeira versão do Modelo de Acessibilidade para o Governo Eletrônico, baseada no WCAG 2.0, lançada em janeiro de 2005 e colocada em Consulta Pública. e-MAG 2.0: segunda versão do Modelo de Acessibilidade para o Governo Eletrônico, lançada em dezembro de 2005, contendo alterações sugeridas durante a Consulta Pública.
  • 9. • O e-MAG 2.0 é composto por dois documentos: • Visão do Cidadão: direcionado aos cidadãos, define os 3 níveis de acessibilidade (A, AA e AAA), apresenta o histórico e os objetivos do modelo e divide os princípios de acessibilidade nas áreas de: • Percepção: refere-se à apresentação do conteúdo, preocupando-se com a percepção de elementos como gráficos, imagens e sons. • Operação: refere-se à manipulação da informação, preocupando-se em ofertar formas alternativas de acesso às informações e controle de navegação ao usuário. • Entendimento: refere-se à compreensão do conteúdo, preocupando-se em garantir a apresentação de conteúdos compreensíveis a todos os usuários. • Compatibilidade: refere-se à necessidade da adoção de tecnologias acessíveis e compatíveis com o modelo.
  • 10. Cartilha Técnica: documento com 8 diretrizes de acessibilidade, às quais estão vinculadas 57 recomendações de acessibilidade. Número Diretriz 1 Fornecer alternativas equivalentes para conteúdo gráfico e sonoro. Assegurar que o site seja legível e compreensível mesmo sem o uso de 2 formatações. 3 Dar preferência às tecnologias de marcação e formatação. Assegurar que toda a informação seja interpretada corretamente, com clareza 4 e simplicidade. Assegurar que as tecnologias utilizadas funcionem - de maneira acessível - 5 independente de programas, versões e futuras mudanças. 6 Assegurar o controle do usuário sobre a navegação no sítio. 7 Identificar claramente os mecanismos de navegação. Em casos não contemplados pelas diretrizes anteriores, utilizar recursos 8 reconhecidos por instituições com propriedade no assunto, como tecnologias acessíveis.
  • 11. Segundo o e-MAG 2.0 o processo de acessibilidade ocorre em 4 etapas distintas: • Verificação da necessidade de tornar o conteúdo acessível; • Aplicação e validação das recomendações; • Promoção e divulgação da acessibilidade; • Vigilância constante para que o site permaneça acessível.
  • 12. e-MAG 3.0 Passou por consulta pública entre os meses de novembro de 2010 e janeiro de 2011, sendo lançada oficialmente em setembro de 2011, com diversas modificações estruturais em relação à versão 2.0: • Tornou-se um documento único, não mais dividido em duas partes, como na versão anterior; • Não adota mais dos níveis de prioridade A, AA e AAA, “visto que o padrão é voltado às páginas do Governo, não sendo permitidas exceções com relação ao cumprimento das recomendações” (BRASIL, 2011). • Não divide mais os princípios de acessibilidade nas áreas de percepção, operação, entendimento e compatibilidade.
  • 13. e-MAG 3.0: apresenta 45 recomendações de acessibilidade, classificadas nas seções de: • arcação: contém recomendações específicas sobre a construção do código M HTML (HyperText Markup Language) das páginas dos websites, com foco na mar- cação (Markup), ou seja, no conjunto de códigos (tags) aplicados ao texto para adicionar informações particulares sobre ele; • omportamento: contém recomendações específicas sobre o comportamento C das páginas dos websites (atualização, redirecionamento automáticos e outros) e dos elementos nelas contidos (scripts, Flash, conteúdos dinâmicos e outros); • onteúdo/informação: contém recomendações específicas sobre o conteúdo das C páginas dos websites e das informações nelas contidas, como títulos e links cla- ros, sucintos e significativos, mecanismos para indicar a localização do usuário no website, descrição textual de conteúdos gráficos e outros;
  • 14. • presentação/design: contém recomendações específicas sobre o design das A páginas dos websites, tais como layout, contraste entre cores, redimensiona- mento de textos e outros; • ultimídia: contém recomendações específicas sobre a inserção de elementos M multimídia (vídeos e áudio) nas páginas dos websites, tais como legendas, audi- odescrição, controles de áudio e de animação e outros; • ormulário: contém recomendações específicas para os formulários presentes F nas páginas dos websites, tais como alternativas textuais para botões em forma- to de imagens, ordem lógica de navegação/tabulação, instruções para a entrada de dados, captchas acessíveis e outros.
  • 15. e-MAG 3.0 - Processo de Avaliação de Acessibilidade a) Validar os códigos do conteúdo HTML e das folhas de estilo; b) Verificar o fluxo de leitura da página, utilizando um navegador textual, como o Lynx, ou um leitor de tela (NVDA ou ORCA). c) Verificar o fluxo de leitura da página sem estilos, sem script e sem as imagens; d) Verificar as funcionalidades da barra de acessibilidade, aumen- tando e diminuindo a letra, modificando o contraste, etc.; e) Realizar a validação automática de acessibilidade utilizando o ASES e outros avaliadores automáticos; f) Realizar a validação manual, utilizando os checklists de vali- dação humana.
  • 16. e-MAG 3.0 - Algumas considerações O e-MAG possui uma recomendação polêmica: RECOMENDAÇÃO 25 – Garantir a leitura e compreensão das informações • A avaliação com usuários não consta como um dos passos do Processo de Avaliação de Acessibilidade. Entretanto o documento ressalta que uma etapa essencial da validação de uma página é a realização de testes com usuários com deficiência. • O Mapa do Sítio não consta como uma recomendação de acessibilidade, mas é mencionado em outra seção do documento. • Muitas recomendações são detalhadas em documentos externos (Formulári- os e Tabelas Acessíveis, Manual de Redação para a Web, etc), o que dificulta que elas sejam seguidas. • Desde o lançamento da versão 3.0 do e-MAG, é recomendada sua adoção pe- los websites governamentais brasileiro, em substituição à versão 2.0, entre- tanto os avaliadores automáticos ainda não foram atualizados.
  • 17. Diretrizes de Acessibilidade: exemplos práticos
  • 18. MARCAÇÃO - Recomendação 6: Fornecer âncoras para ir direto a um bloco de conteúdo.
  • 19. MARCAÇÃO - Recomendação 9: Não abrir novas instâncias sem a solicitação do usuário. Não devem ser utilizados: • Pop-ups • Aberturas de novas abas ou janelas
  • 20. COMPORTAMENTO - Recomendação 11: Não criar páginas com atualização automática periódica.
  • 21. CONTEÚDO/INFORMAÇÃO - Recomendação 17: Oferecer um título descritivo e informativo à página.
  • 22.
  • 23. CONTEÚDO/INFORMAÇÃO – Recomendação 18: Disponibilizar informação sobre a localização do usuário na página.
  • 24. CONTEÚDO/INFORMAÇÃO – Recomendação 19: Descrever links clara e sucintamente.
  • 25. CONTEÚDO/INFORMAÇÃO – Recomendação 20: Fornecer alternativa em texto para imagens no sítio. FORMULÁRIOS - Recomendação 36: Fornecer alternativa em texto para botões de imagens em formulários. <img src="crianca.jpg" alt="Foto de uma criança cheirando uma flor">
  • 26. CONTEÚDO/INFORMAÇÃO – Recomendação 22: Disponibilizar documentos em formatos acessíveis.
  • 27. APRESENTAÇÃO/DESIGN - Recomendação 28: Oferecer contraste mínimo entre plano de fundo e primeiro plano.
  • 28. APRESENTAÇÃO/DESIGN - Recomendação 30: Permitir redimensionamento de texto, sem perda de funcionalidade.
  • 29. APRESENTAÇÃO/DESIGN - Recomendação 31: Dividir as áreas de informação.
  • 30. MULTIMIDIA - Recomendação 33: Fornecer alternativa para vídeo. MULTIMIDIA - Recomendação 34: Fornecer alternativa para áudio. MULTIMIDIA - Recomendação 35: Fornecer áudio-descrição para vídeo pré-gravado. MULTIMIDIA - Recomendação 36: Fornecer controle de áudio para som.
  • 31. FORMULÁRIOS - Recomendação 42: Fornecer instruções para entrada de dados.
  • 32. FORMULÁRIOS - Recomendação 43: Identificar e descrever erros de entrada de dados.
  • 33. FORMULÁRIOS - Recomendação 44: Agrupar campos de formulários.
  • 34. FORMULÁRIOS - Recomendação 45: Fornecer captcha humano.
  • 35. REFERÊNCIAS http://www.slideshare.net/CassianaFerraz/acessibilidade-web-12581391 http://www.ivogomes.com/apresentacoes/acessibilidade-web.pdf BRASIL. Decreto nº 5.296 de 02 de Dezembro de 2004. Diário Oficial da União, Brasília: Senado Federal, 03 dez. 2004. Disponível em: <http://www.trt02.gov.br/geral/tribunal2/Legis/Decreto/5296_04.html>. BRASIL. Recomendações de Acessibilidade para Construção e Adaptação de Conteúdos do Governo Brasileiro na Internet: eMag. Disponível em: <https://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG>. DIAS, C. Usabilidade na Web: Criando Portais mais Acessíveis. Alta Books, 2007. FERREIRA, Simone Bacellar Leal et al. Panorama da acessibilidade na web brasileira. In: Encontro Nacional dos Programas de Pós Graduação em Administração, 2007, Rio de Janeiro. Anais do ENANPAD 2007. NBR 9050: Associação Brasileira de Normas Técnicas. Acessibilidade de Pessoas Portadoras de Deficiências a Edificações, Espaço, Mobiliário e Equipamentos Urbanos. ABNT. RJ. 1994. Disponível em <http://www.mpdft. gov.br/sicorde/NBR9050-31052004.pdf>. SERPRO. Serviço Federal de Processamento de Dados. Disponível em: <http://www.serpro.gov.br/ acessibilidade/>. W3C. Web Content Accessibility Guidelines 1.0. 1999. Disponível em: <http://www.w3.org/TR/#tr_Web_Content_ Accessibility_Guidelines__WCAG_>