View
460
Download
3
Category
Preview:
DESCRIPTION
Oficina de Acessibilidade na Web Ministrada por Prof. Salomão Alcolumbre no Festival Quebramar 2013
Citation preview
Prof. Esp. Salomão Alcolumbre
ACESSIBILIDADE NA WEB
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 anos. Formado emSistema de Informação(2005) e Especialista em Análise daTecnologia da Informação(2009).
� É Assessor Técnico da Promoção do Desenvolvimento desdeJan/2009 – Agência de Desenvolvimento do Amapá e Superadministrador 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.
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 direitos de acessibilidade às tecnologias de informação e comunicação.
Ex.: Cegos e amblíopes
OBJETIVO
� Objetivo dessa Palestra é criar acessibilidade na internetespecificamente para os deficientes visuais por meio daconscientização dos desenvolvedores web (webmasters,webdesigners, projetistas, consultores, empresários),empresas públicas/privadas e todas as pessoas comdisposição para aprender e concretizar esta ideia.
� É dever de todos citados acima que assegurem adisponibilização acessível da informação na INTERNETpara todos com necessidades especiais.
� sendo assim é necessário o entendimento das soluçõestécnicas para que este objetivo seja alcançado
ACESSIBILIDADE WEB É IMPORTANTE?
� A web é um recurso cada vez mais importante emvários aspectos da vida: educação, emprego, governo,comércio, cuidados de saúde, entretenimento, entreoutros. É essencial que a web seja acessível parafornecer igual acesso e iguais oportunidades apessoas com necessidades especiais. Uma Webacessível também pode ajudar as pessoas comnecessidades especiais a participarem maisativamente da sociedade.
DEFINIÇÕES
� Acessibilidade significa tornar possível o acesso aalguma coisa para o maior número de pessoaspossível.
� Acessibility. Na linguagem da Web, a acessibilidadede uma página permite que seja lida e navegada poruma pessoa inapta.
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 está olhando e brincando com o teclado.
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 deacessibilidade, vamos relembrar os conceitosbásicos que precisamos saber para criar umdocumento HTML
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 emletras maiúsculas.
� Para que serve o DOCTYPE?� Sua declaração DOCTYPE informa aos serviços
de validação e aos navegadores modernos qualDTD foi utilizada para elaborar a marcação, essainformação instrui os serviços de validação e osnavegadores de como tratar sua página.
DOCTYPE
� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EM""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 enomes de atributos associados a um DTD. Indicando sualocalização. No exemplo abaixo aparece a indicada a localizaçãonamespace em XHTML (http://www.w3.org/1999/xhtml). Os doisatributos adicionais especificam que versão do xml este emPortuguês-Brasileiro e que o documento está escrito emPortuguês-Brasileiro
� <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"lang="pt-br">
DECLARANDO O TIPO DE CONTEÚDO
� Para serem interpretados corretamente emnavegadores e aprovados nos teste de validação demarcação, todos os documentos XHTML, devemdeclarar o tipo de codificação de caractere que foiusada 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
ELEMENTO HEAD E SEUS ELEMENTOS-FILHOS
� O conteúdo da HEAD não é exibido para ousuário (com exceção do TITLE), mas éextremamente importante pois define meta-informações que podem ser importantes paradeterminados webbrowsers.
� Os elementos mais importantes paraacessibilidade que o compõem são o title e LINK
� Elemento title - o título do documento
� Elemento LINK - navegação para páginasimportantes e chamadas a arquivos externos.
ELEMENTO BODY
� É dentro do elemento BODY que estará todo oconteúdo que será exibido para o usuário.
<body><!-- Elementos da Página-->
</body>
ESTRUTURA COMPLETA DE UM
DOCUMENTO XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" 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>
ACESSIBILIDADE É PARA TODO MUNDO
� Lei Federal 10.098/00 e Decreto Federal 5296/04 Umaempresa deve estar atenta aos recursos de Informática eInternet que visam garantir acessibilidade às pessoas quepossuem certas deficiências, por exemplo, visuais.
� Quando mencionamos a palavra acessibilidade, a primeiracoisa que vem à cabeça são os deficientes. No caso da Web,principalmente deficientes visuais completos(cegos). Porémnão são só eles que necessitam e se beneficiam de sites maisacessíveis.
� Há outros diversos grupos de pessoas que têm anecessidades especiais e podem passar a ter acesso a sitesdos quais eram excluídos
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. Essesusuários tem imensas dificuldades em acessar sites naweb.
� LEITOR DE TELA� É um software que lê o texto que está na tela do
computador e saída desta informação é através de umsintetizador de voz ou um display braile - o leitor detela "fala" o texto para o usuário ou dispôe o texto embraile através de um dispositivo onde os pontos sãosalientados ou rebaixados para permitir a leitura.
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ãocarregadas. O navegador textual pode ser usado com oleitor de tela por pessoas cegas e também por pessoasque 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 aapresentação do conteúdo com sons, outros permitemacesso baseado em telefone (através de comando de vozpelo telefone e/ou por teclas do telefone)
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 decoordenaçõ ou paralisia), limitações de sensação, problemas nasjuntas 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 dedipor as teclas como por exemplo, teclado com espaçamento maioresou menores entre as teclas
GRUPO DE PESSOAS QUE TEM
NECESSIDADES ESPECIAIS
DaltônicosO daltonimos é uma deficiência visual que faz com que a pessoa tenhadificuldade em reconhecer uma ou mais cores.
Pessoas IdosasA partir de uma certa idade, passamos apresentar deficências em diversos dosnossos sentidos, principalmente visão, audição e coordenação motora. Pessoasidosas tem enormes dificuldades para aprender a lidar com computadores
Outros tipos de deficiênciasParalisia cerebral, amputação de membros superiores, surdez, e outros diversospodem dificultar o acesso a informação.
Usuários de dispositivos móveisDispositivos móveis como smartphones possuem telas pequenas, conexõeslentas, além de caras, browsers sem suporte a diversas tecnologias e por isso sãocaso de necessidade especial de acesso.Com acesso a padrões web e técnicas deestilização podem garantir acesso a usuários destes dispositivos
DIRETRIZES INTERNACIONAIS PARA
ACESSIBILIDADE
� O padrão internacional de diretrizes parapromoção de acessibilidade mais importante eaceito hoje em dia é o WCAG (Web ContentAcessibility Guidelines, ou Diretrizes deAcessibilidade para Conteúdo na Web), criadopelo W3C
� As diretrizes do WCAG são divididos em trêsníveis de prioridades.
VALIDAÇÃO E SELOS
� Existem basicamente dois tipos de validação aque um determinado conteúdo na web pode sersubmetido: validação de XHTML e validação deacessibilidade
� Validação XHTML� O mais conceituado validador de XHTML que
existe é da W3C.� http://validator.w3.org
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)
TESTES
OUTROS VALIDADORES DE
ACESSIBILIDADE
Da Silvahttp://www.dasilva.org.br
Cynthia Sayshttp://www.contentquality.com/
eXaminatorhttp://www.acesso.umic.pt/webax/examinator.php
Herahttp://www.slidar.org/hera/index.php.pt
SELOS
� os validadores de acessibilidade, ao fim de umachecagem, quando há sucesso na validação de algunsdos níveis de prioridade, oferecem um "selo". Este seloé uma imagem que mostra que determinado site foisubmetido ao teste e teve sucesso.
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ínimo de acessibilidade em umapá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
PRIORIDADE 1 (A)
Na tag "img" devemos incluir o atributo ALT, pois ele ésuficiente para descrever o conteúdo de um elementonão textual.
Quando for necessária uma explicação mais detalhadausar o atributo LONGDESCexemplo:
<img src="logo_site.png" alt="Logo do Site">
BOTÕES DE IMAGEM
Botões de imagem em formulários também devemconter o atributo ALT.
Todo elemento INPUT cujo atributo seja "image"deve conter um atributo ALT que descreva a açãoque será executada ao ser pressionado. Casocontrário o arquivo de imagem será exibido
<input type="image" src="botao.png" alt="ValidarDocumento">
ATRIBUTO "LONGDESC"
Quando o atributo ALT for insuficiente paradescrever de maneira adequada um recurso,devemos utlizar o atributo LONGDESC, que deveconter a URL de uma página que contém adescrição do recurso
<input type="image" src="botao.png" alt="ValidarDocumento">
IMAGENS QUE NÃO PRECISAM DE
DESCRIÇÃO
� Toda imagem que não faz parte do conteúdo deum site, ou seja, imagens meramentedecorativas, devem ser inseridas como imagem defundo, com uso de CSS. Neste caso o atributoALT deve ser vazio
� Exemplo:� <img src="img.jpg" alt="" />
SCRIPTS
� Devem seguir as seguintes regras- Incluir o elemento "noscript" para fornecer umtexto alternativo que descreva a ação ou substituaa funcionalidade do script- Fornece equivalente textual para scripts- Assegurar que programas interpretáveisfuncionem mesmo quando estes tiverem sidodesativados ou não forem suportados pelo browserdo usuário
SCRIPTS
SONS, ÁUDIOS E VÍDEOS
Fornecer equivalentes para sons, áudios e vídeos.Para sons e áudios, fornecer descrição textual, Paraimagens de vídeo, fornecer descrição sonora outextual.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 paraexplicar algo, um vídeo de uma pessoa traduzindo oconteúdo para linguagem de sinais.
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 pessoasque não diferenciam cores, bem como os usuários demonitores monocromáticos e dispositivos nãocoloridos, não receberão essa informação
Ex: IncorretoCriar uma página onde o item verde se destaque"O ítem verde é de grande importância para o ambiente"ÁrvoreLápisBorraca
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
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 cromodeficiências, bem como pelas que utilizam monitores de vídeomonocromáticos
IDIOMAS
� Identificar a língua estrangeira em documento eequivalentes textuais, através de marcações quefacilitem 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 Good, Acessibility
Web</span>
TABELAS
� Se utilizar tabelas, use marcação correta para asmesmas.
� 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 layoutsem tabelas (De acordo com os Padrões WEB -WebStandards )
FORMULÁRIOS
� Posicionar corretamente os rótulos e os controlesdo formulário para que a navegação seja coerente
� Associar o controle do formulário com orespectivo 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 oscontroles. Em "input" do tipo botão, não énecessário a associação, pois o leitor de tela fala otexto contido no botão que são imagens, usando oatributo alt.
� Criar a navegação ordenada através do atributo“tabindex”.
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 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."
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.
LINKS
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">
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.
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
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 pode ser usado da seguinte maneira
7 MITOS DA ACESSIBILIDADE
� Acessibilidade na Web é só para deficientesvisuais;
� Na prática, o número de usuários beneficiadoscom a acessibilidade é relativamente muitopequeno;
� Fazer um site acessível demora muito e custacaro;
� É melhor fazer uma página especial paradeficientes visuais;
� Um site acessível a deficientes visuais não ébonito;
� Vamos por partes: primeiro fazemos o site, depoisfazemos a acessibilidade;
� A gente não sabe o que é bom para o usuário.
VANTAGENS DE UM WEBSITE ACESSÍVEL
� Seu website estará adaptado a diferentes tipos deconexão como, por exemplo, navegadores maisantigos, computadores menos potentes, ou semmouse, e outros casos;
� Seu website estará dentro dos princípios deacessibilidade preconizados pela lei federal deacessibilidade (Lei no. 10 098, de 19 de dezembro de2000), que estabelece normas gerais e critérios básicospara a promoção da acessibilidade das pessoasportadoras de deficiência ou com mobilidade reduzidae dá outras providências;
� Você pode ter mais pessoas acessando suasinformações ou serviços;
� Ao ter mais acessos, seu website garantirá a adesãodessa comunidade e simpatizantes, e atrairá maisanunciantes.
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 einiciativa privada, não somente pelo entendimento emrelação às diferenças, mas principalmente como umimportante fator sócio-econômico-cultural gerado pelainclusão desse grande grupo de cidadãos nesse novo eemergente mercado de consumo.
Salomão Alcolumbresalomao@webcenterna.com
Obrigado!
Recommended