Design Orientado as
Especificações do W3C e
Acessibilidade
Alexandre Junqueira
Coordenação de Comunicação Institucional – ENSP/Fiocruz
[email protected]
1
Tópicos
 W3C
 Acessibilidade na Web
 As especificações XHTML e CSS
Design Orientado as Especificações do W3C e Acessibilidade
2
W3C
The World Wide Web Consortium
Design Orientado as Especificações do W3C e Acessibilidade
3
Os membros
 Participam do W3C 429 membros,
responsáveis por regular as tecnologias
utilizadas na Web:
Adobe, Apple, Google, IBM, Intel,
Microsoft, Sony, Yahoo...
Design Orientado as Especificações do W3C e Acessibilidade
4
As especificações
 O W3C regulamenta as tecnologias
utilizadas na Web através das
especificações:
HTML, XML, XHTML, XSL, XSLT,
XPATH, PNG, CSS...
Design Orientado as Especificações do W3C e Acessibilidade
5
O diretor
 Tim Berners-Lee,
inventor da Web e
diretor do W3C.
Design Orientado as Especificações do W3C e Acessibilidade
6
O pesquisador
 Tim Berners-Lee, abdicou de todo
provento financeiro de sua invenção
para continuar vivendo como um
pesquisador.
Design Orientado as Especificações do W3C e Acessibilidade
7
Acessibilidade na Web
“O poder da Web está em sua
universalidade. Ser acessada por todos,
independe de deficiência, é um aspecto
essencial.”
Tim Berners-Lee
Design Orientado as Especificações do W3C e Acessibilidade
8
Quem acessa a Web?
Design Orientado as Especificações do W3C e Acessibilidade
9
Cristina, surda e cega
 Cristina, surda e cega, conheceu o
marido em uma sala de bate-papo.
Design Orientado as Especificações do W3C e Acessibilidade
10
Lucas, paralisia cerebral
 Lucas, tem paralisia cerebral, é editor
de um boletim on-line.
Design Orientado as Especificações do W3C e Acessibilidade
11
Paulo, tetraplégico
 Paulo, tetraplégico, projeta portais para
Web.
“Quando navego na Web, ou escrevo um
e-mail, não há incapacidade.”
Design Orientado as Especificações do W3C e Acessibilidade
12
Como eles acessam a Web?
Design Orientado as Especificações do W3C e Acessibilidade
13
Tecnologias assistivas
 Recursos e serviços que facilitam a
vida de pessoas portadoras de
necessidades especiais.
Design Orientado as Especificações do W3C e Acessibilidade
14
Tecnologias assistivas
 Existem diferentes tecnologias
assistivas, no contexto da interação
Humano-computador.
Design Orientado as Especificações do W3C e Acessibilidade
15
Tecnologias assistivas
 Linhas braile
permitem ao cego
surdo interagir com
o computador.
Design Orientado as Especificações do W3C e Acessibilidade
16
Tecnologias assistivas
 Teclados braile
para dispositivos
móveis.
Design Orientado as Especificações do W3C e Acessibilidade
17
Tecnologias assistivas
 Rastreador para
interação através do
movimento dos
olhos.
Design Orientado as Especificações do W3C e Acessibilidade
18
Tecnologias assistivas
 Rastreador para
interação através do
movimento da
cabeça.
Design Orientado as Especificações do W3C e Acessibilidade
19
Tecnologias assistivas
 Apontador
para interação por
movimentos da
cabeça.
Design Orientado as Especificações do W3C e Acessibilidade
20
Tecnologias assistivas
 Sistema que
permite controlar o
cursor com a boca.
Design Orientado as Especificações do W3C e Acessibilidade
21
Tecnologias assistivas
 Esferas
para pessoas com
dificuldades
motoras.
Design Orientado as Especificações do W3C e Acessibilidade
22
Tecnologias assistivas
 Leitores de tela com
síntese de voz.
Design Orientado as Especificações do W3C e Acessibilidade
23
Normas de acessibilidade
 O W3C desenvolveu normas para
promover a acessibilidade na Web.
Design Orientado as Especificações do W3C e Acessibilidade
24
Leis de acessibilidade
 Diversos paises, inclusive o Brasil,
possuem leis de acessibilidade
baseadas nas normas do W3C.
Design Orientado as Especificações do W3C e Acessibilidade
25
Testes de acessibilidade
 É necessário avaliar a acessibilidade de
um portal por meio de sistemas de
avaliação.
 Nenhum sistema de avaliação substitui
os testes com usuários.
Design Orientado as Especificações do W3C e Acessibilidade
26
Laboratório
 É recomendado o uso de um laboratório
para realizar testes de acessibilidade e
usabilidade.
Design Orientado as Especificações do W3C e Acessibilidade
27
Planta de um laboratório
TV e monitor
Computador
Câmera
SALA
DE TESTES
SALA
DE OBSERVAÇÂO
Usuário testado
Equipamento
de áudio
Avaliador
Equipamento
de gravação
Design Orientado as Especificações do W3C e Acessibilidade
28
XHTML e CSS
Um novo paradigma!
Design Orientado as Especificações do W3C e Acessibilidade
29
XHTML, a evolução da HTML
Design Orientado as Especificações do W3C e Acessibilidade
30
CSS, a linguagem de design da
Web
Design Orientado as Especificações do W3C e Acessibilidade
31
Conteúdo, Formatação e
Dispositivo
Design Orientado as Especificações do W3C e Acessibilidade
32
Conteúdo, Formatação e
Dispositivo
Design Orientado as Especificações do W3C e Acessibilidade
33
CSS Zen Garden
www.csszengarden.com
Design Orientado as Especificações do W3C e Acessibilidade
34
Design Orientado as Especificações do W3C e Acessibilidade
35
Design Orientado as Especificações do W3C e Acessibilidade
36
Design Orientado as Especificações do W3C e Acessibilidade
37
Design Orientado as Especificações do W3C e Acessibilidade
38
Design Orientado as Especificações do W3C e Acessibilidade
39
Design Orientado as Especificações do W3C e Acessibilidade
40
Design Orientado as Especificações do W3C e Acessibilidade
41
Design Orientado as Especificações do W3C e Acessibilidade
42
Design Orientado as Especificações do W3C e Acessibilidade
43
Procedimentos do design
orientado as especificações do
W3C
Com XHTML e CSS.
Design Orientado as Especificações do W3C e Acessibilidade
44
Identificar as diferentes áreas de
uma página
 Dividir a página em áreas com o
elemento <div> e identificá-las com o
atributo “id”, exemplo:
<div id=“navegacao”>
...
</div>
Design Orientado as Especificações do W3C e Acessibilidade
45
Design Orientado as Especificações do W3C e Acessibilidade
46
Usar marcação descritiva
 Usar a XHTML para descrever o
conteúdo, evitando os elementos e
atributos de formatação.
 O elemento <font>, por exemplo, está
obsoleto.
Design Orientado as Especificações do W3C e Acessibilidade
47
Respeitar a função semântica de
cada elemento
 Escolher os elementos adequados para
descrever o conteúdo.
 O elemento <table>, por exemplo, deve
ser usado apenas para descrever dados
tabulares.
Design Orientado as Especificações do W3C e Acessibilidade
48
Design Orientado as Especificações do W3C e Acessibilidade
49
Validar a página
 A XHTML possui regras, a validação da página
verifica o cumprimento destas regras.
 A página precisa estar válida para ser
formatada com CSS.
Design Orientado as Especificações do W3C e Acessibilidade
50
Conferir o resultado nos
principais dispositivos
Design Orientado as Especificações do W3C e Acessibilidade
51
Estudar
 As normas de acessibilidade do W3C;
 Os conceitos de usabilidade na Web;
 As normas e técnicas para implementar
XHTML com eficiência;
 As normas e técnicas para implementar
CSS com eficiência.
Design Orientado as Especificações do W3C e Acessibilidade
52
Perguntas?
Design Orientado as Especificações do W3C e Acessibilidade
53