1 design orientado as especificações do w3c e acessibilidade alexandre junqueira coordenação de...

53
1 Design Orientado as Especificações do W3C e Acessibilidade Alexandre Junqueira Coordenação de Comunicação Institucional – ENSP/Fiocruz [email protected]

Upload: internet

Post on 18-Apr-2015

103 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: 1 Design Orientado as Especificações do W3C e Acessibilidade Alexandre Junqueira Coordenação de Comunicação Institucional – ENSP/Fiocruz alexandrejunqueira@ensp.fiocruz.br

1

Design Orientado as Especificações do W3C e

Acessibilidade Alexandre Junqueira

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

[email protected]

 

Page 2: 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

Page 3: 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 3

W3C

The World Wide Web Consortium

Page 4: 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 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...

Page 5: 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 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...

Page 6: 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 6

O diretor

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

Page 7: 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 7

O pesquisador

Tim Berners-Lee, abdicou de todo provento financeiro de sua invenção para continuar vivendo como um pesquisador.

Page 8: 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 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

Page 9: 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 9

Quem acessa a Web?

Page 10: 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 10

Cristina, surda e cega

Cristina, surda e cega, conheceu o marido em uma sala de bate-papo.

Page 11: 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 11

Lucas, paralisia cerebral

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

Page 12: 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 12

Paulo, tetraplégico

Paulo, tetraplégico, projeta portais para Web.

“Quando navego na Web, ou escrevo um e-mail, não há incapacidade.”

Page 13: 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 13

Como eles acessam a Web?

Page 14: 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 14

Tecnologias assistivas

Recursos e serviços que facilitam a vida de pessoas portadoras de necessidades especiais.

Page 15: 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 15

Tecnologias assistivas

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

Page 16: 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 16

Tecnologias assistivas

Linhas braile permitem ao cego surdo interagir com o computador.

Page 17: 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 17

Tecnologias assistivas

Teclados braile para dispositivos móveis.

Page 18: 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 18

Tecnologias assistivas

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

Page 19: 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 19

Tecnologias assistivas

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

Page 20: 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 20

Tecnologias assistivas

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

Page 21: 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 21

Tecnologias assistivas

Sistema que permite controlar o cursor com a boca.

Page 22: 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 22

Tecnologias assistivas

Esferaspara pessoas com dificuldades motoras.

Page 23: 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 23

Tecnologias assistivas

Leitores de tela com síntese de voz.

Page 24: 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 24

Normas de acessibilidade

O W3C desenvolveu normas para promover a acessibilidade na Web.

Page 25: 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 25

Leis de acessibilidade

Diversos paises, inclusive o Brasil, possuem leis de acessibilidade baseadas nas normas do W3C.

Page 26: 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 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.

Page 27: 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 27

Laboratório

É recomendado o uso de um laboratório para realizar testes de acessibilidade e usabilidade.

Page 28: 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 28

Planta de um laboratório

SALA

DE OBSERVAÇÂO

TV e monitor Computador

SALA

DE TESTES

Equipamento

de gravação

Equipamento

de áudioAvaliador

Usuário testado

Câmera

Page 29: 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 29

XHTML e CSS

Um novo paradigma!

Page 30: 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 30

XHTML, a evolução da HTML

Page 31: 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 31

CSS, a linguagem de design da Web

Page 32: 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 32

Conteúdo, Formatação e Dispositivo

Page 33: 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 33

Conteúdo, Formatação e Dispositivo

Page 34: 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 34

CSS Zen Garden

www.csszengarden.com

Page 35: 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 35

Page 36: 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 36

Page 37: 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 37

Page 38: 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 38

Page 39: 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 39

Page 40: 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 40

Page 41: 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 41

Page 42: 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 42

Page 43: 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 43

Page 44: 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 44

Procedimentos do design orientado as especificações do

W3C

Com XHTML e CSS.

Page 45: 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 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>

Page 46: 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 46

Page 47: 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 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.

Page 48: 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 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.

Page 49: 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 49

Page 50: 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 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.

Page 51: 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 51

Conferir o resultado nos principais dispositivos

Page 52: 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 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.

Page 53: 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 53

Perguntas?