Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Reinaldo Ferraz. junho/2009. Acessibilidade na Web:

(1)

Acessibilidade na Web:

o caminho das pedras para construir

sítios acessíveis.

(2)

É um consórcio internacional, criado em 1994

por Tim Berners-Lee com

• organizações filiadas,

• uma equipe em tempo integral,

• participação do público

para colaborativamente desenvolver padrões

universais para a Web.

(3)

3

O W3C no Brasil

O escritório brasileiro começou suas atividades

em outubro de 2007.

É uma iniciativa do CGI.br, que é o responsável por coordenar e

integrar as iniciativas de serviços da Internet no País e do

NIC.br, criado para implementar as decisões e os projetos do

(4)

Conduzir a World Wide Web para que atinja todo

seu potencial, desenvolvendo protocolos e

diretrizes que garantam seu crescimento de

longo prazo.

(5)

5

O W3C desenvolve padrões

Conduzir a World Wide Web para que atinja todo

seu potencial, desenvolvendo protocolos e

diretrizes que garantam seu crescimento de

longo prazo.

Desde sua fundação, o W3C publicou mais de 110 de

padrões, denominados

Recomendações do W3C

(6)

(7)

7

Metas W3C

Tornar os benefícios da web (seu valor social: comunicação

humana, comércio, compartilhar conhecimentos)

disponíveis a todos

, independente de

• Web para todos

– Hardware

– Software

– Infra-estrutura de

rede

– Cultura

– Localização

geográfica

– Habilidade física

(8)

• Web para todos

(9)

9

Metas W3C

Possibilitar que o acesso de

qualquer tipo de dispositivo

seja tão simples, fácil e conveniente quanto de um

computador convencional

• Web em qualquer dispositivo

– Computadores

– Desktops

– Netbooks

– Telefones

– TV digital

– Sistemas de

interação por voz

– Aparelhos

(10)

• Web para todos

• Web em qualquer dispositivo

• Web base de conhecimento

(11)

11

Metas W3C

Não apenas um grande livro hiperlinkado onde pessoas

possam pesquisar, navegar, ler e visualizar informações

Possibilitar que

computadores interpretem

, estabeleçam

inferências e relações na web

Interoperabilidade

– Web Semântica

(12)

• Web para todos

• Web em qualquer dispositivo

• Web base de conhecimento

• Web confiável e segura

(13)

13

Metas W3C

Uma web em que as transações sociais e comunicações com

terceiros sejam estabelecidas em

relações de confiança

,

sejam pessoas, organizações ou serviços

• Web confiável e segura

– Ambiente mas colaborativo

– Responsável

– Seguro

(14)

WAI - Web Accessibility Initiative

Iniciativa do W3C que trabalha em conjunto com organizações de todo o mundo

desenvolvendo estratégias, orientações e recursos para

ajudar a tornar a Web

acessível à pessoas com deficiência

.

WCAG - Web Content Accessibility Guidelines

São as Recomendações para a acessibilidade do conteúdo da Web,

documentos que explicam como tornar o conteúdo Web acessível a pessoas com

deficiências, destinando-se a todos os criadores de conteúdo Web (autores de

páginas e projetistas de sites) e aos programadores de ferramentas para criação

de conteúdo.

Versão 1.0: 5 de maio de 1999

(15)

15

Acessibilidade na Web

(16)

Segundo a legislação brasileira:

Acessibilidade é condição para utilização, com segurança e

autonomia, total ou assistida, dos espaços, mobiliários e

equipamentos urbanos, das edificações, dos serviços de

transporte e dos

dispositivos, sistemas e meios de

comunicação e informação, por pessoa com deficiência

ou com mobilidade reduzida

.

DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004.

(17)

17

O que é acessibilidade?

Segundo a WAI:

Acessibilidade na Web significa que pessoas

com deficiências podem perceber, entender,

navegar e interagir além de poder contribuir

para a web.

(18)

Acessibilidade na web

diz respeito à

facilidade de acesso, por

qualquer pessoa

, independente de

condições físicas, técnicas ou

dispositivos.

(19)

19

Acessibilidade na web: A quem se destina?

(20)

Deficientes visuais

-

Cegos: Pessoas que navegam com leitores de tela

-

Daltônicos: Dificuldade em enxergar cores e contrastes

-

Baixa visão: Necessidade de aumento de tela para ler

Deficientes auditivos

-

Pessoas que não conseguem acompanhar um vídeo na internet com áudio.

Deficientes motores

-

Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou

(21)

21

Acessibilidade na web: A quem se destina?

Displays reduzidos

-

Acessando a internet por um telefone celular.

Deficiência temporária

-

Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinite,

etc.

Início de aprendizado

-

Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o

computador.

(22)

Fazer um site acessível não é só se

preocupar com um determinado grupo de

pessoas:

É se preocupar com todas as

(23)

Tutorial de

(24)

• É uma recomendação W3C de 5 de maio de 1999

• Foi traduzido para o português por Cláudia Dias, auditora da tecnologia da

informação do Tribunal de Contas da União (TCU)

• As recomendações explicam como tornar o conteúdo Web

acessível a

(25)

25

WCAG 1.0

• No entanto, faz também com que o conteúdo da Web se torne

de mais fácil acesso a

todos

os usuários:

• independentemente da ferramenta usada

(computadores de mesa,

laptops, telefones celulares, ou navegador por voz) e das

• limitações associadas ao respectivo uso

(ambientes barulhentos,

salas mal iluminadas ou com excesso de iluminação, utilização sem o

uso das mãos).

(26)

Os desenvolvedores de páginas Web devem levar em consideração diferentes

situações ao criar uma página. A Web pode ser utilizada por pessoas que:

• sejam

incapazes de ver, ouvir, se deslocar, ou interpretar

determinados

tipos de informações;

• tenham

dificuldade em ler

ou compreender textos;

• não tenham um teclado ou mouse

, ou não sejam capazes de utilizá-los;

• possuam

tela que apresenta apenas texto

, ou com

dimensões

(27)

27

Introdução

Os desenvolvedores de páginas Web devem levar em consideração diferentes

situações ao criar uma página. A Web pode ser utilizada por pessoas que:

• não

falem ou compreendam

fluentemente o idioma em que o documento

foi escrito;

• estejam com seus

olhos, mãos ou ouvidos ocupados

(por exemplo em

um ambiente barulhento ou fora de casa ou do trabalho);

• possuam uma versão

ultrapassada de navegador web, diferente dos

habituais

, um

navegador por voz

, ou um

sistema operacional pouco

(28)

(29)

29

Introdução

- Utilização de folhas de estilo (CSS)

- Tornar imagens acessíveis

(30)

Utilização de Folhas de Estilo (CSS)

Vantagens da utilização de Folhas de Estilo

- Obter maior controle e domínio sobre as páginas criadas

- Redução do tempo de transferência de páginas

(31)

<font face=“Arial, Verdana, Helvetica, sans-serif” size=“2”

color=“black”>Seu texto

body {

color: #ffffff;

font-family: Arial, Verdana, Helvetica, sans-serif;

font-size: 1em;

}

Seu texto

31

Introdução

(32)

Utilização de Folhas de Estilo (CSS)

                                    

CSS

(33)

33

Introdução

Utilização de Folhas de Estilo (CSS)

                                  

CSS

(34)

Tornar imagens acessíveis

Alguns usuários

podem não ser capazes de ver imagens

;

outros podem utilizar navegadores textuais e que não

suportam imagens; e ainda outros podem ter desativado o

suporte a imagens (por ex., porque possuem uma conexão

lenta com a Internet)

(35)

35

Introdução

Tornar imagens acessíveis

<body>

<img src="foto-01.gif" alt="">

O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris,

construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua

construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées.

(36)

Tornar imagens acessíveis

<body>

<img src="foto-01.gif" alt="">

construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>

(37)

37

Introdução

Tornar imagens acessíveis

<body>

<img src="foto-01.gif" alt=“Foto: Divulgação">

construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées.

(38)

Tornar imagens acessíveis

<body>

<img src="foto-01.gif" alt=“Foto do Arco do Triunfo">

O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em 1806. Inaugurado em 1836, a monumental obra detém,

gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado

Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées.

(39)

39

Introdução

Tornar imagens acessíveis

Além de beneficiarem os

usuários deficientes, os

equivalentes textuais

contribuem para que todos

e quaisquer usuários

encontrem as páginas mais

depressa, já que os

mecanismos de busca

podem se servir do texto

(40)

(41)

41

Recomendações

Recomendações para a acessibilidade do

conteúdo da Web

(42)

O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade, com

base no respectivo impacto, em termos de acessibilidade.

[Prioridade 1]

Pontos que os criadores de conteúdo Web

devem

satisfazer inteiramente.

Se não o fizerem, um ou mais grupos de usuários

ficarão impossibilitados

de acessar as informações contidas no documento. A satisfação desse

tipo de pontos é um

requisito básico

para que determinados grupos

possam acessar documentos disponíveis na Web.

(43)

43

Níveis de prioridade

O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade,

com base no respectivo impacto, em termos de acessibilidade.

[Prioridade 2]

Pontos que os criadores de conteúdos na Web

deveriam

satisfazer.

Se não o fizerem, um ou mais grupos de usuários

terão dificuldades

em

acessar as informações contidas no documento. A satisfação desse

tipo de pontos

promoverá a remoção de barreiras significativas

ao

acesso a documentos disponíveis na Web.

(44)

O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade,

com base no respectivo impacto, em termos de acessibilidade.

[Prioridade 3]

Pontos que os criadores de conteúdos na Web

podem

satisfazer.

Se não o fizerem, um ou mais grupos

poderão se deparar com algumas

dificuldades

em acessar informações contidas nos documentos. A

satisfação deste tipo de pontos irá

melhorar o acesso a documentos

(45)

45

Recomendação 1

Fornecer alternativas ao conteúdo sonoro e visual

Fornecer um

equivalente textual

a cada elemento não textual (por ex., por

meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento).

[Prioridade 1]

• Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer

um equivalente textual como parte do conteúdo dos elementos

OBJECT e APPLET.

Exemplos:

<img src="foto-01.gif"

alt="Foto do Arco do Triunfo"

>

(46)

Fornecer

links de texto redundantes

relativos a cada região ativa de um

mapa de imagem

armazenado no servidor. [Prioridade 1]

<img src="logos.gif" alt="Logotipos"

border="0" usemap="#Map">

<map name="Map">

<area shape="circle" coords="79,105,58"

href="logo-01.htm"

alt=“Página do Logo 01"

>

<area shape="circle" coords="211,221,58"

href="logo-02.htm"

alt=“Página do Logo 02">

(47)

47

Recomendação 1

Fornecer alternativas ao conteúdo sonoro e visual

Em apresentações multimídia baseadas em tempo (filme ou animação),

sincronizar as alternativas equivalentes

(legendas ou descrições sonoras

dos trechos visuais) e a apresentação. [Prioridade 1]

(48)

1 Assegurar que todas as informações veiculadas com cor estejam também

disponíveis sem cor

, por exemplo a partir do contexto ou de marcações.

[Prioridade 1]

Clique no botão vermelho para continuar

(49)

Recomendação 2 - Não recorrer apenas à cor

Assegurar que todas as informações veiculadas com cor estejam também

disponíveis sem cor

, por exemplo a partir do contexto ou de marcações.

[Prioridade 1]

(50)

1 Assegurar que todas as informações veiculadas com cor estejam também

disponíveis sem cor

, por exemplo a partir do contexto ou de marcações.

[Prioridade 1]

Clique no número 3 para continuar

2

3

4

5

6

7

8 ou

Clique no botão “Continuar”

Continuar

(51)

Recomendação 2 - Não recorrer apenas à cor

Assegurar que a combinação de cores entre o fundo e o primeiro plano seja

suficientemente contrastante

para poder ser vista por pessoas com

cromodeficiências, bem como pelas que utilizam monitores de vídeo

monocromáticos. [Prioridade 2 para imagens; prioridade 3 para texto]

(52)

Utilizar

folhas de estilo

para controlar a paginação (disposição em página) e

a apresentação. [Prioridade 2]

                                    

CSS

(53)

Em CSS, utilizar 'em' ou percentagens em vez das unidades

absolutas 'pt' ou 'cm'

Alguns navegadores aumentam o tamanho da fonte dentro do

navegador. Utilizando unidades absolutas esse aumento fica

prejudicado.

Alguns navegadores já fazem “zoom” na tela inteira do website.

Recomendação 3 - Utilizar corretamente marcações e folhas de estilo

Utilizar

unidades relativas, e não absolutas

, nos valores dos atributos da

linguagem de marcação e nos valores das propriedades das folhas de

estilo. [Prioridade 2]

(54)

H1

Utilizar

elementos de cabeçalho

indicativos da estrutura do documento, de

acordo com as especificações. [Prioridade 2]

H2

H3

H2

(55)

Recomendação 3 - Utilizar corretamente marcações e folhas de estilo

Marcar corretamente

listas

e pontos de enumeração em listas. [Prioridade 2]

<ul>

<li>Primeiro texto

<ul>

<li>Sub texto</li>

</ul>

</li>

(56)

(57)

HTML:

XHTML:

<html lang="pt-br">

<html xml:lang="pt-br“>

Recomendação 4 - Indicar claramente qual o idioma utilizado

Identificar claramente quaisquer

mudanças de idioma

no texto de um

documento, bem como nos equivalentes textuais (por ex., legendas).

[Prioridade 1]

HTML (acrônimo para a expressão inglesa

HyperText

Markup Language

,

que significa Linguagem de Marcação de

Hipertexto) é uma linguagem de marcação utilizada para produzir páginas

na Web. Documentos HTML podem ser interpretados por navegadores. A

tecnologia é fruto do "casamento" dos padrões

(58)

<acronym title="HyperText Markup Language">HTML</acronym>

<abbr title="HyperText Markup Language">HTML</abbr>

Especificar por extenso cada abreviatura

ou sigla quando da sua primeira

ocorrência em um documento. [Prioridade 3]

<acronym title="HyperText Markup Language">

HTML

</acronym>

(que significa Linguagem de Marcação de Hipertexto) é uma linguagem

de marcação utilizada para produzir páginas na Web.

(59)

59

Recomendação 5 - Criar tabelas passíveis de transformação

harmoniosa

Em tabelas de dados,

identificar os cabeçalhos

de linha e de coluna.

[Prioridade 1]

<table>

<tr>

<th>Limão</th>

<th>Maçã</th>

<th>Pera</th>

</tr>

<tr>

<td>R$ 10,00</td>

<td>R$ 12,00</td>

<td>R$ 11,00</td>

</tr>

(60)

Em tabelas de dados

, identificar os cabeçalhos

de linha e de coluna.

[Prioridade 1]

<table>

<tr>

<th>Limão</th>

<td>R$ 10,00</td>

</tr>

<tr>

<th>Maçã</th>

<td>R$ 12,00</td>

</tr>

<tr>

<th>Pera</th>

<td>R$ 11,00</td>

</tr>

(61)

61

Recomendação 5 - Criar tabelas passíveis de transformação

harmoniosa

Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de

linha ou de coluna,

utilizar marcações

para associar as células de dados

às células de cabeçalho. [Prioridade 1]

<table> <thead> <tr> <thid="header1" >Produto</th> <thid="header2" >Valor</th> </tr> </thead> <tfoot> <tr> <tdheaders="header1">Total</td> <tdheaders="header2">R$ 12,00</td> </tr> </tfoot> <tbody> <tr> <td headers="header1" >Maçã</td>

(62)

Organizar os documentos de tal forma que possam ser

lidos sem recurso a

folhas de estilo

. Por exemplo, se um documento em HTML for

reproduzido sem as folhas de estilo que lhe estão associadas, deve

continuar a ser possível lê-lo. [Prioridade 1]

(63)

63

Recomendação 6 - Assegurar que as páginas dotadas de novas

tecnologias sejam transformadas harmoniosamente

Assegurar que todas as páginas possam ser utilizadas mesmo que os

programas interpretáveis, os applets ou outros objetos programados

tenham sido desativados ou não sejam suportados

. Se isso não for

possível, fornecer informações equivalentes em uma página alternativa,

acessível. [Prioridade 1]

<a href=“javascript.open.novajanela”>Texto</a>

JavaScript

var link = document. open.novajanela(‘link’);

function link() {

[…]

}

(64)

Evitar concepções que possam provocar

intermitência da tela

, até que os

agentes do usuário possibilitem o seu controle. [Prioridade 1]

Nota: Uma intermitência ou pulsar na faixa de 4 a 59

pulsos por segundo (Hertz), sendo o pico de

sensibilidade 20 pulsos por segundo, bem como uma

rápida passagem de uma quase escuridão para uma

iluminação excessiva (como a que ocorre nas luzes de

tipo "strobe"), pode desencadear ataques ou ausências

nas pessoas com epilepsia fotossensível.

(65)

65

Recomendação 7 - Assegurar o controle do usuário sobre as

alterações temporais do conteúdo

Não criar páginas de

atualização automática

periódica, até

que os agentes do usuário possibilitem parar essa

atualização. [Prioridade 2]

(66)

Não utilizar marcações para

redirecionar as páginas automaticamente

, até

que os agentes do usuário possibilitem parar o redirecionamento

automático. Ao invés de utilizar marcações, configurar o servidor para

que execute os redirecionamentos. [Prioridade 2]

(67)

67

Recomendação 9 - Projetar páginas considerando a independência

de dispositivos

Assegurar que qualquer elemento dotado de interface própria possa

funcionar de modo

independente de dispositivos

. [Prioridade 2]

(68)

Assegurar que qualquer elemento dotado de interface própria possa

funcionar de modo

independente de dispositivos

. [Prioridade 2]

(69)

69

Recomendação 9 - Projetar páginas considerando a independência

de dispositivos

Criar uma

seqüência lógica de tabulação

para percorrer links, controles de

formulários e objetos. [Prioridade 3]

(70)

Não provocar o aparecimento de janelas de sobreposição

ou outras

quaisquer, e não fazer com que o conteúdo da janela atual seja

modificado

sem que o usuário seja informado disso

, até que os agentes

do usuário tornem possível a desativação de janelas secundárias.

(71)

Recomendação 10 - Utilizar soluções de transição

Assegurar o

correto posicionamento de todos os controles de formulários

que tenham rótulos implicitamente associados, até que os agentes do

usuário venham a suportar associações explícitas entre rótulos e

controles de formulários. [Prioridade 2]

<form>

<label for="nome">

Nome:

<input type="text" name="nome“

id="nome"

>

</label>

Sexo:

<label for="masculino">

Masculino

(72)

Incluir

caracteres predefinidos

de preenchimento nas caixas de edição e nas

áreas de texto, até que os agentes do usuário tratem corretamente os

controles vazios. [Prioridade 3]

<form>

<label for="nome">Nome:

<input type="text" name="nome“ id="nome“

value=“Digite seu nome”

></label>

Sexo:

<label for="masculino">Masculino

<input type="radio" name="sexo" value="masc" id="masculino"></label>

(73)

73

Recomendação 11 - Utilizar tecnologias e

recomendações do W3C

Utilizar tecnologias do W3C

sempre disponíveis e adequadas a uma

determinada tarefa; utilizar as versões mais recentes, desde que

suportadas. [Prioridade 2]

As presentes recomendações recomendam tecnologias do W3C (por ex., HTML,

CSS), por várias razões:

• As tecnologias do W3C incluem funções

de acessibilidade "integradas".

• As especificações do W3C são

apreciadas nas fases iniciais dos

projetos

, para garantir que as questões de acessibilidade sejam levadas em

conta na fase de criação.

(74)

(75)

75

Recomendação 12 - Fornecer informações de

contexto e orientações.

Dar, a cada frame, um título

que facilite a identificação dos frames e sua

navegação. [Prioridade 1]

Por exemplo, em HTML, utilizar o atributo "title" nos elementos FRAME.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<HTML>

<HEAD>

<TITLE>A simple frameset document</TITLE>

</HEAD>

<FRAMESET cols="10%, 90%"

title="Our library of electronic documents"

>

<FRAME src="nav.html"

title="Navigation bar">

<FRAME src="doc.html"

title="Documents"

>

<NOFRAMES> <A href="lib.html"

title="Library link"

> Select to go to the

electronic library</A>

(76)

Dividir grandes blocos de informação

em grupos mais fáceis de gerenciar,

sempre que for o caso. [Prioridade 2]

<FORM action="http://example.com/adduser" method="post">

<FIELDSET>

<LEGEND>Personal information</LEGEND>

<LABEL for="firstname">First name: </LABEL>

<INPUT type="text" id="firstname" tabindex="1">

<LABEL for="lastname">Last name: </LABEL>

<INPUT type="text" id="lastname" tabindex="2">

...more personal information...

</FIELDSET>

<FIELDSET>

<LEGEND>Medical History</LEGEND>

...medical history information...

</FIELDSET>

(77)

77

Recomendação 13 - Fornecer mecanismos de

navegação claros

Identificar claramente o

destino de cada link

. [Prioridade 2]

<a href=“noticia.htm”>Clique aqui</a>

<a href=“noticia.htm”>Veja as notícias</a>

<a href=“lancamentos.htm”

title=“Veja a nova coleção outono/inverno

2009”

>Conheça nossos lançamentos</a>

Utilize

Em vez de

(78)

Dar informações sobre a

organização geral de um site

(por ex., por meio de

um mapa do site ou de um sumário). [Prioridade 2]

(79)

79

Recomendação 14 - Assegurar a clareza e a

simplicidade dos documentos.

Utilizar

linguagem a mais clara e simples possível

, adequada ao conteúdo do

site. [Prioridade 1]

Um site com linguagem clara facilita a possibilidade

de aprofundamento do usuário em seu conteúdo.

(80)

Complementar o texto

com apresentações gráficas ou sonoras, sempre que

facilitarem a compreensão da página. [Prioridade 3]

(81)

Validação

A validação da acessibilidade deve ser feita por meio de ferramentas

automáticas e da revisão direta. Os métodos automáticos são geralmente

rápidos, mas não são capazes de identificar todas as nuances da

acessibilidade. A avaliação humana pode ajudar a garantir a clareza da

linguagem e a facilidade da navegação.

1 - Utilizar uma

ferramenta de acessibilidade

automatizada

, e uma

ferramenta de validação

de navegadores

. Vale lembrar que as

ferramentas de software não incidem sobre

todas as questões da acessibilidade, tais como

clareza de um texto, aplicabilidade de um

(82)

2 -

Validar a sintaxe

(por ex., HTML, XML).

http://validator.w3.org/

3 -

Validar as folhas de estilo

(por ex., CSS).

http://jigsaw.w3.org/css-validator/

(83)

Validação

4 - Utilizar um

navegador

exclusivamente

textual

ou um emulador.

5 - Utilizar

vários navegadores gráficos

, com:

- som e gráficos ativos;

- sem gráficos;

- sem som;

- sem mouse;

- sem carregar frames, programas interpretáveis, folhas de estilo ou

applets.

6 - Utilizar vários

navegadores, antigos e recentes

.

7 - Utilizar um

navegador de emissão automática de fala

, um

leitor de tela

,

(84)

8 - Utilizar

corretores ortográficos e gramaticais

. A eliminação de

problemas gramaticais aumenta o grau de compreensão.

9 -

Rever o documento

, verificando sua clareza e simplicidade.

(85)

(86)

• É uma recomendação W3C de 11 Dezembro de 2008

• Foi traduzido para o português em 2 de março de 2009 pelo Prof.

Everaldo Bechara, do Centro de Treinamento iLearn.

• Os critérios de sucesso do WCAG 2.0 são escritos como

declarações

testáveis, que não são especificamente tecnológicas

.

• As WCAG 2.0 foram desenvolvidas através do processo W3C em

colaboração com pessoas e organizações em todo o mundo

, com o

objetivo de elaborar um padrão compartilhado referente à acessibilidade

para o conteúdo da Web, que satisfaça as necessidades das pessoas,

das organizações e dos governos, a nível internacional.

(87)

Níveis de Abordagem das WCAG 2.0

• Princípios - No topo estão quatro princípios que constituem a fundação da

acessibilidade da Web

: perceptível, operável, compreensível e robusto

.

• Recomendações - As

12 Recomendações

apresentam os objetivos básicos que os

autores devem atingir para tornar o conteúdo mais acessível aos usuários com diferentes

incapacidades.

• Critérios de Sucesso - Para satisfazer as necessidades dos diferentes grupos e

situações, são definidos três níveis de conformidade:

A

(o mais baixo),

AA

e

AAA

(o mais elevado).

• Técnicas de tipo Suficiente e de tipo Aconselhada - As técnicas têm caráter

informativo e enquadram-se em duas categorias: as que são de tipo suficiente e

vão ao

encontro dos critérios de sucesso

e as que são de tipo aconselhada. As técnicas de tipo

(88)

Princípio 1: Perceptível - A informação e os componentes

da interface do usuário têm de ser apresentados aos

usuários em formas que eles possam perceber.

(89)

Princípio 1: Perceptível - A informação e os componentes da

interface do usuário têm de ser apresentados aos usuários em

formas que eles possam perceber.

Alternativas em Texto: Fornecer alternativas em texto.

Lembram do atributo “alt”?

Mídias com base no tempo: Fornecer alternativas para mídias com

base no tempo.

Legendas e descrição do conteúdo sonoro

Adaptável: Criar conteúdos que possam ser apresentados de

(90)

Princípio 2: Operável - Os componentes de interface de

usuário e a navegação têm de ser operáveis.

(91)

Princípio 2: Operável - Os componentes de interface de

usuário e a navegação têm de ser operáveis.

Acessível por Teclado: Fazer com que toda a funcionalidade fique

disponível a partir do teclado.

Estruturação do conteúdo

Ataques Epilépticos: Não criar conteúdo de uma forma conhecida

que possa causar ataques epilépticos

Evitar piscar de telas

Navegável: Fornecer formas de ajudar os usuários a navegar,

localizar conteúdos e determinar o local onde estão.

(92)

Princípio 3: Compreensível - A informação e a operação

da interface de usuário têm de ser compreensíveis.

(93)

Princípio 3: Compreensível - A informação e a operação da

interface de usuário têm de ser compreensíveis.

Legível: Tornar o conteúdo de texto legível e compreensível.

Identificação do idioma, abreviaturas (acronym), etc.

Previsível: Fazer com que as páginas Web surjam e funcionem de

forma previsível.

(94)

Princípio 4: Robusto - O conteúdo tem de ser robusto o

suficiente para poder ser interpretado de forma

concisa por diversos agentes do usuário, incluindo

tecnologias assistivas.

(95)

Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente

para poder ser interpretado de forma concisa por diversos agentes

do usuário, incluindo tecnologias assistivas.

Compatível: Maximizar a compatibilidade com atuais e futuros

agentes de usuário, incluindo tecnologias assistivas.

(96)

Como cumprir as WCAG 2.0

- Uma referencia rápida, passível de personalização, às

WCAG 2.0, que inclui todas as recomendações, critérios de sucesso e técnicas a serem

utilizados pelos autores à medida que desenvolvem e avaliam o conteúdo da Web.

http://www.w3.org/WAI/WCAG20/quickref/

Entendendo as WCAG 2.0

- Um guia para compreender e implementar as WCAG 2.0.

Existe um pequeno documento intitulado "Noções sobre" para cada recomendação e

critério de sucesso nas WCAG 2.0, bem como tópicos-chave.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/

Técnicas para as WCAG 2.0

- Um conjunto de técnicas e falhas comuns, cada um num

documento em separado que incluem uma descrição, exemplos, código fonte e testes.

http://www.w3.org/TR/WCAG20-TECHS/

Os documentos das WCAG 2.0

- Um diagrama e uma descrição sobre a forma como os

documentos técnicos estão relacionados e ligados.

(97)

DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS

Imagens e Animações. Use o atributo alt para descrever a função de cada

elemento visual.

Imagemaps. Use mapas client-side (o tag map) e texto para as regiões clicáveis.

Multimídia. Inclua legendas e transcrições para o audio, e descrições para o vídeo.

Híperlinks. Utilize texto que faça sentido fora do contexto. Evite a frase

"clique aqui".

(98)

Scripts, applets e plug-ins. Para o caso de estarem desabilitados ou de não serem

suportados pelo browser, forneça conteúdo alternativo.

Frames. Use o tag noframes e empregue títulos significativos.

Tabelas. Torne compreensível a leitura linha a linha. Resuma.

Valide seu trabalho. Use as ferramentas, checklist e os guias disponíveis em

(99)

Música tema do WCAG 2.0

"Nós queremos lhes mostrar o WCAG“

O vídeo é uma criação de David MacDonald, que aparece cantando a canção do WCAG

pelas ruas. Enquanto isso o vídeo mostra também pessoas com diversos tipos de

deficiência utilizando tecnologias assistivas. Ele é baseado nos 4 princípios do WCAG 2.0.