design orientado as especificações do w3c e acessibilidade
DESCRIPTION
Design Orientado as Especificações do W3C e Acessibilidade. Alexandre Junqueira Coordenação de Comunicação Institucional – ENSP/Fiocruz [email protected]. Tópicos. W3C Acessibilidade na Web As especificações XHTML e CSS. W3C. The World Wide Web Consortium. Os membros. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/1.jpg)
1
Design Orientado as Especificações do W3C e
Acessibilidade Alexandre Junqueira
Coordenação de Comunicação Institucional – ENSP/Fiocruz
![Page 2: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/2.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 2
Tópicos
W3C Acessibilidade na Web As especificações XHTML e CSS
![Page 3: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/3.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 3
W3C
The World Wide Web Consortium
![Page 4: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/4.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/5.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/6.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 6
O diretor
Tim Berners-Lee, inventor da Web e diretor do W3C.
![Page 7: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/7.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/8.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/9.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 9
Quem acessa a Web?
![Page 10: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/10.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/11.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/12.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/13.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 13
Como eles acessam a Web?
![Page 14: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/14.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/15.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/16.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 16
Tecnologias assistivas
Linhas braile permitem ao cego surdo interagir com o computador.
![Page 17: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/17.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 17
Tecnologias assistivas
Teclados braile para dispositivos móveis.
![Page 18: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/18.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 18
Tecnologias assistivas
Rastreador para interação através do movimento dos olhos.
![Page 19: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/19.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/20.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 20
Tecnologias assistivas
Apontadorpara interação por movimentos da cabeça.
![Page 21: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/21.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 21
Tecnologias assistivas
Sistema que permite controlar o cursor com a boca.
![Page 22: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/22.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 22
Tecnologias assistivas
Esferaspara pessoas com dificuldades motoras.
![Page 23: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/23.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 23
Tecnologias assistivas
Leitores de tela com síntese de voz.
![Page 24: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/24.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/25.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/26.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/27.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/28.jpg)
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
![Page 29: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/29.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 29
XHTML e CSS
Um novo paradigma!
![Page 30: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/30.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 30
XHTML, a evolução da HTML
![Page 31: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/31.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 31
CSS, a linguagem de design da Web
![Page 32: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/32.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 32
Conteúdo, Formatação e Dispositivo
![Page 33: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/33.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 33
Conteúdo, Formatação e Dispositivo
![Page 34: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/34.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 34
CSS Zen Garden
www.csszengarden.com
![Page 35: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/35.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 35
![Page 36: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/36.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 36
![Page 37: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/37.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 37
![Page 38: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/38.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 38
![Page 39: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/39.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 39
![Page 40: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/40.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 40
![Page 41: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/41.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 41
![Page 42: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/42.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 42
![Page 43: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/43.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 43
![Page 44: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/44.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/45.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/46.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 46
![Page 47: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/47.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/48.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/49.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 49
![Page 50: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/50.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/51.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 51
Conferir o resultado nos principais dispositivos
![Page 52: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/52.jpg)
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: Design Orientado as Especificações do W3C e Acessibilidade](https://reader035.vdocuments.pub/reader035/viewer/2022062316/56814f51550346895dbcf53d/html5/thumbnails/53.jpg)
Design Orientado as Especificações do W3C e Acessibilidade 53
Perguntas?