Reinaldo Ferraz <reinaldo@nic.br>
É um consórcio internacional, criado em 1994 por Tim Berners-Lee com:
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 Comitê Gestor da Internet no Brasil.
Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.
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: Web Standards – Padrões Web
Web para todos
Tornar os benefícios da web (seu valor social: comunicação humana, comércio, compartilhar conhecimentos) disponíveis a todos, independente de:
Web em qualquer dispositivo
Possibilitar que o acesso de qualquer tipo de dispositivo seja tão simples, fácil e conveniente quanto de um computador convencional.
Web base de conhecimento
Não apenas um grande livro hiperlinkado onde pessoas possam pesquisar, navegar, ler e visualizar informações.
Web confiável e segura
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.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.O que é acessibilidade?
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.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.Acessibilidade na web diz respeito à facilidade de acesso, por qualquer pessoa, independente de condições físicas, técnicas ou dispositivos.
Acessibilidade é para todos
Deficientes visuais
Deficientes auditivos
Deficientes motores
Displays reduzidos
Deficiência temporária
Início de aprendizado
Idade avançada
Fazer um site acessível não é só se preocupar com um determinado grupo de pessoas: É se preocupar com todas as pessoas que acessam seu site.
Tutorial de
Acessibilidade na Web
WCAG 1.0
WCAG 1.0
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:
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:
Utilização de Folhas de Estilo (CSS)
Vantagens da utilização de Folhas de Estilo:Utilização de Folhas de Estilo (CSS)
<font face=“Arial, Verdana, Helvetica, sans-serif” size=“2” color=“black”>Seu texto</font>
body {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
}
Seu texto
Utilização de Folhas de Estilo (CSS)
Utilização de Folhas de Estilo (CSS)
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)
Tornar imagens acessíveis
<body>Tornar imagens acessíveis
<body>Tornar imagens acessíveis
<body>Tornar imagens acessíveis
<body>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 em sua indexação.
Tornar imagens acessíveis
Recomendações para a acessibilidade do conteúdo da Web
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] 
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] 
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] 
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]<img src="foto-01.gif" alt="Foto do Arco do Triunfo">
<applet alt=“Descrição do aplicativo"></applet>
<input type="image" src="enviar.gif" value="Enviar" alt="Enviar dados">
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]
<img src="logos.gif" alt="Logotipos" border="0" usemap="#Map">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]
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]
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]
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]
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]
Utilizar corretamente marcações e folhas de estilo
Utilizar folhas de estilo para controlar a paginação (disposição em página) e a apresentação. [Prioridade 2]
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]Utilizar corretamente marcações e folhas de estilo
Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações. [Prioridade 2]
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>
<li>Segundo texto</li>
</ul>
Utilizar corretamente marcações e folhas de estilo
Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações. [Prioridade 2]
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 lang="pt-br">
<html xml:lang="pt-br“>
HTML (acrônimo para a expressão inglesa <span lang=“en”>HyperText Markup Language</span>, 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 <span lang=“en”> HyTime</span> e SGML.
Indicar claramente qual o idioma utilizado
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>
<abbr title="HyperText Markup Language">HTML</abbr>
<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.
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>
</table>
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>
<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>
</table>
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>
<th id="header1">Produto</th>
<th id="header2">Valor</th>
</tr></thead>
<tfoot><tr>
<td headers="header1">Total</td>
<td headers="header2">R$ 12,00</td>
</tr></tfoot>
<tbody><tr>
<td headers="header1">Maçã</td>
<td headers="header2">R$ 12,00</td>
</tr></tbody>
</table>
Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente
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]
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() {
[…]
}
link.onclick = link;
link.onkeypress = link;
<a href=“link.htm” id=“link”>Texto</a>
Assegurar o controle do usuário sobre as alterações temporais do conteúdo
Evitar concepções que possam provocar intermitência da tela, até que os agentes do usuário possibilitem o seu controle. [Prioridade 1]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]
Assegurar o controle do usuário sobre as alterações temporais do conteúdo
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]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]
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]
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]
Utilizar soluções de transição
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. [Prioridade 2]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
<input type="radio" name="sexo" value="masc" id="masculino"></label>
<label for="feminino">Feminino
<input type="radio" name="sexo" value="fem" id="feminino"></label>
</form>
Utilizar soluções de transição
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>
<label for="feminino">Feminino
<input type="radio" name="sexo" value="fem" id="feminino"></label>
</form>
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]Utilizar tecnologias e recomendações do W3C
Evitar funcionalidades desatualizadas de tecnologias do W3C. [Prioridade 2]
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]<!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>
</NOFRAMES>
</FRAMESET>
Fornecer informações de contexto e orientações
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>
</FORM>
Fornecer mecanismos de navegação claros
Identificar claramente o destino de cada link. [Prioridade 2]<a href="noticia.htm">Veja as notícias</a>
<a href="noticia.htm">Clique aqui</a>
<a href="lancamentos.htm" title="Veja a nova coleção outono/inverno 2009">Conheça nossos lançamentos</a>Conheça nossos lançamentos
Fornecer mecanismos de navegação claros
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]
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]Assegurar a clareza e a simplicidade dos documentos
Complementar o texto com apresentações gráficas ou sonoras, sempre que facilitarem a compreensão da página. [Prioridade 3]
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 equivalente textual.
WCAG 2.0
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
Os componentes de interface de usuário e a navegação têm de ser operáveis
Os componentes de interface de usuário e a navegação têm de ser operáveis
Os componentes de interface de usuário e a navegação têm de ser operáveis
"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.