Acessibilidade na Web - Salomão Alcolumbre

1.039 visualizações

Publicada em

Oficina de Acessibilidade na Web Ministrada por Prof. Salomão Alcolumbre no Festival Quebramar 2013

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Acessibilidade na Web - Salomão Alcolumbre

  1. 1. ACESSIBILIDADE NA WEB Prof. Esp. Salomão Alcolumbre Dezembro 2013
  2. 2. CURRÍCULO DO PALESTRANTE Amapaense da cidade de Macapá, trabalha com Informática há 11 anos e com programação web há 10 anos. Formado em Sistema de Informação(2005) e Especialista em Análise da Tecnologia da Informação(2009). É Assessor Técnico da Promoção do Desenvolvimento desde Jan/2009 – Agência de Desenvolvimento do Amapá e Super administrador do WebSite da Mesma. (www.adap.ap.gov.br); Professor de Informática para Internet(Web Design) no CEPA Centro de Ensino Profissional do Amapá desde 2012.
  3. 3. MÚSICO
  4. 4. SANTISTA
  5. 5. Acessibilidade?
  6. 6. Acessibilidade é um termo muito mais amplo do que apenas "acesso a algo". Uma minoria da sociedade não tem os mesmos direitos de acessibilidade às tecnologias de informação e comunicação. Ex.: Cegos e amblíopes
  7. 7. OBJETIVO Objetivo dessa Palestra é criar acessibilidade na internet especificamente para os deficientes visuais por meio da conscientização dos desenvolvedores web (webmasters, webdesigners, projetistas, consultores, empresários), empresas públicas/privadas e todas as pessoas com disposição para aprender e concretizar esta ideia. É dever de todos citados acima que assegurem a disponibilização acessível da informação na INTERNET para todos com necessidades especiais. sendo assim é necessário o entendimento das soluções técnicas para que este objetivo seja alcançado
  8. 8. ACESSIBILIDADE WEB É IMPORTANTE? A web é um recurso cada vez mais importante em vários aspectos da vida: educação, emprego, governo, comércio, cuidados de saúde, entretenimento, entre outros. É essencial que a web seja acessível para fornecer igual acesso e iguais oportunidades a pessoas com necessidades especiais. Uma Web acessível também pode ajudar as pessoas com necessidades especiais a participarem mais ativamente da sociedade.
  9. 9. DEFINIÇÕES Acessibilidade significa tornar possível o acesso a alguma coisa para o maior número de pessoas possível. Acessibility. Na linguagem da Web, a acessibilidade de uma página permite que seja lida e navegada por uma pessoa inapta.
  10. 10. ACESSIBILIDADE PARA QUEM?
  11. 11. Stevie Wonder, sem visão.
  12. 12. Atleta, sem braços.
  13. 13. Zizao, com baixa visão.
  14. 14. Errado! Errado! Errado!
  15. 15. deficiente motor utiliza o mouse com dificuldade.
  16. 16. Luciana, tetraplégica Vítima de bala perdida na Estácio de Sá foi beneficiada com o projeto DOS VOX
  17. 17. Então acessibilidade é somente para pessoas com deficiências, certo?
  18. 18. idosos, eles têm pouca experiência, baixa visão e dificuldades motoras.
  19. 19. Dispositivos móveis com acesso a Internet.
  20. 20. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando com o teclado.
  21. 21. medo do computador Homem com muito medo correndo de um computador.
  22. 22. tendinite
  23. 23. E todos nós, primeira experiência. Um criança em frente a um notebook
  24. 24. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
  25. 25. RELEMBRANDO... Antes de começarmos a tratar das técnicas de acessibilidade, vamos relembrar os conceitos básicos que precisamos saber para criar um documento HTML
  26. 26. A ANATOMIA BÁSICA DE UM DOCUMENTO HTML A declaração DOCTYPE não é uma tag (elemento) da marcação XHTML. Por isso, não há necessidade de fechamento e deve ser escrita em letras maiúsculas. Para que serve o DOCTYPE? Sua declaração DOCTYPE informa aos serviços de validação e aos navegadores modernos qual DTD foi utilizada para elaborar a marcação, essa informação instrui os serviços de validação e os navegadores de como tratar sua página.
  27. 27. DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EM""http://www.w3.org/TR/xhtml1/DTD/xh tml1-transitional.dtd">
  28. 28. A DECLARAÇÃO NAMESPACE Logo após o DOCTYPE vem a tag de abertura do elemento HTML É nesta tag que declaramos o idioma usado no documento. Isso é importante para acessibilidade. Um namespace em XML é uma coleção de tipos de elementos e nomes de atributos associados a um DTD. Indicando sua localização. No exemplo abaixo aparece a indicada a localização namespace em XHTML (http://www.w3.org/1999/xhtml). Os dois atributos adicionais especificam que versão do xml este em Português-Brasileiro e que o documento está escrito em Português-Brasileiro <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
  29. 29. DECLARANDO O TIPO DE CONTEÚDO Para serem interpretados corretamente em navegadores e aprovados nos teste de validação de marcação, todos os documentos XHTML, devem declarar o tipo de codificação de caractere que foi usada em sua criação. Existem duas formas, sendo a segunda mais usada. <?xml version="1.0" encoding="iso-8859-1"?> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Obs: Declaramos esta TAG dentro do elemento HEAD
  30. 30. ELEMENTO HEAD E SEUS ELEMENTOSFILHOS O conteúdo da HEAD não é exibido para o usuário (com exceção do TITLE), mas é extremamente importante pois define metainformações que podem ser importantes para determinados webbrowsers. Os elementos mais importantes para acessibilidade que o compõem são o title e LINK Elemento title - o título do documento Elemento LINK - navegação para páginas importantes e chamadas a arquivos externos.
  31. 31. ELEMENTO BODY É dentro do elemento BODY que estará todo o conteúdo que será exibido para o usuário. <body> <!-- Elementos da Página--> </body>
  32. 32. ESTRUTURA COMPLETA DE UM DOCUMENTO XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ptbr" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Acessibilidade</title> </head> <body> <!-- Elementos da Página--> </body> </html>
  33. 33. ACESSIBILIDADE É PARA TODO MUNDO Lei Federal 10.098/00 e Decreto Federal 5296/04 Uma empresa deve estar atenta aos recursos de Informática e Internet que visam garantir acessibilidade às pessoas que possuem certas deficiências, por exemplo, visuais. Quando mencionamos a palavra acessibilidade, a primeira coisa que vem à cabeça são os deficientes. No caso da Web, principalmente deficientes visuais completos(cegos). Porém não são só eles que necessitam e se beneficiam de sites mais acessíveis. Há outros diversos grupos de pessoas que têm a necessidades especiais e podem passar a ter acesso a sites dos quais eram excluídos
  34. 34. GRUPO DE PESSOAS QUE TEM NECESSIDADES ESPECIAIS Cegos Os usuários cegos são o caso clássico, que sempre vem a mente quando se fala em acessibilidade. Esses usuários tem imensas dificuldades em acessar sites na web. LEITOR DE TELA É um software que lê o texto que está na tela do computador e saída desta informação é através de um sintetizador de voz ou um display braile - o leitor de tela "fala" o texto para o usuário ou dispôe o texto em braile através de um dispositivo onde os pontos são salientados ou rebaixados para permitir a leitura.
  35. 35. GRUPO DE PESSOAS QUE TEM NECESSIDADES ESPECIAIS NAVEGADOR TEXTUAL É um navegador baseado em texto, diferente dos navegadores com interface gráfica onde as imagens são carregadas. O navegador textual pode ser usado com o leitor de tela por pessoas cegas e também por pessoas que acessam a internet com conexão lenta NAVEGADOR COM VOZ É um sistema que permite a navegação orientada pela voz. Alguns possibilitam o reconhecimento da voz e a apresentação do conteúdo com sons, outros permitem acesso baseado em telefone (através de comando de voz pelo telefone e/ou por teclas do telefone)
  36. 36. GRUPO DE PESSOAS QUE TEM NECESSIDADES ESPECIAIS Baixa Visão AMPLIADOR DE TELA É um software que amplia o conteúdo da página para facilitar a leitura Deficiência física A deficiência física ou motora pode envolver fraqueza, limitação no controle muscular (movimentos involuntários, ausência de coordenaçõ ou paralisia), limitações de sensação, problemas nas juntas ou perda de membros TECLADO ALTERNATIVO É um dispositivo de hardware ou software que pode ser usados por pessoas com deficiência física que fornece um modo alternativo de dipor as teclas como por exemplo, teclado com espaçamento maiores ou menores entre as teclas
  37. 37. GRUPO DE PESSOAS QUE TEM NECESSIDADES ESPECIAIS Daltônicos O daltonimos é uma deficiência visual que faz com que a pessoa tenha dificuldade em reconhecer uma ou mais cores. Pessoas Idosas A partir de uma certa idade, passamos apresentar deficências em diversos dos nossos sentidos, principalmente visão, audição e coordenação motora. Pessoas idosas tem enormes dificuldades para aprender a lidar com computadores Outros tipos de deficiências Paralisia cerebral, amputação de membros superiores, surdez, e outros diversos podem dificultar o acesso a informação. Usuários de dispositivos móveis Dispositivos móveis como smartphones possuem telas pequenas, conexões lentas, além de caras, browsers sem suporte a diversas tecnologias e por isso são caso de necessidade especial de acesso.Com acesso a padrões web e técnicas de estilização podem garantir acesso a usuários destes dispositivos
  38. 38. DIRETRIZES INTERNACIONAIS PARA ACESSIBILIDADE O padrão internacional de diretrizes para promoção de acessibilidade mais importante e aceito hoje em dia é o WCAG (Web Content Acessibility Guidelines, ou Diretrizes de Acessibilidade para Conteúdo na Web), criado pelo W3C As diretrizes do WCAG são divididos em três níveis de prioridades.
  39. 39. VALIDAÇÃO E SELOS Existem basicamente dois tipos de validação a que um determinado conteúdo na web pode ser submetido: validação de XHTML e validação de acessibilidade Validação XHTML O mais conceituado validador de XHTML que existe é da W3C. http://validator.w3.org
  40. 40. TESTES Teste de acessibilidade em 10 sites do Governo e o olha o que apareceu, fiz questão de incluir o da ADAP que sou o criador. Nenhum deles passou nos testes !! http://validator.w3.org http://www.sead.ap.gov.br/ - 39 Errors, 1 warning(s) http://www.seed.ap.gov.br/ - 90 Errors, 5 warning(s) http://www.adap.ap.gov.br/site/ - 13 Errors, 9 warning(s) http://www.caesa.ap.gov.br/ - 38 Errors http://www.ueap.ap.gov.br/ - 51 Errors, 31 warning(s) http://www.cbm.ap.gov.br/ - 38 Errors, 23 warning(s) http://www.jucap.ap.gov.br/ - 43 Errors http://www.saude.ap.gov.br/ - 86 Errors, 125 warning(s) http://www.setur.ap.gov.br - 37 Errors, 22 warning(s) http://www.prodap.ap.gov.br/site/index.php - 43 Errors, 1 warning(s)
  41. 41. TESTES
  42. 42. OUTROS VALIDADORES DE ACESSIBILIDADE Da Silva http://www.dasilva.org.br Cynthia Says http://www.contentquality.com/ eXaminator http://www.acesso.umic.pt/webax/examinator.php Hera http://www.slidar.org/hera/index.php.pt
  43. 43. SELOS os validadores de acessibilidade, ao fim de uma checagem, quando há sucesso na validação de alguns dos níveis de prioridade, oferecem um "selo". Este selo é uma imagem que mostra que determinado site foi submetido ao teste e teve sucesso.
  44. 44. FERRAMENTAS DE AUXÍLIO AO DESENVOLVEDOR
  45. 45. PRIORIDADE 1 (A) Os pontos de checagem ocorridos na Prioridade 1 são absolutamente indispensáveis para se garantir o mínimo de acessibilidade em uma página. 1 - Fornecer um texto equivalente... Fornecer um texto equivalente para cada elemento não textual. São Elementos não textuais - imagens - Mapas de imagem(image maps) - Animações em flash - Applets em Java - Vídeo - Arte Ascii - Frames - Áudio - Scripts
  46. 46. PRIORIDADE 1 (A) Na tag "img" devemos incluir o atributo ALT, pois ele é suficiente para descrever o conteúdo de um elemento não textual. Quando for necessária uma explicação mais detalhada usar o atributo LONGDESC exemplo: <img src="logo_site.png" alt="Logo do Site">
  47. 47. BOTÕES DE IMAGEM Botões de imagem em formulários também devem conter o atributo ALT. Todo elemento INPUT cujo atributo seja "image" deve conter um atributo ALT que descreva a ação que será executada ao ser pressionado. Caso contrário o arquivo de imagem será exibido <input type="image" src="botao.png" alt="Validar Documento">
  48. 48. ATRIBUTO "LONGDESC" Quando o atributo ALT for insuficiente para descrever de maneira adequada um recurso, devemos utlizar o atributo LONGDESC, que deve conter a URL de uma página que contém a descrição do recurso <input type="image" src="botao.png" alt="Validar Documento">
  49. 49. IMAGENS QUE NÃO PRECISAM DE DESCRIÇÃO Toda imagem que não faz parte do conteúdo de um site, ou seja, imagens meramente decorativas, devem ser inseridas como imagem de fundo, com uso de CSS. Neste caso o atributo ALT deve ser vazio Exemplo: <img src="img.jpg" alt="" />
  50. 50. SCRIPTS Devem seguir as seguintes regras - Incluir o elemento "noscript" para fornecer um texto alternativo que descreva a ação ou substitua a funcionalidade do script - Fornece equivalente textual para scripts - Assegurar que programas interpretáveis funcionem mesmo quando estes tiverem sido desativados ou não forem suportados pelo browser do usuário
  51. 51. SCRIPTS
  52. 52. SONS, ÁUDIOS E VÍDEOS Fornecer equivalentes para sons, áudios e vídeos. Para sons e áudios, fornecer descrição textual, Para imagens de vídeo, fornecer descrição sonora ou textual. Levar em consideração que imagens, vídeos e áudio, podem facilitar a compreensão do conteúdo, como por exemplo, uma sequência de imagens para explicar algo, um vídeo de uma pessoa traduzindo o conteúdo para linguagem de sinais.
  53. 53. CORES EM FUNDOS Não recorrer apenas à cor. Assegurar que todas as informações veiculas com cor estejam também disponíveis sem cor. Se a cor for o único meio para transmitir informações, as pessoas que não diferenciam cores, bem como os usuários de monitores monocromáticos e dispositivos não coloridos, não receberão essa informação Ex: Incorreto Criar uma página onde o item verde se destaque "O ítem verde é de grande importância para o ambiente" Árvore Lápis Borraca
  54. 54. CORES EM FUNDOS Exemplo Correto: A descrição da cor faz parte da palavra árvore "O item verde é de grande importância para o ambiente" Árvore verde Lápis Preto Borracha Branca
  55. 55. CORES Assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficiente contrastantes para poder ser vista por pessoas com cromo deficiências, bem como pelas que utilizam monitores de vídeo monocromáticos
  56. 56. IDIOMAS Identificar a língua estrangeira em documento e equivalentes textuais, através de marcações que facilitem a pronúncia e a interpretação de texto atribuir o atributo lang Exemplo de idioms: inglês-en; francês-fr; espanhol-es; italiano-it; português-pt; alemão-de Ex: <p>e os Alunos disseram <span lang="en">very Web</span> Good, Acessibility
  57. 57. TABELAS Se utilizar tabelas, use marcação correta para as mesmas. Recomendações: Evitar o uso de tabelas para criação de layouts de páginas. É altamente recomendável utilizar (CSS) e a correta marcação para construir layout sem tabelas (De acordo com os Padrões WEB WebStandards )
  58. 58. FORMULÁRIOS Posicionar corretamente os rótulos e os controles do formulário para que a navegação seja coerente Associar o controle do formulário com o respectivo rótulo Agrupar informações de forma apropriada Associar cada controle do formulário o rótulo incluindo "label for" para os rótulos e "id" para os controles. Em "input" do tipo botão, não é necessário a associação, pois o leitor de tela fala o texto contido no botão que são imagens, usando o atributo alt. Criar a navegação ordenada através do atributo “tabindex”.
  59. 59. FORMULÁRIOS
  60. 60. LINKS O texto do link deve ser significativo e claro O texto do link deve fazer sentido se lido separadamente. Os usuário de leitores de tela podem navegar em links de uma página utilizando a tecla "tab". Para cada "tab" é pronunciado um texto do link. Devido isso, nõ utilizar texto do link generalizado como "Clique Aqui" Para tomar ainda mais claro o destino do link, utiliza título de link informativo (elemento "title") Para navegação dos links via teclado, pode-se organizar a sequência dos links e/ou determinar teclas de atalho. Title: se há mais de um link na página com diferentes textos dos links apontando para o mesmo endereço, diferenciar os links utilizando o atributo "title."
  61. 61. LINKS TABINDEX: para definir a ordem da navegação via tecla "tab", incluir o atributo "tabindex" com valores 1, 2, 3...no elemento do link. Além de link, o "tabindex" é válido para formulários e objetivos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea"). ACCESSKEY: para definir quais as teclas de atalho dos links, incluir o atributo "accesskey" no elemento do link. Além de link, o "accesskey" é válido para formulários e objetos.
  62. 62. LINKS
  63. 63. FRAMES Frames devem ser sempre evitados. Porém, em algumas situações seu uso pode ser necessário ou até mesmo desejado. Nesse caso, é necessário fornecer títulos a cada frame, através do atributo TITLE. Títulos esses que devem descrever o conteúdo do frame de forma clara e objetiva. Frames aceitam o atributo LONGDESC. <frame src="pagina.html" title="navegação principal do site">
  64. 64. APPLETS / SCRIPTS Assegure-se de que applets, quando a única fonte de determinada funcionalidade, sejam diretamente acessíveis ou compatíveis com tecnologias assistivas. Em ponto de checagem é de prioridade 1 caso funcionalidade seja importante e não esteja disponível de nenhuma outra forma na página. Caso contrário, é de prioridade 2. Assegure-se de que suas páginas sejam usáveis mesmo sem o suporte a scripts/applets e outros objetos programáticos.
  65. 65. USE UNIDADES DE MEDIDA RELATIVAS AO INVÉS DE ABSOLUTAS Não use unidades de medida absolutas para definir larguras de elementos e tamanhos de fonte. Usar unidades de medida absolutas para definir larguras de elementos (ex: definir a largura do site 780px), pode causar problemas quando a página for exibida em um dispositivo cuja tela uma resolução menor que o necessário para exibir toda a extensão do elemento. Tamanhos de fontes devem ser definidos com unidades de medida relativas, pois, dessa forma, os usuários podem utilizar meios providos pelo próprio browser ou dispositivo para aumentar ou diminuir esse tamanho. Recomenda-se o uso de unidades de porcentagem para definição de larguras de elementos
  66. 66. USE UNIDADES DE MEDIDA RELATIVAS AO INVÉS DE ABSOLUTAS
  67. 67. FRAMES -> NOFRAMES o conteúdo do elemento NOFRAMES é usado por, e apenas por, user-agents que não têm suporte a frames, e pode ser usado da seguinte maneira
  68. 68. 7 MITOS DA ACESSIBILIDADE Acessibilidade na Web é só para deficientes visuais; Na prática, o número de usuários beneficiados com a acessibilidade é relativamente muito pequeno; Fazer um site acessível demora muito e custa caro; É melhor fazer uma página especial para deficientes visuais; Um site acessível a deficientes visuais não é bonito; Vamos por partes: primeiro fazemos o site, depois fazemos a acessibilidade; A gente não sabe o que é bom para o usuário.
  69. 69. VANTAGENS DE UM WEBSITE ACESSÍVEL Seu website estará adaptado a diferentes tipos de conexão como, por exemplo, navegadores mais antigos, computadores menos potentes, ou sem mouse, e outros casos; Seu website estará dentro dos princípios de acessibilidade preconizados pela lei federal de acessibilidade (Lei no. 10 098, de 19 de dezembro de 2000), que estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida e dá outras providências; Você pode ter mais pessoas acessando suas informações ou serviços; Ao ter mais acessos, seu website garantirá a adesão dessa comunidade e simpatizantes, e atrairá mais anunciantes.
  70. 70. CONSIDERAÇÕES FINAIS A política de acessibilidade deve ser implantada não só visando os sítios públicos, que é obrigação legal do estado, mas como incentivo à sua aderência pelo terceiro setor e iniciativa privada, não somente pelo entendimento em relação às diferenças, mas principalmente como um importante fator sócio-econômico-cultural gerado pela inclusão desse grande grupo de cidadãos nesse novo e emergente mercado de consumo.
  71. 71. Obrigado! Salomão Alcolumbre salomao@webcenterna.com

×