Acessibilidade na Web - Salomão Alcolumbre

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>

</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>

</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.



� 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)



� 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



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 [email protected]

Obrigado!

Technology

Acessibilidade na Web - Salomão Alcolumbre