Usabilidade e acessibilidade novas orientações no uso da tecnologia Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual

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

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

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 4 TÓPICOS 1 – 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 METODOLOGIA Explicaçõ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 - 4

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 5 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 - 5

E usabilidade e acessibilidade na Web? Todo mundo pode estar na Internet? Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 6

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

2. Quem precisa disso... Juca, sem visão Mandy, sem visão e braços 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.ppt usabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 8

Jeff, dificuldades motoras Bruno, paralisia cerebral 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.ppt usabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 9

Anne, baixa visão e dificuldades motoras 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.ppt usabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 10

Jack e Lara com dispositivos limitados 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.ppt usabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 11

Max, inseguro e com pouca experiência Crianças, linguagem em desenvolvimento 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.ppt usabilidoido.com.br/palestras/usabilidade_acessibilidade/usabilidade_na_acessibilidade.swf Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 12

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

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

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

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

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

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

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

Mouses e outros dispositivos de manipulação Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 21

Dispositivos para partes específicas do corpo Fontes: Fundação Des. Paulo Feitoza http://www.fpf.br Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 22

Dispositivos para partes específicas do corpo Fonte: Fundação Des. Paulo Feitoza http://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 Feitoza http://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 Feitoza http://www.fpf.br Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 25

Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 26 Motrix Fonte: Núcleo de Computação Eletrônica http://www.nce.ufrj.br/ Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 26

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

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

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

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

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

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

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

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

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

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íba Av. 1o. de maio 720 - Jaguaribe - CEP 58015-430 Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 36

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

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

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

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

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

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

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

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 visual 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 sejam 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 - 45

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

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 - 47

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? Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 48