1

Design Orientado as Especificações do W3C e

Acessibilidade Alexandre Junqueira

Coordenação de Comunicação Institucional – ENSP/Fiocruz

alexandrejunqueira@ensp.fiocruz.br 

Design Orientado as Especificações do W3C e Acessibilidade 2

Tópicos

W3C Acessibilidade na Web As especificações XHTML e CSS

Design Orientado as Especificações do W3C e Acessibilidade 3

W3C

The World Wide Web Consortium

Design Orientado as Especificações do W3C e Acessibilidade 4

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 5

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 6

O diretor

Tim Berners-Lee, inventor da Web e diretor do W3C.

Design Orientado as Especificações do W3C e Acessibilidade 7

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 8

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 9

Quem acessa a Web?

Design Orientado as Especificações do W3C e Acessibilidade 10

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 11

Lucas, paralisia cerebral

Lucas, tem paralisia cerebral, é editor de um boletim on-line.

Design Orientado as Especificações do W3C e Acessibilidade 12

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 13

Como eles acessam a Web?

Design Orientado as Especificações do W3C e Acessibilidade 14

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 15

Tecnologias assistivas

Existem diferentes tecnologias assistivas, no contexto da interação Humano-computador.

Design Orientado as Especificações do W3C e Acessibilidade 16

Tecnologias assistivas

Linhas braile permitem ao cego surdo interagir com o computador.

Design Orientado as Especificações do W3C e Acessibilidade 17

Tecnologias assistivas

Teclados braile para dispositivos móveis.

Design Orientado as Especificações do W3C e Acessibilidade 18

Tecnologias assistivas

Rastreador para interação através do movimento dos olhos.

Design Orientado as Especificações do W3C e Acessibilidade 19

Tecnologias assistivas

Rastreador para interação através do movimento da cabeça.

Design Orientado as Especificações do W3C e Acessibilidade 20

Tecnologias assistivas

Apontadorpara interação por movimentos da cabeça.

Design Orientado as Especificações do W3C e Acessibilidade 21

Tecnologias assistivas

Sistema que permite controlar o cursor com a boca.

Design Orientado as Especificações do W3C e Acessibilidade 22

Tecnologias assistivas

Esferaspara pessoas com dificuldades motoras.

Design Orientado as Especificações do W3C e Acessibilidade 23

Tecnologias assistivas

Leitores de tela com síntese de voz.

Design Orientado as Especificações do W3C e Acessibilidade 24

Normas de acessibilidade

O W3C desenvolveu normas para promover a acessibilidade na Web.

Design Orientado as Especificações do W3C e Acessibilidade 25

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 26

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 27

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 28

Planta de um laboratório

SALA DE OBSERVAÇÂO

TV e monitor Computador

SALA DE TESTES

Equipamento de gravação

Equipamento de áudio

Avaliador

Usuário testado

Câmera

Design Orientado as Especificações do W3C e Acessibilidade 29

XHTML e CSS

Um novo paradigma!

Design Orientado as Especificações do W3C e Acessibilidade 30

XHTML, a evolução da HTML

Design Orientado as Especificações do W3C e Acessibilidade 31

CSS, a linguagem de design da Web

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

Conteúdo, Formatação e Dispositivo

Design Orientado as Especificações do W3C e Acessibilidade 34

CSS Zen Garden

www.csszengarden.com

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

Design Orientado as Especificações do W3C e Acessibilidade 44

Procedimentos do design orientado as especificações do

W3C

Com XHTML e CSS.

Design Orientado as Especificações do W3C e Acessibilidade 45

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 46

Design Orientado as Especificações do W3C e Acessibilidade 47

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 48

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 49

Design Orientado as Especificações do W3C e Acessibilidade 50

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 51

Conferir o resultado nos principais dispositivos

Design Orientado as Especificações do W3C e Acessibilidade 52

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 53

Perguntas?