aula 12 - acessibilidade na web

22
Acessibilidade na Web Marcos Devaner Interação Humano Computador Aula 12

Upload: marcos-devaner

Post on 09-Jan-2017

423 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Aula 12  - Acessibilidade na Web

Acessibilidade na Web Marcos Devaner

Interação Humano Computador

Aula 12

Page 2: Aula 12  - Acessibilidade na Web

Acessibilidade

O Decreto Federal n° 5.296/2004 [1], em seu artigo 8°, I, estabelece:

“I – 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 portadora de deficiência ou com mobilidade reduzida;”

Page 3: Aula 12  - Acessibilidade na Web

Acessibilidade na web

Trata da possibilidade e da condição de alcance, percepção e entendimento para a utilização, em igualdade de oportunidades, com segurança e autonomia, dos sítios e serviços disponíveis na web. “

Fonte: Cartilha ACESSIBILIDADE NA WEB - W3C BRASIL

Page 4: Aula 12  - Acessibilidade na Web

Componentes importantes

Page 5: Aula 12  - Acessibilidade na Web

Beneficiados e contexto de uso

Page 6: Aula 12  - Acessibilidade na Web

eMAG e WCAG

O Modelo de Acessibilidade em Governo Eletrônico (eMAG) tem o compromisso de ser o norteador no desenvolvimento e a adaptação de conteúdos digitais do governo brasileiro, garantindo o acesso a todos.

As recomendações do eMAG permitem que a implementação da acessibilidade digital seja conduzida de forma padronizada, de fácil implementação, coerente com as necessidades brasileiras e em conformidade com os padrões internacionais. É importante ressaltar que o eMAG trata de uma versão especializada do documento internacional WCAG (Web Content Accessibility Guidelines: Recomendações de Acessibilidade para Conteúdo 

Page 7: Aula 12  - Acessibilidade na Web

WCAG

WCAG 2.0 sucede o Guia de Acessibilidade para Conteúdo Web que foi publicado como uma Recomendação W3C em Maio de 1999. Embora seja possível estar em conformidade com a WCAG 1.0 ou com a WCAG 2.0 (ou ambos), o W3C recomenda que conteúdos novos e atualizações use o WCAG 2.0. O W3C também recomenda que políticas de acessibilidade na Web tenham como referência a WCAG 2.0.

Page 8: Aula 12  - Acessibilidade na Web

Recomendações de acessibilidade

para conteúdo web WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.0

https://www.w3.org/translations/wcag20-pt-pt/

Page 9: Aula 12  - Acessibilidade na Web

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.

Page 10: Aula 12  - Acessibilidade na Web

Recomendação 1.1 Alternativas em Texto: Fornecer alternativas em texto para qualquer conteúdo não textual permitindo, assim, que o mesmo possa ser alterado para outras formas mais adequadas à necessidade do indivíduo, tais como impressão em caracteres ampliados, braille, fala, símbolos ou linguagem mais simples. (Para imagens pode-se utilizar o atributo ALT com uma breve explicação da imagem.)

Alguma alternativas não textual:

CAPTCHA: Se a finalidade do conteúdo não textual for confirmar que o conteúdo está sendo acessado por uma pessoa e não por um computador, então são fornecidas as alternativas em texto que identificam e descrevem a finalidade do conteúdo não textual, e são fornecidas as formas alternativas do CAPTCHA que utilizam modos de saída para diferentes tipos de percepção sensorial, para atender diferentes incapacidades.

Exemplo de aplicação do ALT<img src="foto-01.gif" alt=“Foto do Arco do Triunfo">

Decoração, Formatação, Invisível: Se o conteúdo não textual for meramente decorativo, for utilizado apenas para formatação visual, ou não for apresentado aos usuários, então é implementado de uma forma que pode ser ignorada pelas tecnologia assistivas.

Page 11: Aula 12  - Acessibilidade na Web

Recomendação 1.2

1. Apenas áudio pré-gravado2. Apenas vídeo pré-gravado3. Legendas (Pré-gravadas) 4. Audiodescrição ou Mídia alternativa5. Línguagem desinais (Pré-gravada)

Tradução em Libras

closed caption

Exemplos

Mídias com base no tempo: Fornecer alternativas para

Page 12: Aula 12  - Acessibilidade na Web

Recomendação 1.3  Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras (por ex., um layout mais simples) sem perder informação ou estrutura.

Recurso de LibrasHabilitado/Desabilitado

Page 13: Aula 12  - Acessibilidade na Web

Recomendação 1.4 

Incluindo a separação do primeiro plano e do plano de fundo.1.Utilização da Cor2.Controle de Áudio3.Contrastes4.Redimensionamento de texto5.Imagens de Texto6.Som Baixo ou Sem Som de Fundo7.Apresentação Visual8. Imagens de Texto (Sem Exceção)

Page 14: Aula 12  - Acessibilidade na Web

PRINCÍPIO 2 - OPERÁVELA informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber.

Page 15: Aula 12  - Acessibilidade na Web

Recomendação 2.1

Teclado virtual do Windows 7

Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado.

1. Operar funcionalidades via teclado Teclado

2. Caso um teclado virtual seja acionado o foco deverá ser nele.

3. O teclado virtual deve atender todas as funções de um teclado.

Page 16: Aula 12  - Acessibilidade na Web

Recomendação 2.2

Exemplo de aplicação da recomendação

Tempo Suficiente: Fornecer tempo suficiente aos usuários para lerem e utilizarem o conteúdo.

1. Ajustável por Temporização2. Colocar em Pausa, Parar, Ocultar3. Sem Temporização4. Interrupções5. Nova autenticação(sem perder os

dados da anterior)

Page 17: Aula 12  - Acessibilidade na Web

Recomendação 2.3

Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que possa causar ataques epilépticos

Três Flashes ou Abaixo do Limite: As páginas Web não incluem qualquer conteúdo com mais de três flashes no período de um segundo,

Page 18: Aula 12  - Acessibilidade na Web

Recomendação 3.1

Legível: Tornar o conteúdo de texto legível e compreensível.

1.Cuidado com nível de leitura2.Uso de glossários3.Cuidados com abreviações4.Pronúncia (Exemplo: private (praivet), isto auxilia os leitores

de tela)

Page 19: Aula 12  - Acessibilidade na Web

Recomendação 3.2

Exemplo de um formulário com uso de máscaras para campos

com formatos específicos

Previsível: Fazer com que as páginas Web surjam e funcionem de forma previsível.

1. Em Foco ( Menu dropdown)2. Em Entrada ( Mascaras para

telefone, cep etc.)3. Navegação Consistente (colocar o

campo de pesquisa como ultimo item para que usuário identifiquem rapidamente)

4. Identificação Consistente (Texto claro e objetivo para ícones)

5. Alteração mediante solicitação (redirecionamento automático para uma nova página)

Page 20: Aula 12  - Acessibilidade na Web

Recomendação 3.3

Exemplo de Aplicação

Assistência de Entrada: Ajudar os usuários a evitar e corrigir erros. 1. Identificação do Erro2. Etiquetas ou Instruções3. Sugestão de Erro4. Prevenção de Erros5. Ajuda6. Prevenção de Erros

Page 21: Aula 12  - Acessibilidade na Web

PRINCÍPIO 4 - ROBUSTOO conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas.

Page 22: Aula 12  - Acessibilidade na Web

Recomendação 4.1

Validador W3CEste validador verifica a validade de marcação de documentos da Web em HTML, XHTML, SMIL, MathML, etc. Se você deseja validar o conteúdo específico, como feeds RSS / Atom ou folhas de estilo CSS, conteúdo mobile ou para encontrar links quebrados, há outros validadores e ferramentas disponíveis.

Disponível em: https://validator.w3.org/

Análise: No conteúdo implementado utilizando linguagens de marcação, os elementos dispõem de marcas de início e de fim completas, os elementos estão encaixados de acordo com as respectivas especificações, os elementos não contêm atributos duplicados, e todos os IDs são exclusivos, exceto quando as especificações permitem estas características.