ACESSIBILIDADE NA WEB
Prof. Esp. Salomão Alcolumbre

Dezembro 2013
CURRÍCULO DO PALESTRANTE
Amapaense da cidade de Macapá, trabalha com Informática há
11 anos e com programação web há 10 an...
MÚSICO
SANTISTA
Acessibilidade?
Acessibilidade é um termo muito mais amplo do que
apenas "acesso a algo". Uma minoria da sociedade não
tem os mesmos direi...
OBJETIVO
Objetivo dessa Palestra é criar acessibilidade na internet
especificamente para os deficientes visuais por meio d...
ACESSIBILIDADE WEB É IMPORTANTE?
A web é um recurso cada vez mais importante em
vários aspectos da vida: educação, emprego...
DEFINIÇÕES
Acessibilidade significa tornar possível o acesso a
alguma coisa para o maior número de pessoas
possível.
Acess...
ACESSIBILIDADE
PARA QUEM?
Stevie Wonder,
sem visão.
Atleta, sem braços.
Zizao, com baixa visão.
Errado!
Errado!
Errado!
deficiente motor
utiliza o mouse com dificuldade.
Luciana,
tetraplégica

Vítima de bala perdida na Estácio de Sá foi beneficiada com o projeto DOS VOX
Então
acessibilidade é
somente para
pessoas com
deficiências,
certo?
idosos, eles têm pouca experiência, baixa visão
e dificuldades motoras.
Dispositivos móveis com acesso a Internet.
Gabriel, linguagem em desenvolvimento...

Gabriel compenetrado, olhando para o
monitor e clicando com o mouse.

Agora ele ...
medo do
computador

Homem com muito medo correndo de um
computador.
tendinite
E todos nós, primeira experiência.

Um criança em frente a um notebook
E finalmente,
o bilionário
cego!!!
Cifrão desenhado com
moedas douradas
RELEMBRANDO...
Antes de começarmos a tratar das técnicas de
acessibilidade, vamos relembrar os conceitos
básicos que preci...
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á
n...
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EM""http://www.w3.org/TR/xhtml1/DTD/xh
tml1-transitiona...
A DECLARAÇÃO NAMESPACE
Logo após o DOCTYPE vem a tag de abertura do elemento HTML
É nesta tag que declaramos o idioma usad...
DECLARANDO O TIPO DE CONTEÚDO
Para
serem
interpretados
corretamente
em
navegadores e aprovados nos teste de validação de
m...
ELEMENTO HEAD E SEUS ELEMENTOSFILHOS
O conteúdo da HEAD não é exibido para o
usuário (com exceção do TITLE), mas é
extrema...
ELEMENTO BODY
É dentro do elemento BODY que estará todo o
conteúdo que será exibido para o usuário.
<body>
<!-- Elementos ...
ESTRUTURA COMPLETA DE UM
DOCUMENTO XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org...
ACESSIBILIDADE É PARA TODO MUNDO
Lei Federal 10.098/00 e Decreto Federal 5296/04 Uma
empresa deve estar atenta aos recurso...
GRUPO DE PESSOAS QUE TEM
NECESSIDADES ESPECIAIS
Cegos
Os usuários cegos são o caso clássico, que sempre vem
a mente quando...
GRUPO DE PESSOAS QUE TEM
NECESSIDADES ESPECIAIS
NAVEGADOR TEXTUAL
É um navegador baseado em texto, diferente dos
navegador...
GRUPO DE PESSOAS QUE TEM
NECESSIDADES ESPECIAIS
Baixa Visão
AMPLIADOR DE TELA
É um software que amplia o conteúdo da págin...
GRUPO DE PESSOAS QUE TEM
NECESSIDADES ESPECIAIS
Daltônicos
O daltonimos é uma deficiência visual que faz com que a pessoa ...
DIRETRIZES

INTERNACIONAIS PARA

ACESSIBILIDADE
O padrão internacional de diretrizes para
promoção de acessibilidade mais ...
VALIDAÇÃO E SELOS
Existem basicamente dois tipos de validação a
que um determinado conteúdo na web pode ser
submetido: val...
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 ...
TESTES
OUTROS VALIDADORES DE
ACESSIBILIDADE
Da Silva
http://www.dasilva.org.br
Cynthia Says
http://www.contentquality.com/
eXamin...
SELOS
os validadores de acessibilidade, ao fim de uma
checagem, quando há sucesso na validação de alguns
dos níveis de pri...
FERRAMENTAS DE AUXÍLIO AO
DESENVOLVEDOR
PRIORIDADE 1 (A)
Os pontos de checagem ocorridos na Prioridade 1 são absolutamente
indispensáveis para se garantir o mínim...
PRIORIDADE 1 (A)
Na tag "img" devemos incluir o atributo ALT, pois ele é
suficiente para descrever o conteúdo de um elemen...
BOTÕES DE IMAGEM
Botões de imagem em formulários também devem
conter o atributo ALT.
Todo elemento INPUT cujo atributo sej...
ATRIBUTO "LONGDESC"
Quando o atributo ALT for insuficiente para
descrever de maneira adequada um recurso,
devemos utlizar ...
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
dec...
SCRIPTS
Devem seguir as seguintes regras
- Incluir o elemento "noscript" para fornecer um
texto alternativo que descreva a...
SCRIPTS
SONS, ÁUDIOS E VÍDEOS
Fornecer equivalentes para sons, áudios e vídeos.
Para sons e áudios, fornecer descrição textual, Pa...
CORES EM FUNDOS
Não recorrer apenas à cor.
Assegurar que todas as informações veiculas com cor
estejam também disponíveis ...
CORES EM FUNDOS
Exemplo Correto:
A descrição da cor faz parte da palavra árvore
"O item verde é de grande importância para...
CORES
Assegurar que a combinação de cores entre o fundo e o primeiro plano
seja suficiente contrastantes para poder ser vi...
IDIOMAS
Identificar a língua estrangeira em documento e
equivalentes textuais, através de marcações que
facilitem a pronún...
TABELAS
Se utilizar tabelas, use marcação correta para as
mesmas.
Recomendações:
Evitar o uso de tabelas para criação de l...
FORMULÁRIOS
Posicionar corretamente os rótulos e os controles
do formulário para que a navegação seja coerente
Associar o ...
FORMULÁRIOS
LINKS
O texto do link deve ser significativo e claro
O texto do link deve fazer sentido se lido separadamente. Os
usuário ...
LINKS
TABINDEX: para definir a ordem da navegação via
tecla "tab", incluir o atributo "tabindex" com
valores 1, 2, 3...no ...
LINKS
FRAMES
Frames devem ser sempre evitados. Porém, em
algumas situações seu uso pode ser necessário ou
até mesmo desejado.
Ne...
APPLETS / SCRIPTS
Assegure-se de que applets, quando a única fonte
de determinada funcionalidade, sejam diretamente
acessí...
USE UNIDADES DE MEDIDA RELATIVAS AO
INVÉS DE ABSOLUTAS
Não use unidades de medida absolutas para definir larguras
de eleme...
USE UNIDADES DE MEDIDA RELATIVAS AO
INVÉS DE ABSOLUTAS
FRAMES -> NOFRAMES
o conteúdo do elemento NOFRAMES é usado por, e
apenas por, user-agents que não têm suporte a
frames, e ...
7 MITOS DA ACESSIBILIDADE
Acessibilidade na Web é só para deficientes
visuais;
Na prática, o número de usuários beneficiad...
VANTAGENS DE UM WEBSITE ACESSÍVEL
Seu website estará adaptado a diferentes tipos de
conexão como, por exemplo, navegadores...
CONSIDERAÇÕES FINAIS
A política de acessibilidade deve ser implantada não só
visando os sítios públicos, que é obrigação l...
Obrigado!

Salomão Alcolumbre
salomao@webcenterna.com
Próximos SlideShares
Carregando em…5
×

Acessibilidade na Web - Salomão Alcolumbre

934 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
934
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×