Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e...
Transcript of Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e...
![Page 1: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/1.jpg)
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
![Page 2: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/2.jpg)
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
![Page 3: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/3.jpg)
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
![Page 4: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/4.jpg)
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
![Page 5: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/5.jpg)
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.
![Page 6: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/6.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 6
•E usabilidade e acessibilidade na Web?
•Todo mundo pode estar na Internet?
![Page 7: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/7.jpg)
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)
![Page 8: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/8.jpg)
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
![Page 9: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/9.jpg)
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
![Page 10: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/10.jpg)
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
![Page 11: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/11.jpg)
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
![Page 12: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/12.jpg)
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
![Page 13: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/13.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 13
• Pessoas com dificuldades cognitivas
• Pessoas idosas
• Pessoas apressadas
• Pessoas cansadas
• O Google (?)
![Page 14: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/14.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 14
![Page 15: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/15.jpg)
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?
![Page 16: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/16.jpg)
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
![Page 17: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/17.jpg)
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
![Page 18: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/18.jpg)
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.
![Page 19: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/19.jpg)
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
![Page 20: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/20.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 20
• Teclados adaptados
![Page 21: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/21.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 21
• Mouses e outros dispositivos de manipulação
![Page 22: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/22.jpg)
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
![Page 23: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/23.jpg)
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
![Page 24: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/24.jpg)
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
![Page 25: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/25.jpg)
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
![Page 26: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/26.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 26
• Motrix
Fonte:Núcleo de Computação Eletrônicahttp://www.nce.ufrj.br/
![Page 27: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/27.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 27
• Leitores de tela
![Page 28: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/28.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 28
• Leitores de tela
![Page 29: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/29.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 29
• Leitores de tela
![Page 30: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/30.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 30
• Leitores de tela
![Page 31: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/31.jpg)
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
![Page 32: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/32.jpg)
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
![Page 33: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/33.jpg)
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
![Page 34: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/34.jpg)
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
![Page 35: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/35.jpg)
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>
![Page 36: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/36.jpg)
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
![Page 37: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/37.jpg)
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>
![Page 38: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/38.jpg)
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
![Page 39: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/39.jpg)
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>
![Page 40: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/40.jpg)
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“ />
![Page 41: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/41.jpg)
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
![Page 42: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/42.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 42
• Sites Web bem montados devem ter três camadas distintas de dados
![Page 43: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/43.jpg)
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
![Page 44: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/44.jpg)
Lafayette B. Melo – Núcleo de Aprendizagem Virtual – CEFET-PB - 44
![Page 45: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/45.jpg)
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
![Page 46: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/46.jpg)
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/
![Page 47: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/47.jpg)
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
![Page 48: Centro Federal de Educação Tecnológica da Paraíba Núcleo de Aprendizagem Virtual Usabilidade e acessibilidade novas orientações no uso da tecnologia.](https://reader034.fdocumentos.com/reader034/viewer/2022051400/552fc111497959413d8c6663/html5/thumbnails/48.jpg)
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?