Centro Federal de Educação Tecnológica da ParaíbaCentro Federal de Educação Tecnológica da Paraíba

Núcleo de Aprendizagem VirtualNúcleo de Aprendizagem Virtual

                                                    

Usabilidade e acessibilidadeUsabilidade e acessibilidadenovas orientações no uso da tecnologianovas orientações no uso da tecnologia

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 2

• Para que e por que será realizada esta palestra / seminário / aula / treinamento / mini-curso?

• Tratar questões sobre inclusão social e digital

• Complementar a disciplina de “Análise e Projeto de Sistemas”

• Orientar sobre a nova construção do site do CEFET-PB

• Divulgar e compartilhar os trabalhos realizados no Núcleo de Aprendizagem Virtual (NAV)

• Trazer novas preocupações sobre a relação das pessoas com as máquinas e desmistificar preconceitos

• Iniciar a mudança do perfil do profissional de programação do CEFET-PB

• Começar um trabalho de acessibilidade para o CEFET-PB

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 3

• Para quem será realizada esta palestra / seminário / aula / treinamento / mini-curso?

• Todos que se interessam sobre as questões de inclusão

• Alunos da disciplina de “Análise e Projeto de Sistemas”

• A comissão da nova identidade visual do CEFET-PB

• Aqueles que realizam ou se interessam por pesquisas científico-tecnológicas

• Professores e alunos dos cursos de programação do CEFET-PB

• Para aqueles responsáveis pela administração dos recursos do CEFET-PB necessários à inclusão

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 4

TÓPICOS1 – Conceitos de usabilidade e acessibilidade

2 – Quem precisa disso...

3 – ... e por quais razões não devemos excluir essas pessoas

4 – Tecnologias assistivas ou agentes de usuário

5 – Sites bonitos, usáveis e acessíveis (ou não)

6 – Como fazer sites acessíveis

Uso do HTML

Padrões, W3C e WCAG

Conhecendo usuários

7 – Desafio

METODOLOGIAExplicações sobre os conceitos com imediata exemplificação de sua utilização em softwares e testes de sites e objetos de aprendizagem

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 5

1. Conceitos de usabilidade e acessibilidade

• Acessibilidade• “É garantir que seu trabalho esteja disponível e

acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.”

• Relacionada com acesso, flexibilidade e uso de tecnologias assistivas e agentes de usuário.

• Usabilidade

• “É o quanto um produto ou ambiente é fácil de usar”• Relacionada a facilidade, produtividade e eficiência.

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 6

•E usabilidade e acessibilidade na Web?

•Todo mundo pode estar na Internet?

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 7

• “O poder da Web está em sua universalidade.” (Tim Bernes-Lee)

• “A Web é mais uma criação social do que técnica. Eu não a projetei como um brinquedinho. Precisamos ter certeza que a sociedade que construímos na rede é aquela que almejamos.” (Tim Bernes-Lee)

• “A palavra usabilidade refere-se, também, aos métodos de melhoramento da facilidade de utilização durante o processo de criação... à qualidade da experiência de um utilizador ao interagir com um produto ou um sistema – seja um website, uma aplicação de software, tecnologia móvel, ou qualquer dispositivo operável por um utilizador.” (Jakob Nielsen)

• “O HTML é precisamente o que tentávamos evitar: links que caem o tempo inteiro, links que conduzem apenas numa direção, citações cuja origem não se pode rastrear, nenhum controle sobre as versões de um documento, nenhum controle sobre direitos.” (Ted Nelson) 

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 8

2. Quem precisa disso...

• Juca, sem visão • Mandy, sem visão e braçosFontes:www.slideshare.net/horacio.soares/apresentao-waiu-workshop-ai-acessibildiade-e-usabilidade bioinfo.cpqrr.fiocruz.br/files/courses/WebDesign/apresentacao_fiocruz_06_06_parte2.pptusabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 9

• Jeff, dificuldades motoras • Bruno, paralisia cerebralFontes:www.slideshare.net/horacio.soares/apresentao-waiu-workshop-ai-acessibildiade-e-usabilidade bioinfo.cpqrr.fiocruz.br/files/courses/WebDesign/apresentacao_fiocruz_06_06_parte2.pptusabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 10

• Lucas, baixa visão • Anne, baixa visão e dificuldades motoras

Fontes:www.slideshare.net/horacio.soares/apresentao-waiu-workshop-ai-acessibildiade-e-usabilidade bioinfo.cpqrr.fiocruz.br/files/courses/WebDesign/apresentacao_fiocruz_06_06_parte2.pptusabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 11

• Jack e Lara com dispositivos limitadosFontes:www.slideshare.net/horacio.soares/apresentao-waiu-workshop-ai-acessibildiade-e-usabilidade bioinfo.cpqrr.fiocruz.br/files/courses/WebDesign/apresentacao_fiocruz_06_06_parte2.pptusabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 12

• Max, inseguro e compouca experiência

• Crianças, linguagem emdesenvolvimento

Fontes:www.slideshare.net/horacio.soares/apresentao-waiu-workshop-ai-acessibildiade-e-usabilidade bioinfo.cpqrr.fiocruz.br/files/courses/WebDesign/apresentacao_fiocruz_06_06_parte2.pptusabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 13

• Pessoas com dificuldades cognitivas

• Pessoas idosas

• Pessoas apressadas

• Pessoas cansadas

• O Google (?)

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 14

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 15

• Será que professores, alunos e funcionários do CEFET-PB e mesmo aquelas pessoas que gostariam de conhecer algo a respeito da instituição também precisam?

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 16

3. ... e por quais razões não devemos excluir essas pessoas

• Desperdício de tempo

• Desperdício de recursos humanos

• Desperdício de dinheiro

• Questões éticas

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 17

• Realidade social• 14,5% da população brasileira tem alguma

deficiência (cerca de 25 milhões de pessoas)• Mais de 15 milhões de pessoas com mais de

65 anos• Cerca de 6 milhões de pessoas com mais de

65 anos e com alguma deficiência• ... para um total de 170 milhões de pessoas

Fonte:http://www.ibge.gov.br/home/estatistica/populacao/censo2000/tabelabrasil111.shtm

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 18

• A Lei

Decreto n° 5.296 de 2 de dezembro de 2004

Art. 47.  No prazo de até doze meses a contar da data de

publicação deste Decreto, será obrigatória a

acessibilidade nos portais e sítios eletrônicos da

administração pública na rede mundial de

computadores (internet), para o uso das pessoas

portadoras de deficiência visual, garantindo-lhes o

pleno acesso às informações disponíveis.

§ 1o  Nos portais e sítios de grande porte, desde que

seja demonstrada a inviabilidade técnica de se concluir

os procedimentos para alcançar integralmente a

acessibilidade, o prazo definido no caput será

estendido por igual período.

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 19

4. Tecnologias assistivas ou agentes de usuário

•“Software ou hardware projetado para apoiar pessoas com deficiência em atividades do cotidiano” www.w3.org

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 20

• Teclados adaptados

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 21

• Mouses e outros dispositivos de manipulação

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 22

• Dispositivos para partes específicas do corpo

Fontes:Fundação Des. Paulo Feitozahttp://www.fpf.br

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 23

• Dispositivos para partes específicas do corpo

Fonte:Fundação Des. Paulo Feitozahttp://www.fpf.br

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 24

• Dispositivos para partes específicas do corpo

Fonte:Fundação Des. Paulo Feitozahttp://www.fpf.br

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 25

• Dispositivos para partes específicas do corpo

Fonte:Fundação Des. Paulo Feitozahttp://www.fpf.br

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 26

• Motrix

Fonte:Núcleo de Computação Eletrônicahttp://www.nce.ufrj.br/

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 27

• Leitores de tela

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 28

• Leitores de tela

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 29

• Leitores de tela

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 30

• Leitores de tela

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 31

5. Sites bonitos, usáveis e acessíveis (ou não)

• http://www.ibge.gov.br/home/

• http://www.cefetbg.gov.br/testes/ept

• http://www.cefetbg.gov.br

• http://www.cefetpb.edu.br

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 32

• O que podemos concluir sobre a beleza, usabilidade e acessibilidade dos sites?

• Acessibilidade é fator primordial

• A usabilidade pode ser aplicada na acessibilidade

• Há acessibilidade sem usabilidade, mas não o contrário

• Outras “bilidades” como a comunicabilidade contribuem com a acessibilidade

• Há sites belíssimos sem usabilidade ou acessibilidade

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 33

6. Como fazer sites acessíveis

Uso do HTML

Padrões, W3C e WCAG

Conhecendo usuários

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 34

• Uso do HTML

• Suponha que você quer uma lista no seu site

• Primeiro item • Segundo item • Terceiro item

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 35

• Você acha que o código mais simples é esse

• ou esse?

<div id="menu"><ul>

<li>Primeiro item</li><li>Segundo item</li><li>Terceiro item</li>

</ul></div>

<ul id="menu"><li>Primeiro item</li><li>Segundo item</li><li>Terceiro item</li>

</ul>

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 36

• Suponha que você quer colocar o endereço do CEFET no site da instituição

Centro Federal de Educação Tecnológica da ParaíbaAv. 1o. de maio 720 - Jaguaribe - CEP 58015-430

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 37

• Você acha que o código mais simples é esse

• ou esse?

<p class="address">Centro Federal de Educação Tecnológica da Paraíba<br />Av. 1o. de maio <br />720 - Jaguaribe - CEP 58015-430 <br />

</p

<address>Centro Federal de Educação Tecnológica da Paraíba<br />Av. 1o. de maio <br />720 - Jaguaribe - CEP 58015-430 <br />

</address>

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 38

• Suponha que você quer que apareça na página uma lista de “bilidades”

•Usabilidade •Acessibilidade •Funcionalidade •Jogabilidade

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 39

• Você acha que o código mais simples é esse

• ou esse?

<ul><li class="bilidade">Usabilidade</li><li class="bilidade">Acessibilidade</li><li class="bilidade">Funcionalidade</li><li class="bilidade">Jogabilidade</li>

</ul>

<ul class="bilidade"><li>Usabilidade</li><li>Acessibilidade</li><li>Funcionalidade</li><li>Jogabilidade</li>

</ul>

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 40

• Suponha que você quer apareça na página do CEFET um logo correspondente a uma imagem de nome cefet.gif

• Você acha que um cego que usa um leitor de tela entenderá o que é a imagem com este código

• ou com este?

<img src=“cefet.gif“/>

<img src=“cefet.gif” alt=“logo do cefet“ />

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 41

• O que você viu até agora foram formas de usar a linguagem da Web (X)HTML

• Padrões de páginas como cores e layouts devem ser definidos em arquivos de códigos denominados CSS

• O comportamento deve ser definido também em um arquivo separado

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 42

• Sites Web bem montados devem ter três camadas distintas de dados

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 43

• Padrões, W3C e WCAG

• Padrões devem ser seguidos com bom senso

• Padrões podem ser definidos de muitas formas• Princípios• Diretrizes• Guidelines

• A W3C é um consórcio internacional voltado para a criação de padrões na Web• Publicou quase 100 padrões chamados “W3C

Recommendations”• Acessibilidade é uma de suas diretrizes

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 44

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 45

• WCAG (Web Content Accessibility Guidelines 1.0)• 1. Fornecer alternativas equivalentes ao conteúdo sonoro e v

isual

• 2. Não recorrer apenas à cor • 3. Utilizar corretamente marcações e folhas de estilo • 4. Indicar claramente qual o idioma utilizado • 5. Criar tabelas passíveis de transformação harmoniosa • 6. Assegurar que as páginas dotadas de novas tecnologias se

jam transformadas harmoniosamente

• 7. Assegurar o controle do usuário sobre as alterações temporais do conteúdo

• 8. Assegurar a acessibilidade direta de interfaces do usuário integradas

• 9. Projetar páginas considerando a independência de dispositivos

• 10. Utilizar soluções de transição • 11. Utilizar tecnologias e recomendações do W3C • 12. Fornecer informações de contexto e orientações • 13. Fornecer mecanismos de navegação claros • 14. Assegurar a clareza e a simplicidade dos documentos

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 46

• Há avaliadores automáticos que se baseiam em padrões

• http://www.ocawa.com/pt/Acessibilidade.htm

• http://www.acessibilidade.net/web/

• http://www.sidar.org/hera/index.php.pt

• http://validator.w3.org

• http://www.acesso.umic.pt/

• http://www.dasilva.org.br/

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 47

• Conhecendo usuários• Construir sites centrados nos usuários

• Usar as recomendações, mas não apenas elas

• Usar avaliadores automáticos, mas não apenas eles

• Balancear o design universal com o contextual

• Estudar os diversos métodos e descobrir qual é o mais apropriado para o caso

• 1 – Avaliação das necessidades

• 2 – Testes de utilização

• 3 – Feedback do usuário

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 48

7. Desafio

•Você poderia dar um exemplo de uso no qual ocorresse ao mesmo tempo usabilidade e

acessibilidade?