WORKSHOP ACESSIBILIDADE NA WEB

Transcrição

1 WORKSHOP ACESSIBILIDADE NA WEB

2 Copyright Os autores e as autoras CC-BY-SA: O trabalho Workshop Acessibilidade na Web está licenciado com uma Licença Creative Commons - Atribuição Compartilha Igual 4.0 Internacional. Autoras deste documento: Gessika Bertola e Patricia Leite Universidade Tecnológica Federal do Paraná Campus Curitiba Luiz Alberto Pilatti (Reitoria), Maurício Alves Mendes (Pro -Reitoria de Graduação e Educação Profissional), Álvaro Peixoto de Alencar (Diretoria de Graduações), Cezar Augusto Romano (Diretoria Geral do Campus Curitiba), Mauro Edson Alberti (Diretoria de Graduação e Educação Profissional) Departamento Acadêmico de Informática - DAINF Maria Claudia Figueiredo Pereiro Emer (Chefia do Departamento Acadêmico de Informática ), Marília Abrahão Amaral (Coordenação do Bacharelado em Sistemas de Informação ) Projeto Compute você Mesm@: Conexões de saberes e fazeres para inclusão digital Marília Abrahão Amaral (Tutora) Programa de Educação Tutorial Computando Culturas em Equidade - PET-CoCE Marília Abrahão Amaral (Tutora) Luiz Ernesto Merkle (Comitê Gestor) Maria Cláudia Figueiredo Pereira Emer (Comitê Gestor) Ricardo Lüders (Comitê Gestor) Mariângela de Oliveira Gomes Setti (Comitê Gestor)

3 SUMÁRIO OBJETIVOS INTRODUÇÃO DIRETRIZES DE ACESSIBILIDADE PARA CONTEÚDOS WEB DICAS PARA FAZER UM SITE MAIS ACESSÍVEL ACESSIBILIDADE NO FACEBOOK FERRAMENTAS PARA VERIFICAR A ACESSIBILIDADE DO SEU SITE MATERIAIS COMPLEMENTARES REFERÊNCIAS... 12

4 OBJETIVOS Apresentar a diversidade de pessoas que acessam internet e relevância da acessibilidade na web para os diversos públicos; Apresentar os principais elementos para propiciar acessibilidade na criação de sites e posts no facebook 1 ; Apresentar ferramentas que podem contribuir na verificação e/ou análise de um site em relação à acessibilidade. 1 - INTRODUÇÃO O que é acessibilidade? Acessibilidade é a "possibilidade e condição de alcance, percepção e entendimento para a utilização, em igualdade de oportunidades, com segurança e autonomia, do meio físico, do transporte, da informação e da comunicação, inclusive dos sistemas e tecnologias de informação e comunicação, bem como de outros serviços e instalações." (W3C BRASIL, 2016) Acessibilidade não é apenas para pessoas com deficiência ou mobilidade reduzida. Para estas pessoas acessibilidade possibilita a vida independente e participação na sociedade, e para todas as outras pode "proporcionar maior conforto, facilidade de uso, rapidez, satisfação, segurança e eficiência" (W3C BRASIL, 2016). O que é acessibilidade na web? "A acessibilidade da Web significa que as pessoas com deficiência podem perceber, compreender, navegar e interagir com a Web, e que podem contribuir para a Web. A acessibilidade da Web também beneficia outras pessoas, incluindo pessoas idosas com habilidades variáveis devido ao envelhecimento. (tradução nossa) Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. (W3C, 2016)

5 Porque acessibilidade é importante? Com a abrangência de acesso e utilização das tecnologias da informação e comunicação, o acesso, de maneira independente, destas tecnologias por todas as pessoas é muito importante para possibilitar sua vida na sociedade. Tal acesso possibilita a execução de diversas atividades humanas como educação, saúde, trabalho e entretenimento, uma vez que a web influência nestes elementos, independente das limitações físicas, mentais ou motoras dos seus usuários (W3C BRASIL, 2016). Desta forma, quanto mais pessoas poderem acessar a web, mais pessoas poderão produzir conteúdos que podem ser relevantes para todos. Para quem é a acessibilidade? As pessoas com deficiência são as que mais se beneficiam com a acessibilidade na web, mas a utilização de recursos de acessibilidade não é exclusividade dessas pessoas. Todos se beneficiam com conteúdos web que são projetados e desenvolvidos para diminuírem barreiras nos mais diferentes contextos (W3C BRASIL, 2016). Acessibilidade na web e sua relevância na sociedade Acessibilidade na web é a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso. (W3C BRASIL, 2016)

6 2 DIRETRIZES DE ACESSIBILIDADE PARA CONTEÚDOS WEB As diretrizes de acessibilidade para conteúdos web (WCAG) desenvolvidas pelo grupo W3C são um conjunto de recomendações para tornar o conteúdo web mais acessível para o maior número de pessoas possível (W3C, 2014). Estruturada em uma série de princípios, diretrizes, critérios e técnicas, o documento estruturado pela W3C pode ser utilizado por diversas pessoas e organizações, como programadores, web designers, professores e alunos (W3C, 2014). Seus quatro princípios constituem a base para a acessibilidade web, conforme descritos abaixo: Princípio 1: Perceptível - As informações e os componentes da interface do usuário devem ser apresentados em formas que possam ser percebidas pelo usuário. Princípio 2: Operável - Os componentes de interface de usuário e a navegação devem ser operáveis. Princípio 3: Compreensível - A informação e a operação da interface de usuário devem ser compreensíveis. Princípio 4: Robusto - O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, incluindo tecnologias assistivas.

7 3 DICAS PARA FAZER UM SITE MAIS ACESSÍVEL Conteúdo Estruturar o conteúdo de maneira mais clara possível, com palavras simples e frases curtas (GROW UNDER, 2016). Montar o conteúdo pensando na inclusão de descrição de imagens, tabelas e gráficos (GROW UNDER, 2016). Ao planejar um site, imaginá-lo como sendo falado, para tentar prever seu funcionamento com leitores de tela (GROW UNDER, 2016). HTML Indicar o idioma é importante para que o leitor de tela do usuário use o dicionário correto (POPLADE, 2010). <html xmlns=" xml:lang="pt-br" lang="pt-br > O atributo alt da tag <img> devem ser preenchidos para descrever o conteúdo de uma imagem não decorativa. Para imagens decorativas usar alt= (W3C, 2015). <img src="imagens/imagem.jpg" alt="imagem teste" /> Para links, é importante indicar a ordem de acesso ao link quando utilizada a tecla tab, que é indicada pelo atributo tabindex. E quando possível utilizar o atributo accesskey, que atribui uma tecla de atalho para acessar o link (POPLADE, 2010). Além disso é importante que o texto do link faça sentido, mesmo quando isolado do conteúdo, e apresente um indicador visual que o diferencie (sublinhado, tracejado etc.), não sendo unicamente por cor (GROW UNDER, 2016). <a href= index.html tabindex="1" accesskey="a">página INICIAL</a>

8 Manter contraste entre background e texto (GROW UNDER, 2016). Exemplo apresentado na figura 1. Figura 1 Exemplo de contraste entre background e texto Fonte: Print screen do site Contrast Checker 3 Cuidado ao utilizar letras maiúsculas pois podem ser reconhecidas incorretamente por leitores de tela (GROW UNDER, 2016). Utilizar tamanho adequado da fonte do texto, cujo menor tamanho de fonte recomendável é 10pt (GROW UNDER, 2016). Disponibilizar botões de play e pause para vídeos e animações (GROW UNDER, 2016). Ao diferenciar elementos no conteúdo não utilizar somente cores, mas incluir também um indicador auxiliar, como sublinhado e tracejado (GROW UNDER, 2016), para evitar que pessoas daltônicas, por exemplo, não consigam diferenciar o conteúdo na página. Exemplos sobre estes dois casos podem ser encontrados no material do site Sapo, sobre cores e contrastes, no link: 3

9 4 - ACESSIBILIDADE NO FACEBOOK Recentemente o Facebook incluiu em sua estrutura uma tecnologia de reconhecimento de objetos, para gerar um texto automático para descrever fotos e imagens (FACEBOOK, 2016). No entanto, algumas pessoas e organizações iniciaram ações para contribuir para a acessibilidade de fotos e imagens, por meio da utilização da hashtag #acessivel, como nos casos das empresas Giraffas com a hashtag #giraffasacessivel (MAKINGOF, 2016) e Sodexo com a hashtag #SodexoAcessível (Figura 2) (NEW TRADE, 2016). Ao utilizar esta hashtag inclui-se uma descrição da foto ou imagem, para que os usuários com deficiências visuais, possam imaginar a o conteúdo da imagem. Figura 2 - Imagem de post na rede social Facebook na página da empresa Sodexo Brasil Fonte: Print screen da página na da empresa Sodexo4 4

10 5 - FERRAMENTAS PARA VERIFICAR A ACESSIBILIDADE DO SEU SITE Avaliador de acessibilidade: (POPLADE, 2010). Ferramentas utilizadas para testar o contraste textual de seu website: (POPLADE, 2015) e Ferramenta que permite que você implemente um tradutor de libras para os textos de seu site: (POPLADE, 2015).

11 6 - MATERIAIS COMPLEMENTARES - Matéria sobre designer que criou um guia para diagramação de livros acessíveis - Diretrizes de acessibilidade para jogos - Recurso para acessibilidade de imagens no Twitter - Matéria sobre funcionamento dos leitores de telas 3d9b610216e1 -.xho32zg84

12 REFERÊNCIAS FACEBOOK. Como o texto alternativo automático funciona?. Disponível em: < Acesso em: 21 nov GROW UNDER. Acessibilidade Web: como fazer um site acessível com passos básicos. Disponível em: < acessibilidade-web-como-fazer-site-acessivel-com-passos-basicos >. Acesso em: 21 nov MAKINGOF. Giraffas disponibiliza conteúdo acessível para deficientes visuais no Facebook. Disponível em:< _para_deficientes_visuais_no_facebook.html>. Acesso em: 21 nov NEW TRADE. Sodexo passa a ter posts acessíveis a deficientes visuais no Facebook. Disponível em:< Acesso em: 21 nov POPLADE, Thaiana. Como tornar seu website acessível? Disponível em: < Acesso em: 21 nov POPLADE, Thaiana. Acessibilidade na web: Como tornar seu site acessível Disponível em: < Acesso em: 21 nov W3C BRASIL. Cartilha de acessibilidade na web Disponível em: < >. Acesso em: 18 nov W3C. Web Content Accessibility Guidelines (WCAG) Disponível em:< Acesso em: 21 nov W3C. Web Accessibility Tutorials: Guidance on how to create websites that meet WCAG Disponível em: < Acesso em: 21 nov W3C. Web Accessibility Initiative (WAI). Introduction to Web Accessibility. Disponível em: < Acesso em: 18 nov