UNIVERSIDADE	  DE	  SÃO	  PAULO	  –	  ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMANIDADES	           Relatório	  da	  Discip...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                                               ESCOLA	  DE	  ARTES,	  CIÊN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                            ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMANIDA...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                                    ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  ...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                          ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMANIDADE...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                               ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMAN...
UNIVERSIDADE	  DE	  SÃO	  PAULO	                                          ESCOLA	  DE	  ARTES,	  CIÊNCIAS	  E	  HUMANIDADE...
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Acessibilidade no site da each
Upcoming SlideShare
Loading in...5
×

Acessibilidade no site da each

341

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Acessibilidade no site da each"

  1. 1. UNIVERSIDADE  DE  SÃO  PAULO  –  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES   Relatório  da  Disciplina         “Resolução  de  Problemas  II”   Turma  L4  -­‐  Grupo  Acessibilidade  Visual     Jessica  Bazilio,  Lucas  Machado,  Patrícia  Giovedi   Tutor:  Prof.º  Drº.  Clodoaldo  Moraes  Lima   Novembro  de  2010              
  2. 2. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     S U M Á R I O  Lista  de  Figuras  ...............................................................................................................................................  2  Lista  de  Símbolos  e  Abreviaturas  ............................................................................................................  3  Lista  de  Tabelas  e  Anexos  ...........................................................................................................................  4  Resumo  ...............................................................................................................................................................  5  Abstract  ..............................................................................................................................................................  5  Capítulo  1  -­‐  Introdução  ................................................................................................................................  6   Introdução  e  Justificativa   ........................................................................................................................  6   Pergunta  ....................................................................................................................................................  6   Hipótese  .....................................................................................................................................................  7   1.1  Objetivos  ................................................................................................................................................  7   1.2  Material  e  Métodos  ............................................................................................................................  7   1.3  Forma  de  Análise  dos  Resultados  ...............................................................................................  8   1.4  Descrição  dos  Capítulos  ................................................................................................................  10  Capítulo  2  -­‐  Levantamento  de  Dados  ..................................................................................................  11   2.1  Descrição  do  formulário  ...............................................................................................................  11   2.2  Descrição  dos  Dados  ......................................................................................................................  11   Questão  1  -­‐  Qual  o  seu  curso?  .......................................................................................................  11   Questão  2  –  Qual  seu  tipo  de  deficiência  visual?   ...................................................................  12   Questão  3  -­‐  Você  utiliza  a  internet  com  qual  frequência  diariamente?  ......................  12   Questão  4  -­‐  Qual  sua  principal  dificuldade  ao  navegar  pela  internet?  ........................  13   Questão  5  -­‐  Você  considera  o  site  da  EACH  acessível?  .......................................................  13   Questão  6  -­‐  Se  não,  quais  problemas  de  acesso  você  encontrou?  .................................  14   Questão   7   -­‐   O   que   você   gostaria   que   fosse   modificado   no   site   da   EACH   para   facilitar  o  seu  acesso?  .......................................................................................................................  14   Número  de  respostas  diárias  ........................................................................................................  15   2.3  Análise  dos  Resultados  .................................................................................................................  15  Capítulo  3  –  Desenvolvimento  do  site  ................................................................................................  16   3.1  Descrição  do  Site   ..............................................................................................................................  16   3.2  Descrição  do  Funcionamento  .....................................................................................................  19   3.3  Análise  via  leitor  de  tela  ...............................................................................................................  21  Capítulo  4  -­‐  Conclusões  e  Perspectivas  Futuras   .............................................................................  24  Bibliografia  .....................................................................................................................................................  25  Anexos  ..............................................................................................................................................................  25         A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   1  
  3. 3. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES       L I S T A   D E   F I G U R A S  Figura  2.1-­‐  Gráfico  da  questão  1  ...........................................................................................................  11  Figura  2.2-­‐  Gráfico  da  questão  2  ...........................................................................................................  12  Figura  2.3-­‐  Gráfico  da  questão  3  ...........................................................................................................  12  Figura  2.4-­‐  Gráfico  da  questão  4  ...........................................................................................................  13  Figura  2.5-­‐  Gráfico  da  questão  5  ...........................................................................................................  13  Figura  2.6-­‐  Gráfico  da  questão  6  ...........................................................................................................  14  Figura  2.7-­‐  Gráfico  da  questão  7  ...........................................................................................................  14  Figura  2.8-­‐  Gráfico  da  quantidade  de  respostas  ao  questionário  por  período  .................  15  Figura  3.9  -­‐  Captura  de  tela  do  site  da  EACH  original,  do  dia  5/11/2010  ..........................  16  Figura  3.10  -­‐  Site  da  EACH  dividido  em  seções  lógicas  ...............................................................  17  Figura  3.11  –  Captura  de  tela  do  site  da  EACH  depois  de  alterado  ........................................  19  Figura  3.12-­‐  Imagens  como  marcadores  de  listas  .........................................................................  21         A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   2  
  4. 4. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     L I S T A   D E   S Í M B O L O S   E   A B R E V I A T U -­‐ R A S   } ASCII   –   Acrônimo   para   American   Standard   Code   for   Information   Interchange,   que   em   português   significa   "Código   Padrão   Americano   para   o   Intercâmbio   de   Informação.”.   } CSS   –   (Cascading   Style   Sheets),   linguagem   de   estilo   utilizada   para   definir   a   apresentação   de   documentos   escritos   em   uma   linguagem   de   marcação,   como   HTML  ou  XML.  Seu  principal  benefício  é  prover  a  separação  entre  o  formato  e  o   conteúdo  de  um  documento.   } EACH  –  Escola  de  Artes,  Ciências  e  Humanidades.   } E-­‐MAG  –  Modelo  de  Acessibilidade  do  Governo  Eletrônico.   } HTML  –  Acrônimo  para  a  expressão  inglesa  HyperText  Markup  Language,  que   significa   Linguagem   de   Marcação   de   Hipertexto.   É   uma   linguagem   de   marcação   utilizada  para  produzir  páginas  na  Web.   } RP  –  Resolução  de  Problemas.   } USP  –  Universidade  de  São  Paulo.       A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   3  
  5. 5. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     L I S T A   D E   T A B E L A S   E   A N E X O S  Tabela  2.1-­‐  Dados  da  Questão  1  ............................................................................................................  11  Tabela  2.2-­‐  Dados  da  Questão  2  ............................................................................................................  12  Tabela  2.3-­‐  Dados  da  Questão  3  ............................................................................................................  12  Tabela  2.4-­‐  Dados  da  Questão  4  ............................................................................................................  13  Tabela  2.5-­‐  Dados  da  Questão  5  ............................................................................................................  13  Tabela  2.6-­‐  Dados  da  Questão  6  ............................................................................................................  14  Tabela  2.7-­‐  Dados  da  Questão  7  ............................................................................................................  14  Tabela  3.8  -­‐  Problemas  Identificados  no  site  da  EACH  ...............................................................  18    Anexo  1  -­‐  Código  fonte  HTML  original  do  site  da  EACH  em  5/11/2010  .............................  25  Anexo  2  -­‐  Código  Fonte  JavaScript  original  do  site  da  EACH  de  5/11/2010  .....................  29  Anexo  3  -­‐  Código  Fonte  CSS  original  do  site  da  EACH  de  5/11/2010  ..................................  29  Anexo  4  -­‐  Código  Fonte  HTML  alterado  da  página  da  EACH  ....................................................  30  Anexo  5  -­‐  Código  Fonte  JavaScript  alterado  do  site  da  EACH  ..................................................  34  Anexo  6  -­‐  Código  Fonte  CSS  alterado  do  site  da  EACH  ................................................................  35  Anexo  7-­‐  Tabela  de  dados  completa  do  questionário  aplicado  ...............................................  36         A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   4  
  6. 6. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     R E S U M O  São  muitas  as  barreiras  que  os  deficientes  visuais  enfrentam  diariamente,  porém  eles  estão  cada  vez  ganhando  mais  autonomia  para  desempenhar  uma  vida  sem  limitações.  Um  desses  ganhos  são  os  leitores  de  telas  de  computador:  Um  software  que  converte  o  texto   em   voz   sintetizada   e   permite   que   deficientes   visuais   totais   possam   navegar   pelo  ciberespaço  ouvindo  o  conteúdo  da  WEB.  Infelizmente  esse  enorme  avanço  da  tecno-­‐logia   possui   as   suas   limitações.   Para   que   esse   software   possa   funcionar   de   maneira  efetiva,  as  páginas  da  WEB  devem  ser  criadas  seguindo  os  padrões  de  acessibilidade.  Sem   dúvida,   atualmente   a   Internet   desempenha   um   papel   fundamental   no   cotidiano  das   pessoas   com   deficiência,   é   fonte   de   informação,   de   novas   oportunidades   de   traba-­‐lho,  de  diversão  e  facilita  as  atividades  triviais,  como  pagar  contas  pela  internet,  sem  ter  a  necessidade  de  se  deslocar  até  um  banco.  Com   o   nosso   trabalho   da   disciplina   Resolução   de   Problemas   II   pesquisamos   os   pa-­‐drões   de   acessibilidade,   analisamos   se   o   site   da   EACH   possui   os   mesmos,   fizemos   pes-­‐quisas   de   campo   com   deficientes   visuais   e   a   elaboramos   um   protótipo   acessível   da  pagína  inicial  do  site  da  EACH.     A B S T R A C T  There  are  many  barriers  that  visually  impaired  people  face  daily,  but  they  are  increas-­‐ingly  gaining  more  autonomy  to  perform  a  life  without  limitations.  One  of  these  gains  is  the   computer   screen   readers:   Software   that   converts   text   into   synthesized   speech   and  enables  totally  visual  impaired  people  to  navigate  through  cyberspace  hearing  the  con-­‐tents  of  the  WEB.  Unfortunately,  this  huge  advancement  in  technology  has  its  limitations.  For  this  software  to  function  effectively,  the  Web  pages  should  be  created  following  the  standards  of  accessibility.  No   doubt,   today   the   internet   plays   a   key   role   in   the   daily   lives   of   people   with   disabilities,  is  a  source  of  information,  new  job  opportunities,  entertainment  activities  and  facilitates  the  trivial  activities,  such  as  paying  bills  online,  without  having  the  need  to  move  up  to  a  bank.  With  our  work  of  the  discipline  ‘Resolução  de  Problemas  II’,  we  searched  for  the  acces-­‐sibility  standards,  analyzed  if  the  EACH  site  has  them,  did  surveys  with  visually  impaired  people  and  developed  an  accessible  prototype  of  the  EACH  home  page.     A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   5  
  7. 7. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     C A P Í T U L O   1   -­‐   I N T R O D U Ç Ã O   INTRODUÇÃO  E  JUSTIFICATIVA  A  questão  da  acessibilidade  é  definida  como  um  dos  grandes  desafios  da  pesquisa  em  computação   no   Brasil   no   decênio   2006-­‐2016   (SBC,   2006),   e   vem   ganhando   cada   vez  mais  influência  e  importância  no  desenvolvimento  e  manutenção  tanto  de  sistemas  e  espaços  físicos  quanto  virtuais  (sistemas  de  informação).  Acessibilidade  à  WEB  signi-­‐fica  que  pessoas  portadoras  de  algum  tipo  de  deficiência,  (nesse  trabalho  foi  conside-­‐rado   mais   precisamente   apenas   os   deficientes   visuais   totais)   possam   navegar   pelo  ciberespaço   de   forma   efetiva,   isso   quer   dizer   sem   encontrar   barreiras,   ou   seja,   Acessi-­‐bilidade   significa   não   apenas   permitir   que   pessoas   com   deficiências   participem   de  atividades   que   incluem   o   uso   de   produtos,   serviços   e   informação,   mas   a   inclusão   e   ex-­‐tensão  do  uso  destes  por  todas  as  parcelas  presentes  em  uma  determinada  população,  com  restrições  as  mínimas  possíveis  (Easylogics,  2009).  Exemplos  cotidianos  de  ado-­‐ção   dessas   idéias   podem   ser   observados   nos   ônibus   adaptados   com   rampas   ou   piso  baixo,  nos  elevadores  em  edifícios,  piso  táctil  em  calçadas  e  caminhos,  maior  disponi-­‐bilidade  de  informações  em  Braille  e  sonoras.  A   internet   atualmente   desempenha   um   papel   fundamental   na   sociedade,   é   fonte   de  informação,  meio  de  comunicação,  entretenimento  entre  outras  funções.    A  WEB  aces-­‐sível  significa  democratizar  essa  ferramenta  cada  vez  mais  usada  na  atualidade.    Segundo  dados  do  censo  do  IBGE  do  ano  de  2000,  entre  16,5  milhões  de  pessoas  com  deficiência   visual,   existiam   cerca   de   160   mil   pessoas   incapazes   de   enxergar  (Comunicação  Social  -­‐  IBGE,  2002).    Visando  abranger  esse  relevante  e  atual  tema,  nosso  grupo  da  disciplina  Resolução  de  Problemas  II  escolheu  por  estudar  os  padrões  e  aspectos  técnicos  relacionados  à  cons-­‐trução   de   sites   acessíveis   aos   deficientes   visuais,   analisando   a   webpage   do   instituto  Escola  de  Artes,  Ciências  e  Humanidades  da  Universidade  de  São  Paulo  quanto  ao  aten-­‐dimento  desses  critérios.  Indo   ainda   mais   além   nessa   inspiração,   analisamos   prioritariamente   quais   são   os   pro-­‐blemas  de  acesso  para  deficientes  visuais  no  mesmo  site  e  como  os  mesmos  poderiam  ser  solucionados,  pesquisamos  diretamente  com  os  usuários  quais  suas  principais  di-­‐ficuldades  e  quais  melhorias  poderiam  ser  implementadas  a  fim  de  tornar  a  navegação  mais  fácil,  e  por  fim,  elaboramos  e  propomos  um  protótipo  completamente  acessível  da   página   inicial   do   site   da   EACH   utilizando   uma   versão   salva   de   5   de   novembro   de  2010.   PERGUNTA  “O  site  da  EACH  é  acessível  a  deficientes  visuais?”.  Ou  seja,  partindo  da  premissa  de  que  se  dispõe  de  um  computador,  acesso  à  internet  e  os  recursos  de  utilização  neces-­‐sários   adaptados   ao   usuário,   o   site   da   EACH   pode   ser   completamente   acessado   e   utili-­‐zado   por   um   deficiente   visual   (incapaz   de   enxergar,   daltônico   e/ou   pessoas   com   visão  reduzida?).       A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   6  
  8. 8. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     HIPÓTESE  “O  site  da  EACH  não  foi  desenvolvido  de  acordo  com  os  padrões  que  permitem  a  sua  acessibilidade   às   pessoas   com   deficiência   visual.”   Isto   é,   pessoas   que   apresentam   defi-­‐ciências   visuais   podem   não   conseguir   acessar   todos   os   conteúdos   e/ou   informações  contidas  nas  páginas  do  site.     1.1  OBJETIVOS  O  objetivo  principal  deste  trabalho  é  verificar  se  o  site  da  EACH  é  acessível  a  defici-­‐entes   visuais   (cegos,   daltônicos   e   pessoas   com   visão   reduzida).   Para   alcançar   este  objetivo  central  e  um  aprendizado  das  técnicas  utilizadas  na  web  para  deficientes  vi-­‐suais,  os  seguintes  sub-­‐objetivos  serão  necessários:   1. Estudar   os   padrões   (linguagens   e   ferramentas)   e   aspectos   técnicos   relaciona-­‐ dos  à  construção  de  sites  acessíveis  aos  deficientes  visuais.   2. Analisar  quais  são  os  problemas  para  deficientes  visuais  no  site  da  EACH.   3. Pesquisar  quais  recursos  os  deficientes  visuais  gostariam  que  houvesse  no  site,   baseado  em  suas  dificuldades.   4. Elaboração  de  um  protótipo  de  um  site  acessível  a  deficientes  visuais.   1.2  MATERIAL  E  MÉTODOS  Ao  longo  do  trabalho  foram  definidos  passos  fundamentais  que  nortearam  nossos  es-­‐forços  para  atingir  nossos  objetivos.     1. Análise  bibliográfica.   2. Comparação  do  site  da  EACH  com  os  padrões  de  acessibilidade.     3. Pesquisa  de  campo  com  questionário.   4. Análise  do  questionário.   5. Criação  de  protótipo  de  site  acessível.   A   análise   bibliográfica   abrangeu   pesquisas   em   fontes   oficiais   na   Internet,   como   sites  de  governo,  boas  práticas  e  padrões  internacionais.     A  comparação  do  site  da  EACH  com  os  padrões  de  acessibilidade  foi  realizada   por   meio   de   ferramentas   online   disponíveis   para   este   fim.   Foi   realizada   uma   análise   no   site   dasilva   (http://www.dasilva.org.br/),   além   de   check-­‐lists   dispo-­‐ níveis   no   site   do   governo   federal   sobre   acessibilidade   (http://www.governoeletronico.gov.br/acoes-­‐e-­‐projetos/e-­‐MAG  ).   Para  a  realização  da  pesquisa  de  campo  com  questionário,  inicialmente  procu-­‐ ramos  dados  sobre  se  há  deficientes  visuais  no  universo  ‘Escola  de  Artes,  Ciên-­‐ cias   e   Humanidades’.   O   questionário   aplicado   obteve   dados   sobre   os   hábitos   de   utilização  de  tecnologia  (computadores)  por  deficientes,  bem  como  quais  seri-­‐ am   as   principais   melhorias   sugeridas   aos   sistemas   de   acessibilidade   e   se   os   mesmos  atendem  às  suas  necessidades  de  utilização.   A  Análise  do  questionário  envolveu  o  levantamento  dos  dados  mais  importan-­‐ tes   obtidos,   e   a   conclusão   de   hipóteses   levantadas   sobre   a   eficácia,   a   importân-­‐ cia,  e  o  nível  de  desenvolvimento  da  acessibilidade  em  sites  da  Internet.     Depois  de  elaboradas,  discutidas  e  compreendidas  as  questões  teóricas  e  técni-­‐ cas  pelo  grupo,  salvamos  as  páginas  do  sítio  http://each.uspnet.usp.br/each/,  e   com  base  nas  mesmas,  realizamos  a  adaptação  em  todos  os  critérios  necessá-­‐ A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   7  
  9. 9. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     rios   para   que   a   página   fique   em   cumprimento   com   todos   os   requisitos   de   aces-­‐ sibilidades   definidos   pelos   check-­‐lists   e   análises   online   de   páginas   (ferramenta   dasilva).   A   versão   final   do   protótipo   acessível   foi   publicada   no   endereço   http://siteeach.110mb.com.   A  adaptação  de  sites  envolve  a  alteração  do  código  HTML  por  meio  da  inserção   ou   alteração   de   atributos   e   tags,   além   de   fatores   como   posicionamento   dos   elementos,  e  recursos  especiais  como  teclas  de  atalho  (Acessibilidade  Brasil).   Para   esse   trabalho   de   edição   de   código   primariamente   optamos   pelo   programa   Microsoft  FrontPage,  que  possui  uma  interface  relativamente  simples  de  utili-­‐ zar   e   nos   foi   disponibilizado   gratuitamente   através   de   parcerias   acadêmicas   da   Universidade   de   São   Paulo   com   a   Microsoft.   Podemos   citar   outros   programas   interessantes  e  com  igual  finalidade   e   desempenho   –   porém   que   possam   exigir   uma  curva  de  aprendizagem  maior  sem  que  o  mesmo  impacte  na  função  básica   da  edição  de  código  –  para  esse  trabalho,  como  o  Adobe  Dreamweaver  e  o  Mi-­‐ crosoft  Expression  Web,  e  até  mesmo  editores  de  texto  básicos,  como  o  Note-­‐ pad++,  e  o  EditPad,  que  também  poderiam  ser  utilizados.   Para  testes  de  acessibilidade,  além  da  revisão  pelos  já  citado  avaliador  online,   será  realizada  um  teste  manual,  com  um  programa  leitor  de  tela  acessando  os   sites.   O   programa   MicroPower   Virtual   Vision   responde   por   mais   de   75%   do   mercado  brasileiro  (SANTAROSA  &  SONZA,  2003)  e,  portanto,  o  teste  deverá  ser   feito   pelo   mesmo.   Como   o   navegador   de   internet   também   influencia   no   pro-­‐ grama  leitor  de  tela  e  na  própria  interpretação  e  formatação  da  página,  para  os   testes   foi   padronizado   o   uso   no   browser   Mozilla   Firefox,   que   é   portável   para   qualquer   sistema   operacional   e   quase   todos   os   tipos   de   dispositivo,   além   de   conseguir   renderizar   mais   elementos   que   o   Internet   Explorer,   utilizado   por   cerca  de  60%  dos  usuários  da  Internet  (NET  APPLICATIONS,  2010).  Pela  com-­‐ patibilidade  do  programa  leitor  de  tela,  utilizamos  como  ambiente  de  sistema   operacional  o  Microsoft  Windows.   1.3  FORMA  DE  ANÁLISE  DOS  RESULTADOS  Existem  critérios  que  podem  ser  utilizados  para  classificar  o  nível  de  acessibilidade  de  sites   da   web.   Esses   critérios   se   dividem   em   diretrizes   de   níveis   de   prioridades   depen-­‐dendo  do  impacto  que  podem  causar  na  navegação  do  usuário.  Essas  diretrizes  estão  bem   definidas   em   um   documento   elaborado   pelo   Ministério   do   Planejamento  (Ministério  do  Planejamento,  Orçamento  e  Gestão),  Orçamento  e  Gestão  do   Brasil,   pa-­‐ra  o  Modelo  de  Acessibilidade  do  Governo  Eletrônico  (e-­‐MAG).  A   diretriz   de   nível   de   prioridade   um   compreende   as   alterações   mais   importantes   e  fundamentais   para   que   uma   página   possa   ser   considerada   acessível.   Nesse   nível,   a  recomendação  é:   • Incluir  atributos  nas  tags  HTML,  como  alt  (texto  alternativo)  em  imagens  e  title   em  botões,  formulários,  campos  e  links;   • Criar  atalhos  de  teclado  que  apontem  para  links  importantes  da  página/site;   • Descrever   imagens,   e   elementos   visuais   e   de   realce   como   cores,   negrito,   itálico,   títulos,  etc.;   • Identificar  mudanças  no  idioma  de  um  texto  por  meio  do  atributo  lang;   • Assegurar  que  a  página  possa  ser  lida  sem  o  uso  de  folhas  de  estilo  (CSS);   A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   8  
  10. 10. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     • Evitar  páginas  com  atualização  de  conteúdos  dinâmicos  ou  com  intermitência   na  tela;   • Utilizar  a  linguagem  mais  clara  e  simples  possível;   • Agrupar  imagens  com  links  num  bloco  quando  relacionados;   • Identificar   os   cabeçalhos   de   linhas   e   colunas   em   cada   célula   de   uma   tabela,   mesmo  com  vários  níveis  lógicos  (nesse  caso,  identificar  todos  os  cabeçalhos);   • Assegurar  que  a  página  possa  ser  utilizada  mesmo  com  controles  desativados   como  Javascript  ou  applets.  No   nível   de   prioridade   dois,   são   identificadas   e   recomendadas   correções   de   menor  impacto   que   no   nível   um,   mas   ainda   assim   importantes   para   maior   abrangência   do  grupo  que  será  beneficiado  pela  acessibilidade.  Estão  definidos:   • Assegurar  que  o  texto  possui  bom  contraste  com  a  cor/plano  de  fundo;   • Utilizar  Doctypes;   • utilizar  unidades  relativas,  e  não  absolutas,  na  construção  visual  da  página;   • Utilizar  elementos  de  cabeçalho  de  estrutura  de  texto  de  acordo  com  as  especi-­‐ ficações;   • Marcar  citações,  se  presentes  no  texto;   • Marcar  corretamente  listas  e  pontos  de  enumeração;   • Não  criar  páginas  que  se  atualizem  ou  redirecionem-­‐se  automaticamente;   • Não   criar   janelas   de   sobreposição,   nem   modificar   o   conteúdo   da   página   sem   que  o  usuário  seja  informado  disso;   • Dividir  grandes  blocos  de  informação  em  blocos  lógicos;   • Identificar  claramente  o  destino  de  cada  hyperlink;   • Fornecer  metadados  para  acrescentar  informações  semânticas  às  páginas;   • Dar  informações  sobre  a  organização  do  site  por  meio  de  um  mapa  ou  sumário;   • Evitar  uso  de  tabelas  (exceto  para  dados  tabulares);   • Assegurar  a  existência  de  rótulos  em  controles  de  formulários;   • Criar  programas  e  applets  diretamente  acessíveis  pelas  tecnologias  de  acessibi-­‐ lidade.  Por  último,  temos  o  nível  de  prioridade  três,  que  tem  por  diretrizes:   • Especificar  o  significado  de  siglas  e  abreviaturas  nos  documentos,  bem  como  o   idioma  utilizado  no  texto;   • Criar  uma  sequência  lógica  de  tabulação  para  acessar  os  itens  do  site  (atributo   tabindex);   • Inserir  espaços  entre  links  adjacentes;   • Fornecer  diversos  tipos  de  formatos  de  documentos  (pdf,  doc,  etc);   • Não  utilizar  arte  ASCII.  Com  base  nessas  diretrizes,  podemos  analisar  e  classificar  um  site  de  acordo  com  seu  nível  de  atendimento  às  recomendações  de  acessibilidade.  Para  a  elaboração  de  nosso  protótipo  de  site  acessível  a  partir  do  site  da  EACH,  tere-­‐mos  como  mote  o  atendimento  ao  nível  um  das  prioridades  e  observações,  tornando  assim   nossa   produção   com   elementos   acessíveis   e   padronizada   para   grende   parte   dos  deficientes,  sem  prejudicar  a  estética  e  conteúdo  da  página.     A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   9  
  11. 11. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     1.4  DESCRIÇÃO  DOS  CAPÍTULOS  Esta  dissertação  foi  estruturada  em  quatro  capítulos:   CAPÍTULO  1:  Apresenta  uma  breve  explanação  sobre  a  questão  da  acessibilidade  à  WEB,  a  impor-­‐tância  da  internet  na  sociedade  moderna,  os  objetivos  que  pretendemos  alcançar  se-­‐gundo  a  pergunta  “O  site  da  EACH  é  acessível  a  deficientes  visuais?”  e  os  materiais  e  métodos  que  nos  guiarão.   CAPÍTULO  2:  Descrição  do  questionário  aplicado  aos  alunos  da  EACH  e  análise  das  respostas  obti-­‐das.   CAPÍTULO  3:  Análise   do   funcionamento   do   site   original   e   seus   problemas,   e   análise   do   protótipo   da  página  inicial  da  EACH.   CAPÍTULO  4:  Apresenta  a  conclusão  e  perspectivas  fiuturas.         A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   10  
  12. 12. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     C A P Í T U L O   2   -­‐   L E V A N T A M E N T O   D E   D A D O S   2.1  DESCRIÇÃO  DO  FORMULÁRIO  O  questionário  era  composto  por  sete  perguntas  que  visavam  basicamente  conhecer  o  tipo   de   deficiência,   entre   as   opções   de   resposta   estavam:   visão   totalmente/   parcial-­‐mente  reduzida  ou  daltonismo,  pois  esses  são  tipos  de  deficiência  visual  relevantes  no  nosso  trabalho,  já  que  o  indivíduo  que  possui  algum  desses  tipos  de  deficiência  encon-­‐tra  barreiras  na  hora  de  acessar  um  site  que  não  foi  desenvolvido  seguindo  os  padrões  de  acessibilidade.  As  principais  dificuldades  encontradas  ao  acessar  o  site  da  EACH,  se  o   site   é   incompreensível   a   leitores   de   telas,   há   problemas   com   o   tamanho   do   tex-­‐to/com   o   contraste   de   fundo   e   o   texto   ou   há   uma   grande   quantidade   de   links   e   menus  até  o  conteúdo.  E  o  que  poderia  ser  modificado  no  site  para  facilitar  o  seu  acesso,  onde  haviam  três  opções  de  resposta  :  tamanho  da  fonte,  compatibilidade  com  leitores  de  tela,  quantidade  de  links/  menus  até  o  conteúdo  principal,  e  um  espaço  para  que  fos-­‐sem   escritas   sugestões.     O   questionário   foi   enviado   por   e-­‐mail   através   do   link  https://spreadsheets.google.com/viewform?formkey=dGdNZWloU1hya0NSMFQxMHBFQjZzV0E6MQ  ,  que  foi  aplicado  entre  os  dias  28/10/2010  e  01/11/2010  para  todos  os  alunos  da  Escola  de  Artes  Ciências  e  Humanidades.   2.2  DESCRIÇÃO  DOS  DADOS   QUESTÃO  1  -­‐  QUAL  O  SEU  CURSO?   Questão  1   TABELA  2.1-­‐  DADOS  DA  QUESTÃO  1   Sistemas  de  Informação     2   7%   SI   2   Marketing     2   7%   MKT   2   Licenciatura   em   Ciências     7   23%   LCN   7   da  Natureza   GA   4   Gestão  Ambiental     4   13%   TM   0   Têxtil  e  Moda     0   0%   Gestão  de  Políticas  Públicas     5   17%   GPP   5   Lazer  e  Turismo     4   13%   LZT   4   Ciências  da  Atividade  Física     2   7%   CAF   2   Gerontologia     1   3%   GER   1   Obstetrícia     2   7%   OBS   2   Nenhuma   das   Anteriores/     1   3%   N/A   1   Não  estudo  na  EACH   0   2   4   6   8      FIGURA  2.1-­‐  GRÁFICO  DA  QUESTÃO  1  A   Figura   2.1   apresenta   a   quantidade   de   pessoas   por   curso   que   respondeu   o  questionário.   O   resultado   obtido   foi:   Sistemas   de   Informação   (2),   Marketing   (2),  Licenciatura   em   Ciências   da   Natureza   (7),   Gestão   Ambiental   (4),   Têxtil   e   Moda   (0),   A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   11  
  13. 13. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES    Gestão  de  Políticas  Públicas  (5),  Lazer  e  Turismo  (4),  Ciências  da  Atividade  Física  (2),  Gerontologia  (1),  Obstetrícia  (2)  e  Nenhuma  das  anteriores/não  estudo  na  EACH  (1).   QUESTÃO  2  –  QUAL  SEU  TIPO  DE  DEFICIÊNCIA  VISUAL?   Questão  2   TABELA  2.2-­‐  DADOS  DA  QUESTÃO  2   Visão   totalmente   1   3%   reduzida   1   6   Visão   parcialmente   23   77%   Totalmente   reduzida   reduzida   (que   apresente   dificul-­‐ Parcialmente   dades   relevantes   Reduzida   para   o   acesso   a   web)   Daltonismo   Daltonismo   6   20%   23        FIGURA  2.2-­‐  GRÁFICO  DA  QUESTÃO  2  Na  Figura  2.2,  o  gráfico  representa  a  quantidade  de  pessoas  por  deficiência.  Apenas  1  pessoa   possui   visão   reduzida,   enquanto   23   apresentam   dificuldades   relevantes   para  acessar  a  WEB  e  6  possuem  daltonismo.   QUESTÃO  3  -­‐  VOCÊ  UTILIZA  A  INTERNET  COM  QUAL  FREQUÊNCIA  DIARIAMENTE?   Questão  3   TABELA  2.3-­‐  DADOS  DA  QUESTÃO  3   N/A   1   N/A   1   3%   até  meia  hora   1   3%   até  30min   1   até  uma  hora   5   17%   até  1h   5   até  duas  horas   6   20%   até  2h   6   três   horas   ou   17   57%   mais   até  3h  ou  mais   17     0   5   10   15   20    FIGURA  2.3-­‐  GRÁFICO  DA  QUESTÃO  3  Na  Figura  2.3,  é  apresentada  a  frequência  de  utilização  da  internet,  que  está  dividida  em   não   acesso(1),   acesso:   até   meia   hora(0),   até   uma   hora(5),   até   duas   horas   (6),   ou  até  três  horas(17).       A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   12  
  14. 14. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     QUESTÃO  4  -­‐  QUAL  SUA  PRINCIPAL  DIFICULDADE  AO  NAVEGAR  PELA  INTERNET?   Questão  4   TABELA  2.4-­‐  DADOS  DA  QUESTÃO  4   Não  possuo  dificuldades   13   Não   possuo   dificul-­‐ 13   43%   dades   Tamanho  do  texto   6   Tamanho  do  texto   6   20%   Contraste  entre  texto   2   7%   Contraste   2   e  fundo   Site  incompreensível  por   Site   incompreensível   3   10%   3   por  leitor  de  tela   leitor  de  tela   Grande   quantidade   2   7%   QuanOdade  de  links   2   de  links/menus  até  o   conteúdo   Outros   4   Outros   4   13%     0   5   10   15    FIGURA  2.4-­‐  GRÁFICO  DA  QUESTÃO  4  Na   Figura   2.4,   são   apresentadas   as   principais   dificuldades   encontradas   ao   navegar  pela   internet   e   os   resultados   obtidos:   12   pessoas   não   possuem   dificuldades,   6  consideram   o   tamanho   do   texto   um   problema,   2   responderam   que   há   um   desajuste  com   o   contraste   entre   o   texto   e   o   fundo,   3   afirmam   que   o   site   é   imcompreensível   a  leitores  de  tela,  2  assinalaram  que  há  uma  grande  quantidade  de  links/  menus  até  o  contéudo,  e  4  alegaram  possuir  outros  problemas.   QUESTÃO  5  -­‐  VOCÊ  CONSIDERA  O  SITE  DA  EACH  ACESSÍVEL?   Questão  5   TABELA  2.5-­‐  DADOS  DA  QUESTÃO  5   Não   14   Sim   16   53%   Não   14   47%   Sim   16     0   5   10   15   20    FIGURA  2.5-­‐  GRÁFICO  DA  QUESTÃO  5  Na  figura  2.5,  é  retratado  que  16  pessoas  consideraram  o  site  da  EACH  acessível,  enquanto  14  não  o  consideraram  acessível.       A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   13  
  15. 15. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     QUESTÃO  6  -­‐  SE  NÃO,  QUAIS  PROBLEMAS  DE  ACESSO  VOCÊ  ENCONTROU?   TABELA  2.6-­‐  DADOS  DA  QUESTÃO  6   Questão  6   Contraste   entre   fun-­‐   2   15%   do  e  cores   Contraste   2   Tamanho  do  texto     6   46%   Site   é   parcialmente     2   15%   Tamanho  do  Texto   6   ilegível  por  leitor  de   tela   Parcialmente  ilegível  por   2   Site   é   totalmente     1   8%   leitor  de  tela   ilegível  por  leitor  de   Totalmente  ilegível  por   1   tela   leitor  de  tela   Grande   quantidade     7   54%   QuanOdade  de  links   7   de   links/menus   até   o  conteúdo  principal   Outros   2   Outros     2   15%   As   pessoas   podem   marcar   mais   de   uma   0   2   4   6   8   caixa   de   seleção,   então   a   soma   das   percen-­‐  tagens  pode  ultrapassar  100%.  FIGURA  2.6-­‐  GRÁFICO  DA  QUESTÃO  6  Na   Figura   2.6,   são     apresentados   os   problemas   que   o   site   da   EACH   possui   e   os  resultados  apresentados:  contraste    entre  fundo  e  cores  (2),  tamanho  do  texto  (6),  site  parcialmente   ilegível   por   leitor   de   tela   (2),   site   totalmente   ilegível   por   leitor   de   tela  (1),  grande  quantidade  de  links/menus  até  o  conteúdo  principal  (7),  e  outro  (2).   QUESTÃO  7  -­‐  O  QUE  VOCÊ  GOSTARIA  QUE  FOSSE  MODIFICADO  NO  SITE  DA  EACH   PARA  FACILITAR  O  SEU  ACESSO?   Questão  7   TABELA  2.7-­‐  DADOS  DA  QUESTÃO  7   Tamanho  da  fon-­‐   11   55%   te  (textos)   Tamanho  do  texto   11   Compatibilidade     7   35%   com   leitores   de   CompaObilidade  com   tela   7   leitores  de  tela   Quantidade   de     9   45%   links/menus   até   QuanOdade  de  links   9   o   conteúdo   prin-­‐ cipal   Outros   7   Outros     7   35%   As  pessoas  podem  marcar  mais  de  uma   caixa   de   seleção,   então   a   soma   das   0   2   4   6   8   10   12   percentagens  pode  ultrapassar  100%.    FIGURA  2.7-­‐  GRÁFICO  DA  QUESTÃO  7  Na  figura  2.7,  é  apresentado  o  que  as  pessoas  gostariam  que  fosse  modificado  no  site  da  EACH,  essa  pergunta  admitia  mais  de  uma  resposta.  Entre  elas  estavam:  tamanho  da  fonte  (10),  compatibilidade  com  leitores  de  tela  (6),  quantidade  de  links/menus  até  o  conteúdo  principal  (8)  e  outros  (6).   A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   14  
  16. 16. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     NÚMERO  DE  RESPOSTAS  DIÁRIAS    FIGURA  2.8-­‐  GRÁFICO  DA  QUANTIDADE  DE  RESPOSTAS  AO  QUESTIONÁRIO  POR  PERÍODO    Na  Figura  2.8,  é  apresentada  a  quantidade  diária  de  respostas.     2.3  ANÁLISE  DOS  RESULTADOS  Observamos   que   algumas   respostas   do   questionário   aplicado   aos   alunos   da   EACH  apresentaram  inconsistências,  como  é  o  caso  de  uma  pessoa  que  respondeu  que  pos-­‐sui   visão   totalmente   reduzida,   e   que   alguns   dos   problemas   do   site   da   EACH   são   o   con-­‐traste  entre  fundo  e  cores  e  o  tamanho  da  fonte  em  textos,  assim  conjeturamos  que  a  pessoa  não  prestou  atenção  na  palavra  “totalmente”.      Outra  incoerência  está  na  questão  5,  onde  52%  das  pessoas  que  a  responderam  consi-­‐deram  o  site  acessível.  Esse  número  pode  ser  justificado,  pois  22  das  30  pessoas  que  responderam  o  questionário  possuem  visão  parcialmente  reduzida,  o  que  implica  di-­‐zer  que  talvez  elas  não  utilizem  e  não  saibam  como  funciona  um  leitor  de  tela  e  que  consideram  como  acessível  um  lugar  ou  site  que  se  pode  alcançar,  pelo  simples  fato  de  conseguir  entrar  no  site,  já  o  considera  acessível.  Um  dos  maiores  problemas  encontrados  pelos  alunos  que  responderam  o  questioná-­‐rio  é  o  tamanho  da  fonte.  Portanto  o  tamanho  dos  textos  apresentou  maior  porcenta-­‐gem  de  respostas  na  questão  7  “O  que  você  gostaria  que  fosse  modificado  no  site  da  EACH  para  facilitar  o  seu  acesso?”     A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   15  
  17. 17. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES     C A P Í T U L O   3   –   D E S E N V O L V I M E N T O   D O   S I T E   3.1  DESCRIÇÃO  DO  SITE  O   site   da   EACH   pode   ser   acessado   através   do   link   ‘http://each.uspnet.usp.br’.   É   o   por-­‐tal   de   acesso   às   notícias,   serviços,   informações   e   contatos   da   Escola   de   Artes,   Ciências  e   Humanidades   (EACH)   da   Universidade   de   São   Paulo   (USP).   A   Figura   3.9   mostra   uma  captura   de   tela   do   site   da   EACH   que   foi   salvo   no   dia   5   de   novembro   de   2010   e   utiliza-­‐mos  como  base  para  elaborar  nosso  protótipo  de  site  acessível.      FIGURA  3.9  -­‐  CAPTURA  DE  TELA  DO  SITE  DA  EACH  ORIGINAL,  DO  DIA  5/11/2010   A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   16  
  18. 18. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES      O  site  da  EACH  pode  ser  dividido  em  algumas  seções  lógicas  para  melhor  compreen-­‐são  e  análise  de  sua  estrutura  (ver  Figura  3.10):     • Cabeçalho:   Parte   no   início   da   página,   que   contém   imagens   com   links   para   o   si-­‐ te  da  USP  e  da  EACH,  além  do  título  do  site.   • Menu:  Sistema  de  navegação  pelo  site  dividido  em  seções  específicas  e  bem  de-­‐ finidas.  Também  inclui  após  os  links  uma  imagem  do  campus  da  EACH  e  uma   caixa  de  texto  para  efetuar  pesquisas  no  site  por  um  mecanismo  do  Google.   • Corpo:  Contém  o  conteúdo  principal  do  site,  isto  é,  notícias,  informações,  tex-­‐ tos  e  links.     • Rodapé:   Faixa   decorativa   que   contém   somente   o   endereço   do   campus   da   EACH.       FIGURA  3.10  -­‐  SITE  DA  EACH  DIVIDIDO  EM  SEÇÕES  LÓGICAS  Dentro  dessa  divisão,  ao  analisar  comparativamente  o  site  com  os  padrões  de  acessibi-­‐lidade   (ver   1.3   Forma   de   Análise   dos   Resultados),   enumeramos   os   problemas   e   difi-­‐culdades  possíveis  de  ser  encontrados  por  um  deficiente  visual  no  site  da  EACH  e  sua  descrição  segue  na  Tabela  3.8.         A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   17  
  19. 19. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES        TABELA  3.8  -­‐  PROBLEMAS  IDENTIFICADOS  NO  SITE  DA  EACH  Cabeçalho   As   imagens   de   logotipo   da   USP   e   da   EACH   não   são   lidas   corretamente   pelo  leitor  de  tela,  pois  faltam  atributos  ‘alt’  e  ‘title’  em  suas  tags  HTML.  Menu   O  menu  de  links  foi  construído  de  forma  a  ser  navegável  apenas  por  um   dispositivo   apontador   na   tela   (com   propriedades   definidas   em   JavaS-­‐ cript   e   CSS   ‘onmouseover’   e   ‘hover’),   inviabilizando   determinantemente   o  acesso  pelo  teclado  aos  submenus.   A   caixa   de   pesquisa   do   Google   e   sua   imagem   correspondente   não   pos-­‐ suem  o  atributo  ‘title’,  fazendo  com  que  sejam  incompreensíveis  na  na-­‐ vegação  por  leitor  de  tela.  Corpo   •As  imagens  presentes  na  seção  ‘destaques’  não  são  lidas  corretamente   pelo  leitor  de  tela,  pois  faltam  atributo  ‘alt’  e  ‘title’  em  suas  tags  HTML.   •Para   evitar   repetição   de   links,   deve   haver   apenas   uma   tag   HTML   de   link  (‘<a>’)  que  compreende  a  imagem  e  o  texto  descritivo  juntos,  ao   invés  de  dois  links  separados.   •Foram   utilizadas   imagens   como   marcadores   de   listas   no   corpo.   Isso   não   é   recomendado   pois   o   leitor   de   tela   pode   tratar   essas   imagens   como  objetos  em  separado  e  tentar  ler  as  mesmas,  tornando  a  navega-­‐ ção  mais  confusa  e  extensa.   •Existem  partes  textuais  com  a  tag  ‘<blink>’,  que  faz  o  texto  literalmen-­‐ te   piscar   na   tela   (Isso   foi   utilizado   para   destacar   as   palavras   “novo”   junto   a   links   novos).   O   uso   dessa   tag   não   é   recomendado   e   pode   gerar   problemas  na  leitura  por  um  leitor  de  tela.   •É   recomendado   inserir   o   atributo   ‘title’   em   todos   os   links   presentes,   com  uma  descrição  que  seja  adequada  para  a  navegação  ‘somente  tex-­‐ to’  (leitor  de  tela).  Rodapé   O  rodapé  está  de  acordo  com  os  padrões  de  acessibilidade.    A  ordem  de  leitura  do  site  por  um  navegador  de  texto  ou  por  um  leitor  de  tela  (ver  3.2  Descrição   do   Funcionamento)   segue   a   ordem   ‘cabeçalho   –   menu   –   corpo   –   rodapé’,  logo,   outro   problema   identificado   é   a   existência   de   uma   grande   quantidade   de   links  que  tem  de  ser  percorridos  no  menu  até  que  se  consiga  acessar  o  conteúdo  principal  da  página,  isto  é,  o  corpo.  Analisando  ainda  o  código  fonte  da  página,  podemos  observar  que  o  site  foi  construído  em  sua  estrutura  e  conteúdo  em  HTML,  com  sua  estilização  feita  a  partir  de  dois  ar-­‐quivos   externos   CSS   (estilos.css   e   estilos-­‐menu-­‐ddown-­‐new.css)   e   com   seu   funciona-­‐mento  auxiliado  por  um  arquivo  externo  JavaScript  (script-­‐ddown-­‐new.js).  Desses  ar-­‐quivos,  o  estilos.css  é  responsável  por  estilizar  todo  o  site,  exceto  pelo  menu  de  nave-­‐gação,  que  é  estilizado  pelo  estilos-­‐menu-­‐ddown-­‐new.css.  O  arquivo  script-­‐ddown-­‐new.js  possui  apenas  a  função  de  fazer  o  menu  de  navegação  funcionar.  A   alteração   realizada   no   site   objetivava   que   o   mesmo   ficasse   esteticamente   igual   ao  original,  e  os  resultados  podem  ser  conferidos  na  Figura  3.11.     A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   18  
  20. 20. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES      FIGURA  3.11  –  CAPTURA  DE  TELA  DO  SITE  DA  EACH  DEPOIS  DE  ALTERADO     3.2  DESCRIÇÃO  DO  FUNCIONAMENTO  A   acessibilidade   em   sites   da   web   é   atingida   por   meio   de   alterações   em   sua   estrutura   e  conteúdo.  Toda  página  web  é  formada  pelo  código  de  marcação  HTML,  no  qual  os  objetos,  textos,  imagens   e   animações   são   definidos   por   tags   HTML   e   ajustados   e/ou   customizados   por  atributos   dentro   dessas   tags.   Um   exemplo   de   tag   HTML   para   um   parágrafo   de   texto  com   cor   vermelha,   é   “<p style=’color:red’>Texto</p>”,     que   produziria   o  resultado  “Texto”.  Analisando  esse  trexho  de  código,  temos  ‘p’  como  o  nome  da  tag,  e  em  seguida  ‘style’  como  um  atributo,  que  nesse  caso  define  formatação  CSS  de  estilo  para  o  conteúdo,  recebendo  o  valor  ‘color:red’,  que  define  a  cor  de  um  objeto.     A C H 2 0 4 2   –   R E S O L U Ç Ã O   D E   P R O B L E M A S   I I   –   T U R M A   L 4   –   G R U P O   A C E S S I B I L I D A D E   V I S U A L   19  
  21. 21. UNIVERSIDADE  DE  SÃO  PAULO   ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES    Esse   nome   de   tag   e   seus   atributos,   que   podem   ser   tantos   quanto   necessários,   ficam  dentro   dos   sinais   ‘<’   e   ‘>’   representam   a   tag   de   abertura   HTML,   sendo   que   após   a  mesma  vem  o  conteúdo  para  o  qual  a  tag  e  as  propriedades  serão  aplicadas.  Quando  este  conteúdo  chega  ao  fim,  utiliza-­‐se  a  tag  de  fechamento  HTML,  que  é  simplesmente  o  mesmo  nome  da  tag  de  abertura,  mas  sem  atributos  e  com  uma  barra  após  o  sinal  ‘<’.  Para  o  uso  desse  trabalho,  destaca-­‐se  a  inclusão  de  atributos  title  e  alt  dentro  de  tags  HTML  (sendo  o  alt  exclusivo  para  as  tags  de  imagem  –  img).  Esses  atributos  incluem  uma   propriedade   de   descrição   textual   alternativa   no   elemento   em   que   foram   inseri-­‐das,  isto  é,  imagens  podem  ser  representadas  e  lidas  como  textos,  e  objetos  e  links  po-­‐dem  possuir  uma  descrição  sobre  como  funcionam  ou  qual  sua  função.  Quanto   à   estrutura   de   uma   página,   uma   vez   que   a   navegação   pelo   teclado   é   feita   de  forma   linear   como   se   toda   a   página   fosse   um   texto,   devem   ser   prestadas   atenções  quanto   à   quantidade   de   links,   menus,   imagens   e   objetos   que   devem   ser   percorridos  até  chegar-­‐se  ao  conteúdo  principal.  Uma  solução  possível  para  casos  onde  obrigatori-­‐amente  há  essa  grande  quantidade  de  objetos  (o  que  ocorre  na  maioria  absoluta  dos  sites),  é  a  inclusão  de  links  invisíveis  logo  após  o  cabeçalho  da  página  (no  início  da  tag  ‘<body>’).  Esses  links  são  construídos  como  um  link  comum  (com  a  tag  de  abertura  ‘<a>’,  e  a  de  fechamento  ‘</a>’),  porém  não  possuem  nada  entre  suas  tags  de  abertu-­‐ra  e  fechamento,  possuem  o  atributo  ‘href’  ajustado  como  ‘#link’  (onde  ‘link’  é  o  nome   da   âncora,   ou   seja,   para   que   parte   da   página   o   link   levará),   e   o   atributo   ‘title’  ajustado  por  exemplo  como  ‘Ir  para  link’.  Deve-­‐se  ainda,  incluir  um  atribudo  ‘id’  com  o  nome  ‘link’  na  tag  que  representa  o  local  desejado.  Como  exemplo,  podemos  ter  o  seguinte  código:  <a href=”#menu” title=”Ir para menu”></a><table id=”menu”>Menu principal</table>Esse  código  seria  traduzido  pelo  leitor  de  tela  como  “Ir  para  o €˙ȿ

×