38
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

Acessibilidade no site da each

Embed Size (px)

Citation preview

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        

   

 

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  1  

SUMÁRIO  

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        

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  2  

 

L ISTA  DE  F IGURAS  

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    

   

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  3  

L ISTA  DE  S ÍMBOLOS  E  ABREVIATU-­‐RAS  

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

   

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  4  

L ISTA  DE  TABELAS  E  ANEXOS  

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    

   

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  5  

RESUMO  

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.    

ABSTRACT  

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.    

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  6  

CAPÍTULO  1   -­‐   INTRODUÇÃ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?).      

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  7  

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á-­‐

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  8  

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

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  9  

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

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  10  

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.    

   

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  11  

CAPÍTULO  2   -­‐  LEVANTAMENTO  DE  DADOS  

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?  

 FIGURA  2.1-­‐  GRÁFICO  DA  QUESTÃO  1  

TABELA  2.1-­‐  DADOS  DA  QUESTÃO  1  Sistemas  de  Informação     2   7%  Marketing     2   7%  Licenciatura   em   Ciências  da  Natureza  

  7   23%  

Gestão  Ambiental     4   13%  Têxtil  e  Moda     0   0%  Gestão  de  Políticas  Públicas     5   17%  Lazer  e  Turismo     4   13%  Ciências  da  Atividade  Física     2   7%  Gerontologia     1   3%  Obstetrícia     2   7%  Nenhuma   das   Anteriores/  Não  estudo  na  EACH  

  1   3%  

 

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

1  2  

1  2  

4  5  

0  4  

7  2  2  

0   2   4   6   8  

N/A  OBS  GER  CAF  LZT  GPP  TM  GA  LCN  MKT  

SI  

Questão  1  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  12  

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?  

 FIGURA  2.2-­‐  GRÁFICO  DA  QUESTÃO  2  

TABELA  2.2-­‐  DADOS  DA  QUESTÃO  2  Visão   totalmente  reduzida  

1   3%  

Visão   parcialmente  reduzida   (que  apresente   dificul-­‐dades   relevantes  para   o   acesso   a  web)  

23   77%  

Daltonismo   6   20%      

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?  

 FIGURA  2.3-­‐  GRÁFICO  DA  QUESTÃO  3  

TABELA  2.3-­‐  DADOS  DA  QUESTÃO  3  N/A   1   3%  até  meia  hora   1   3%  até  uma  hora   5   17%  até  duas  horas   6   20%  três   horas   ou  mais  

17   57%  

 

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

1  

23  

6  

Questão  2  

Totalmente  reduzida  

Parcialmente  Reduzida  

Daltonismo  

17  

6  

5  

1  

1  

0   5   10   15   20  

até  3h  ou  mais  

até  2h  

até  1h  

até  30min  

N/A  

Questão  3  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  13  

QUESTÃO  4  -­‐  QUAL  SUA  PRINCIPAL  DIFICULDADE  AO  NAVEGAR  PELA  INTERNET?  

 FIGURA  2.4-­‐  GRÁFICO  DA  QUESTÃO  4  

TABELA  2.4-­‐  DADOS  DA  QUESTÃO  4  

 

Não   possuo   dificul-­‐dades  

13   43%  

Tamanho  do  texto   6   20%  Contraste  entre  texto  e  fundo  

2   7%  

Site   incompreensível  por  leitor  de  tela  

3   10%  

Grande   quantidade  de  links/menus  até  o  conteúdo  

2   7%  

Outros   4   13%  

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?  

 FIGURA  2.5-­‐  GRÁFICO  DA  QUESTÃO  5  

TABELA  2.5-­‐  DADOS  DA  QUESTÃO  5  Sim   16   53%  Não   14   47%    

Na  figura  2.5,  é  retratado  que  16  pessoas  consideraram  o  site  da  EACH  acessível,  enquanto  14  não  o  consideraram  acessível.      

4  

2  

3  

2  

6  

13  

0   5   10   15  

Outros  

QuanOdade  de  links  

Site  incompreensível  por  leitor  de  tela  

Contraste  

Tamanho  do  texto  

Não  possuo  dificuldades  

Questão  4  

16  

14  

0   5   10   15   20  

Sim  

Não  

Questão  5  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  14  

QUESTÃO  6  -­‐  SE  NÃO,  QUAIS  PROBLEMAS  DE  ACESSO  VOCÊ  ENCONTROU?  

 FIGURA  2.6-­‐  GRÁFICO  DA  QUESTÃO  6  

TABELA  2.6-­‐  DADOS  DA  QUESTÃO  6  Contraste   entre   fun-­‐do  e  cores  

  2   15%  

Tamanho  do  texto     6   46%  Site   é   parcialmente  ilegível  por  leitor  de  tela  

  2   15%  

Site   é   totalmente  ilegível  por  leitor  de  tela  

  1   8%  

Grande   quantidade  de   links/menus   até  o  conteúdo  principal  

  7   54%  

Outros     2   15%  As   pessoas   podem   marcar   mais   de   uma  caixa  de  seleção,  então  a  soma  das  percen-­‐tagens  pode  ultrapassar  100%.  

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?  

 FIGURA  2.7-­‐  GRÁFICO  DA  QUESTÃO  7  

TABELA  2.7-­‐  DADOS  DA  QUESTÃO  7  Tamanho  da  fon-­‐te  (textos)  

  11   55%  

Compatibilidade  com   leitores   de  tela  

  7   35%  

Quantidade   de  links/menus   até  o   conteúdo   prin-­‐cipal  

  9   45%  

Outros     7   35%  As  pessoas  podem  marcar  mais  de  uma  caixa   de   seleção,   então   a   soma   das  percentagens  pode  ultrapassar  100%.  

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

2  

7  

1  

2  

6  

2  

0   2   4   6   8  

Outros  

QuanOdade  de  links  

Totalmente  ilegível  por  leitor  de  tela  

Parcialmente  ilegível  por  leitor  de  tela  

Tamanho  do  Texto  

Contraste  

Questão  6  

7  

9  

7  

11  

0   2   4   6   8   10   12  

Outros  

QuanOdade  de  links  

CompaObilidade  com  leitores  de  tela  

Tamanho  do  texto  

Questão  7  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  15  

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

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  16  

CAPÍTULO  3  –  DESENVOLVIMENTO  DO  S ITE  

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  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  17  

 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.        

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  18  

   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.    

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  19  

 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.    

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  20  

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  menu”,  e  um  acesso  ao  mesmo  faria  com  que  o  foco  se  deslocasse  até  o  menu  da  página  –  Nesse  caso  a  tabela  com  o  ‘id=”menu”’.  Para   que   as   imagens   e   objetos   sejam   considerados   acessíveis,   deve-­‐se   fornecer   aos  mesmos  os  atributos  ‘alt’  e  ‘title’,  que  atribuem  um  texto  alternativo  descriti-­‐vo.  A   linguagem  utilizada  nesse  texto  deve  ser  clara  e  autoexplicativa.  Para  efeito  de  exemplo,   considere   a   inserção   desses   atributos   numa   imagem   que   representa   uma  fotografia   de   um   prédio   numa   avenida:  <img src=”foto.jpg” alt=”Foto de um prédio cinza com quatro andares numa avenida movimentada” title=”Foto de um prédio cinza com quatro andares numa avenida movimentada”> Com  essa   tag,   seria  exibido  o  arquivo   ‘foto.jpg’,  que  quando   focado  por  um   leitor  de  tela  ou  pelo  mouse,  exibiria  o   texto  alternativo  “Foto  de  um  prédio  cinza  com  quatro  andares  numa  avenida  movimentada”.  É  recomendável  inserir  tanto  o  atributo  title  quanto   o   alt   nas   imagens,   sendo   que   os   demais   objetos   e   tags   aceitam   apenas   o  title.  Quanto  a  um  menu  de  links  com  submenus,  seu  código  deve  ser  previamente  idealiza-­‐do  de  forma  a  comportar  a  acessibilidade  no  que  tange  ao  acesso  aos  links  dos  subme-­‐nus.  A  maioria  dos  sites  que  possuem  menus  com  submenus  e  não  são  acessíveis  utili-­‐za  o   foco  do  mouse  como  evento  para  mostrar  ou  ocultar  os  submenus  e  seus   links,  inviabilizando  um  acesso  pelo  teclado.  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  21  

Deve-­‐se,  portanto,  utilizar-­‐se  de  eventos  disparados  tanto  pelo  mouse  como  pelo  teclado  para  acionar  todo  o  menu,  além  de  incluir  atributos  title  em  todos  seus  links  podendo  assim  ser  definido  como  acessível.  A  questão  do  menu   foi   um  entrave  na   construção  do   site   acessível   que  esse  trabalho  demonstra  como  exemplo,  sendo  que  o  código  do  mesmo  teve  de  ser  quase  totalmente  reescrito  tanto  na  marcação  HTML,  quan-­‐to   em  propriedades   CSS   e   JavaScript,   de   forma  que   o  mesmo   funcio-­‐nasse  adequadamente  com  o  teclado.  Outro  ponto  importante  de  ser  comentado  sobre  imagens  é  sobre  ima-­‐

gens  inseridas  no  contexto  do  HTML  apenas  com  a  função  decora-­‐tiva,   como  as  encontradas  nas  marcações  de   lista  dos  quadros  no  corpo  da  página  da  EACH  (ver  Figura  3.12).  Como  as  mesmas  não  possuem  atributos  nem  sentido  em  possuírem  texto  alternativo,  a  melhor  solução  se-­‐ria  retirá-­‐las  e  substituí-­‐las  por  marcadores  comuns  ou  hífens.    Na  construção  do  site  protótipo  proposto  por  esse  trabalho  também  foi  identificada  a  tag  HTML  ‘<blink>’.  Essa  tag  faz  com  que  seu  conteúdo  fique  piscando  na  tela,  crian-­‐do  um  efeito  de  destaque  visual,  porém  é  não  recomendada  pelos  padrões  de  acessibi-­‐lidade  uma  vez  que  podem  ocasionar  problemas  com  a  leitura  por  um  leitor  de  tela,  e  sua  solução  seria  a  remoção  e  substituição  desse  destaque  visual  por  recursos  de  esti-­‐lização  como  cores,  negrito,  ou  fonte  diferente.  

3.3  ANÁLISE  VIA  LEITOR  DE  TELA  O  leitor  de  tela  é  um  software  usado  para  obter  resposta  do  computador  por  meio  so-­‐noro,  usado  principalmente  por  deficientes  visuais.  Também  pode   ser  usado  apenas  para  uma  maior  eficiência  e  conforto  do  usuário.  As  pessoas  portadoras  de  deficiência  visual  podem  navegar  pela  Internet,  utilizando  um  programa  de  leitura  de  tela.  Estes  programas  vão  passando  por   textos  e   imagens  e  sintetizando  a   fala  humana.  Basica-­‐mente,  o  programa  lê  para  a  pessoa  o  que  está  na  tela  (Wikimedia  Foundation,  2010).    Um   leitor  de   tela  percorre  o   site  de   forma   linear,   apresentando   cada   informação  de  uma  vez  e  seguindo  uma  sequência  lógica  e  constante,  como  se  estivesse  a  ler  um  tex-­‐to.  Há  ainda,  duas  formas  de  navegação  que  o  usuário  pode  utilizar  com  um  leitor  de  tela  (de  forma  mista  inclusive):  O  Virtual  Vision  pode  ler  apenas  os  links  e  áreas  passí-­‐veis  de   receber   foco   em  um  site  quando  o  usuário  utiliza   a   tecla   ‘tab’   para  navegar.  Isso  provê  uma  forma  de  navegação  resumida  e  é  a  mais  utilizada,  pois  nos  links  ge-­‐ralmente  estão  as  informações  mais  importantes.    A  segunda  forma  de  navegação  é  utilizando  as  teclas  direcionais  do  teclado  (tecla  para  acima  e  abaixo).  Dessa   forma,  o   leitor  de   tela  pode   ler   toda  a  página  navagando  por  todos  os  objetos  presentes  e  não  somente  os  links.  Assim,  são  lidos  todos  os  textos  ou  alternativas   textuais   presentes,   por   exemplo,   em   parágrafos,   títulos,   links,   imagens,  animações  e  campos  de  entrada,  de  forma  mais  extensa  que  apenas  a  navegação  por  ‘tab’.      O  site  da  EACH,  quando  percorrido  pelo  Virtual  Vision  nessa  forma  linear,  apresenta  a  seguinte  sequência:  “Cabeçalho  –  Menu  –  Corpo  –  Rodapé”.  Dentro  desse  encadeamento,  no  cabeçalho  recebem  o  foco  as  imagens-­‐logotipo  da  USP  e  da  EACH  primariamente,  e  secundariamente  o  título  do  site,  que  está  à  direita.  (tra-­‐

FIGURA   3.12-­‐   IMA-­‐GENS   COMO   MAR-­‐CADORES  DE  LISTAS  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  22  

temos  aqui  primariamente  como  a  navegação  via  tecla  ‘tab’,  e  secundariamente    como  a  navegação  via  teclas  direcionais  ‘acima’  e  ‘abaixo’).  O  Menu  recebe  foco  primariamente  em  todos  seus  links  já  exibidos  visualmente,  com  exceção   dos   submenus   (que   aparecem   apenas   após   receber   o   foco   do   dispositivo  apontador  na  tela).  No  campo  de  busca  do  Google  não  havia  descrição  alternativa  textual  para  o  mesmo,  sendo  apenas  identificada  uma  imagem  e  um  campo  de  entrada  de  texto,  com  um  tex-­‐to  apenas  secundariamente  acessível  “Busca  no  site  da  EACH”.    No  corpo,  os  títulos  dos  quadros  são  lidos  apenas  secundariamente.  Primariamente  é  acessado  o  painel  de  “Destaques”,  navagando  em  duplicidade  nos  links  definidos  nas  imagens  e  em  seus  respectivos  textos  de  descrição,  que  apontam  para  o  mesmo  ende-­‐reço.   Em   seguida,   nos   demais   quadros   são   lidos   os   links   de   notícias   e   informações  normalmente  na  forma  primária,  sendo  que  de  forma  secundária  os   ‘bullets’  (marca-­‐dores  de  parágrafos  para   listas  de   itens  –  ver  Figura  3.12)  são  acessados  como   ima-­‐gens  podendo  causar  confusão  por  não  possuírem  atributos  title  e  nem  serem  úteis  de  forma  não-­‐visual.  Outro  problema  encontrado  é  que  junto  a  alguns  desses  itens  de  listas  estava  a  palavra  “novo”  definida  dentro  de  uma  tag  ‘<blink>’,  que  atribui  um  efeito  visual  a  essa  pala-­‐vra,  porém  inviabiliza  o  acesso  via  leitor  de  tela.  O   Rodapé   do   site   pode   ser   acessado   somente   de   forma   secundária   por   não   possuir  links,  apenas  texto.  Depois  de  alterado,  o  protótipo  acessível  do   site  da  EACH  manteu  o   fluxo  de   leitura  pelo  leitor  de  tela,  porém  com  alguns  elementos  alterados:  No   cabeçalho,   foram   incluídos   dois   links   de   âncora,   que   quando   acionados,   ‘pulam’  para  determinadas  partes  da  página.  Os  mesmos  foram  “Ir  para  o  Menu”  e  “Ir  para  o  Conteúdo”.  São   links   invisíveis  que  alteram  o   fluxo  respectivamente  para  o  menu  de  links,  e  para  o  corpo  da  página.  Ainda  no  cabeçalho,  as  imagens  receberam  atributos  tornando-­‐as   descritíveis   por   uma   leitura   (texto   alternativo),   e   exibem   os   textos   “Ir  para  o  site  da  USP”  e  “Site  da  EACH”.  No  Menu,  houve  uma  readequação  de  todo  seu  código  de  forma  que  os  submenus  tor-­‐nassem-­‐se  acessíveis  pelo  teclado.  Essa  alteração  foi  realizada  com  sucesso  e  utilizan-­‐do-­‐se  apenas  da  tecla  ‘tab’  (navegação  primária),  toda  a  árvore  de  navegação  é  exibida  e  focada,  permitindo  acesso  a  todo  o  conteúdo  e  seções  do  site.  No  campo  de  busca  do  site  através  do  Google,  foram  inseridos  os  atributos  de  descri-­‐ção  textual  alternativa,  o  que  possibilita  a  correta  identificação  do  que  é  a  imagem  lo-­‐gotipo  do  Google  e  o  campo  de  inserção  de  texto  quando  focados.    No  corpo  do  site,  foram  inseridos  atributos  de  texto  alternativo  em  todas  as  imagens  presentes,  de   forma  que  cada  uma  delas  pode  apresentar  uma  descrição  quando  em  foco.   Foram   também   removidas   as   imagens  que   representavam  marcadores  de   lista  nos  quadros  do  corpo,  e  substituídas  por  simples  hífens,  que  simplificam  a  experiência  de  navegação  por  um  leitor  de  tela  significando  um  objeto  a  menos  para  ser  lido  e  en-­‐tendido.  No  quadro  “Destaques”,  que  possuía  uma  série  de  imagens  com  seus  respectivos  tex-­‐tos  descritivos  abaixo  e  com  links  separados  entre  a   imagem  e  o   texto,   foi   feita  uma  unificação.  Ou  seja,   existe  um  único   link  que  compreende  a   imagem  e  o   texto  agora,  evitando  que  haja  uma  repetição  de  dois  links  iguais  consecutivos  que  apontam  para  o  

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  23  

mesmo  lugar.  Foi  também  retirada  a  tag  ‘<blink>’  onde  havia  a  mesma,  de  forma  que  o  texto  pudesse  ser  corretamente  identificado  e  lido  pelo  leitor  de  tela.    Os   demais   itens   da   página   foram  preservados,   uma   vez   que   já   estavam  acessíveis   e  passíveis  de  serem  descritos  por  um  leitor  de  tela  com  o  uso  do  teclado.  

   

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  24  

CAPÍTULO  4   -­‐  CONCLUSÕES  E  PERS-­‐PECTIVAS  FUTURAS  

Concluimos  com  o  presente  trabalho  que  o  site  da  EACH  não  foi  desenvolvido  segundo  os  padrões  de  acessibilidade  estabelecidos,  e  portanto,  não  é  possível  navegar  ou  en-­‐tender  o  site  completamente  com  o  uso  de  um  leitor  de  tela. A  Acessibilidade  na  web  é  uma  tendência  que  cresce  cada  vez  mais  atualmente,  já  foi  definida  como  um  dos  desafios  da  pesquisa  científica  em  computação  no  Brasil  para  o  decênio   2006-­‐2016   (SBC,   2006),   e   os   horizontes   apontam   para   uma   futura   rede   de  informações  totalmente  acessível  não  somente  para  portadores  de  algum  tipo  de  defi-­‐ciência  quanto   também  para  os  mais  variados   tipos  de  dispositivos,  atingindo  assim  literalmente  a  informação  democratizada.  O  decreto  nº.  5296/2004  surgiu  nesse  mote  para  incentivar  uma  mudança  para  um  ciberespaço  cada  vez  mais  acessível,  apesar  de  contemplar  obrigatoriamente  apenas  os  sites  governamentais  e  apenas  as  deficiências  visuais.  Ao  contrário  do  que  muitas  pessoas  possam  pensar,  um  site  acessível  não  precisa  ser  composto  apenas  por  texto  e  ter  uma  estética  desagradável.  O  site  pode  possuir  ima-­‐gens  e  objetos  além  de  todo  um  layout  complexo,  porém  os  mesmos  precisam  ter  os  seus  equivalentes  textuais.  Dessa  forma,  os  deficientes  visuais  podem  conhecer  o  seu  conteúdo  e  pessoas  sem  deficiência  podem  navegar  em  um  espaço  agradável.  Nosso   trabalho  resumiu-­‐se  apenas  em  analisar  e  eleborar  um  protótipo  acessível  da  página   inicial  do  site  da  EACH  segundo  as  deficiências  visuais.  Porém,  ainda  há  uma  grande  quantidade  de  sites  que  não  são  construídos  seguindo  as  diretrizes  que  orien-­‐tam   o   desenvolvimento   de   páginas   com   acessibilidade,   e   é   intenção   estimular   essa  mudança,  que  ainda  é  lenta,  mas  é  vantajosa  e  está  acontecendo.        

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  25  

B IBLIOGRAFIA  

Acessibilidade  Brasil.  (s.d.).  Princípios.  Acesso  em  5  de  setembro  de  2010,  disponível  em  Acessibilidade  Brasil:  http://www.acessobrasil.org.br/index.php?itemid=44  Comunicação  Social  -­‐  IBGE.  (8  de  maio  de  2002).  Censo  Demográfico  -­‐  2000  -­‐Tabulação  Avançada  -­‐  Resultados  Preliminares  da  Amostra.  Acesso  em  10  de  setembro  de  2010,  disponível   em   IBGE   -­‐   Instituto   Brasileiro   de   Geografia   e   Estatística:  http://www.ibge.gov.br/home/presidencia/noticias/08052002tabulacao.shtm  Easylogics.   (2009).   Tudo   sobre   Acessibilidade   |   Acessibilidade   |   Artigos   sobre  acessibilidade   e   Usabilidade   |   Easylogics.   Retrieved   2010   йил   2-­‐novembro   from  Easylogics:   http://www.easylogics.com/artigos/acessibilidade/tudo-­‐sobre-­‐acessibilidade  Ministério  do  Planejamento,  Orçamento  e  Gestão.  (s.d.).  Material  de  Apoio.  Acesso  em  dezembro   de   2009,   disponível   em   Governo   Eletrônico:  http://www.governoeletronico.gov.br/acoes-­‐e-­‐projetos/e-­‐MAG/material-­‐de-­‐apoio  NET   APPLICATIONS.   (2010).   Browser   Market   Share.   Acesso   em   10   de   setembro   de  2010,   disponível   em   Usage   Share   Statistics   for   Internet   Technologies:  http://marketshare.hitslink.com/report.aspx?qprid=0  SANTAROSA,   L.  M.,  &   SONZA,  A.   P.   (2003).  Ambientes   virtuais   digitais:   acessibilidade  aos   deficientes   visuais.   Acesso   em   12   de   fevereiro   de   2008,   disponível   em   Revista  Novas   Tecnologias   na   Educação:  http://www.cinted.ufrgs.br/renote/fev2003/artigos/andrea_ambientes.pdf  SBC.   (2006).   Grandes   Desafios   da   Pesquisa   em   Computação   no   Brasil   2006-­‐2016.  Retrieved   2010   йил   1-­‐setembro   from   Sociedade   Brasileira   de   Computação:  http://sistemas.sbc.org.br/ArquivosComunicacao/Desafios_portugues.pdf  Wikimedia  Foundation.  (outubro  de  2010).  Leitor  de  Tela.  Acesso  em  15  de  novembro  de  2010,  disponível  em  Wikipédia:  http://pt.wikipedia.org/wiki/Leitor_de_tela    

ANEXOS  ANEXO  1  -­‐  CÓDIGO  FONTE  HTML  ORIGINAL  DO  SITE  DA  EACH  EM  5/11/2010  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Escola de Artes, Ciências e Humanidades - EACH/USP</TITLE><META name=keywords content="EACH USP Leste Graduação Pesquisa Cultura Extensão Biblioteca Laboratórios Concursos Processos Seletivos Licitações Ensino EACH/USP Escola de Artes, Ciências e Humanidades"><META name=description content="Site da Escola de Artes, Ciências e Humanidades (EACH - USP Leste) da USP."><META name=MSSmartTagsPreventParsing content=true><META content=no http-equiv=imagetoolbar><META content=no-cache http-equiv=Pragma><META name=robots content=all><META name=language con-tent=pt-br><META content="text/html; charset=iso-8859-1" http-equiv=Content-Type><!--<script language="JavaScript" src="http://each.uspnet.usp.br/each/include/drop-down.js"></script><script language="JavaScript" src="http://each.uspnet.usp.br/each/include/scroll.js"></script>--><!--<script lan-guage="JavaScript" src="http://each.uspnet.usp.br/each/include/script-ddown.js"></script>--><SCRIPT language=JavaScript src="EACH_arquivos/script-ddown-new.js"></SCRIPT><SCRIPT lan-guage=JavaScript src=""></SCRIPT><LINK rel=StyleSheet type=text/css href="EACH_arquivos/estilos.css"><!--<link rel="StyleSheet" href="http://each.uspnet.usp.br/each/include/estilos-menu.css" type="text/css">--><!--<link rel="StyleSheet" href="http://each.uspnet.usp.br/each/include/estilos-menu-ddown.css" type="text/css">--><LINK rel=StyleSheet type=text/css href="EACH_arquivos/estilos-menu-ddown-new.css"><META name=GENERATOR content="MSHTML 9.00.7930.16406"></HEAD><BODY><A na-me=#topo><TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" height="15%"><TBODY><TR height=3 bgColor=#b2b2b2><TD bgColor=#ff922d height=3></TD></TR><TR height=2 bgCo-

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  26  

lor=#b2b2b2><TD bgColor=#61cde3 height=2></TD></TR><TR height=2 bgColor=#b2b2b2><TD bgCo-lor=#5384b2 height=2></TD></TR><TR><TD bgColor=white><TABLE><TBODY><TR><TD width="15%"><A href="http://www.usp.br/"><IMG border=0 alt=USP src="EACH_arquivos/logo-USP.jpg" width="85%"> </A></TD><TD width="20%"><A href="http://each.uspnet.usp.br/each/index.php"><IMG border=0 alt=EACH src="EACH_arquivos/logo-each.jpg" height=70> </A></TD><TD width="65%" align=right><BIG><BIG>Escola de Artes, Ciências e Humanida-des</BIG></BIG><BR><SMALL>&nbsp;EACH/USP</SMALL></TD></TR></TBODY></TABLE></TD></TR><TR height=3 bgColor=#b2b2b2><TD bgColor=#ff922d height=3></TD></TR><TR height=2 bgCo-lor=#b2b2b2><TD bgColor=#61cde3 height=2></TD></TR><TR height=2 bgColor=#b2b2b2><TD bgCo-lor=#5384b2 height=2></TD></TR></TBODY></TABLE><TABLE width="100%"><TBODY><TR><TD vA-lign=top width="15%" align=left><TABLE><TBODY><TR><TD><UL id=primary-nav><LI class=menuparent><A href="http://each.uspnet.usp.br/each/index.php">Página Inici-al</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Administração</A><UL><LI><A href="http://each.uspnet.usp.br/each/contatos-administracao.php">Contatos</A></LI><LI><A href="http://each.uspnet.usp.br/each/organograma.php">Organograma</A></LI><LI><A href="http://each.uspnet.usp.br/each/diretoria.php">Diretoria</A></LI><LI><A href="http://each.uspnet.usp.br/each/assistencias.php">Assistências Técnicas</A></LI><LI><A href="http://each.uspnet.usp.br/each/informatica.php">Informática e Audiovisu-al</A></LI><LI><A href="http://each.uspnet.usp.br/each/laboratorios.php">Laboratórios Didá-ticos</A></LI><LI><A href="http://each.uspnet.usp.br/each/congregacao.php">Congregação</A></LI><LI><A href="http://each.uspnet.usp.br/each/cta.php">CTA</A></LI><LI><A href="http://each.uspnet.usp.br/each/regimentos-internos.php">Regimentos Inter-nos</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Informações</A><UL><LI><A href="http://each.uspnet.usp.br/each/download/2010-calendario.pdf">Calendário Anu-al</A></LI><LI><A href="http://each.uspnet.usp.br/each/historico.php">Histórico</A></LI><LI><A href="http://each.uspnet.usp.br/each/telefonia.php">Telefonia</A></LI><LI><A href="http://each.uspnet.usp.br/each/como-chegar.php">Como chegar</A></LI><LI><A href="http://each.uspnet.usp.br/each/mapa-site.php">Mapa do Site</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Serviços</A><UL><LI><A href="http://each.uspnet.usp.br/each/restaurante.php">Restaurante</A></LI><LI><A href="http://each.uspnet.usp.br/each/servico-enfermagem.php">Serviço de Enferma-gem</A></LI><LI><A href="http://each.uspnet.usp.br/each/secao-pessoal.php#concursos">Recursos Humanos (Concursos Públicos)</A></LI><LI><A href="http://each.uspnet.usp.br/each/rh-formularios.php">Recursos Humanos (Formulá-rios)</A></LI><LI><A href="http://each.uspnet.usp.br/each/licitacoes.php">Licitações</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/biblioteca.php">Biblioteca</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Docentes</A><UL><LI><A href="http://each.uspnet.usp.br/each/secretaria-cursos.php">Secretaria de Cur-sos</A></LI><LI><A href="http://each.uspnet.usp.br/each/docentes.php">Por no-me</A></LI><LI><A href="http://each.uspnet.usp.br/each/docentes-pesquisa.php">Por Áreas de interesse</A></LI><LI><A href="http://each.uspnet.usp.br/each/docentes-telefones.php">Telefones dos Docentes</A></LI><LI><A href="http://each.uspnet.usp.br/each/coordenadores-telefones.php">Telefones dos Coordenado-res de Curso</A></LI><LI><A href="http://each.uspnet.usp.br/each/concursos-processos.php">Concursos e Processos Seletivos para Docentes</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Funcionários</A><UL><LI><A href="http://each.uspnet.usp.br/each/funcionarios.php">Relação de Funcioná-rios</A></LI><LI><A href="http://each.uspnet.usp.br/each/contatos-administracao.php">Telefones por Área</A></LI><LI><A href="http://each.uspnet.usp.br/each/concursos-publicos-funcionarios.php">Concursos Públi-cos para Funcionários</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Graduação</A><UL><LI><A href="http://each.uspnet.usp.br/each/cg.php">Comissão de Graduação</A></LI><LI><A href="http://each.uspnet.usp.br/each/graduacao-destaques.php">Mural de Avisos aos Alu-nos</A></LI><LI><A href="http://each.uspnet.usp.br/each/estagios.php">Estágios</A></LI><LI><A href="http://each.uspnet.usp.br/each/graduacao-formularios.php">Formulários</A></LI><LI><A href="http://each.uspnet.usp.br/each/concepcao-geral.php">Concepção Geral</A></LI><LI><A href="http://each.uspnet.usp.br/each/caracteristicas-basicas.php">Características Bási-cas</A></LI><LI><A href="http://each.uspnet.usp.br/each/ciclo-basico.php">Ciclo Bási-co</A></LI><LI><A href="http://each.uspnet.usp.br/each/cursos.php">Cursos</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/pesquisa.php">Pesquisa</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/pos.php">Pós-Graduação</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Cultura e Exten-são</A><UL><LI><A href="http://each.uspnet.usp.br/each/ccex.php">Comissão de Cultura e Ex-tensão</A></LI><LI><A href="http://each.uspnet.usp.br/each/extensao-programas.php">Programas de Extensão</A></LI><LI><A href="http://each.uspnet.usp.br/each/extensao-projetos.php?detalhe=atuais">Projetos aprova-dos pela CCEx</A></LI><LI><A href="http://each.uspnet.usp.br/each/coral.php">Coral USP Les-te</A></LI><LI><A href="http://www.each.usp.br/nasce/">NASCE</A></LI><LI><A href="http://each.uspnet.usp.br/pbe/">Projeto Bem Estar</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/eventos.php">Eventos</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Comissões Assesso-ras</A><UL><LI><A href="http://each.uspnet.usp.br/each/cplage.php">Planejamento e Ges-tão</A></LI><LI><A href="http://each.uspnet.usp.br/each/cppe.php">Planejamento e Projeto do Espaço</A></LI><LI><A href="http://each.uspnet.usp.br/each/ccri.php">Comunicação e Relações Institucionais</A></LI><LI><A href="http://each.uspnet.usp.br/each/cobed.php">Biblioteca e Edição</A></LI><LI><A href="http://each.uspnet.usp.br/each/copre.php">Programas Especi-

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  27  

ais</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">COSEAS/EACH</A><UL><LI><A href="http://each.uspnet.usp.br/each/coseas.php">Destaques da COSEAS/EACH</A></LI><LI><A href="http://each.uspnet.usp.br/each/servico-enfermagem.php">Enfermagem</A></LI><LI><A href="http://each.uspnet.usp.br/each/restaurante.php">Restaurante</A></LI><LI><A href="http://each.uspnet.usp.br/infra/restaurante/cardapio.pdf">Cardápio do Restauran-te</A></LI></UL></LI><LI class=menuparent><A href="http://iptv.usp.br/portal/Id.do?instance=0&amp;id=usptuEbKoFLNQZqmRo7NMlCcgMh9FnVK6qIG1gWcF1qYHk.&amp;type=video">Vídeo Institucional</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/exalunos.php">Ex-Alunos</A></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/sala-imprensa.php">Sala de Impren-sa</A><UL><LI><A href="http://each.uspnet.usp.br/each/sala-imprensa.php">Sala de Impren-sa</A></LI><LI><A href="http://each.uspnet.usp.br/each/clipping.php">Clipping</A></LI><LI><A href="http://each.uspnet.usp.br/each/news.php">Notas e Notícias</A></LI><LI><A href="http://each.uspnet.usp.br/each/sala-imprensa.php#opiniao">Opinião</A></LI></UL></LI><LI class=menuparent><A href="http://each.uspnet.usp.br/each/#">Links Úteis</A><UL><LI><A href="http://www.usp.br/">USP</A></LI><LI><A href="http://www.usp.br/gr/">Reitoria</A></LI><LI><A href="http://www.usp.br/pco/">Prefeitura do Campus</A></LI><LI><A href="http://www.usp.br/drh/">DRH</A></LI><LI><A href="http://www.fuvest.br/">FUVEST</A></LI><LI><A href="https://sistemas2.usp.br/jupiterweb/">Jupiter Web</A></LI><LI><A href="http://www.usp.br/sibi/">SibiNet</A></LI><LI><A href="http://col.redealuno.usp.br/portal/">CoL</A></LI><LI><A href="http://www.each.usp.br/cipa/">CIPA</A></LI><LI><A href="http://www.each.usp.br/recicla/">USP Leste Reci-cla</A></LI></UL></LI></UL></TD></TR></TBODY></TABLE><TABLE><TBODY><TR><TD align=center><IMG src="EACH_arquivos/passarela-estacao.jpg" width=150></TD></TR></TBODY></TABLE><!-- Search Google --><FORM method=get ac-tion=http://www.google.com/custom>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<FONT size=1 face="Arial, Helvetica, sans-serif">Busca no site da EACH</FONT> <BR><INPUT name=cof val-ue=T:#000000;BGC:#FFFFFF;AH:center;S:http://www.each.usp.br/;AWFID:0117d039148ef7ae; type=hidden> <INPUT name=domains value=each.usp.br type=hidden> <INPUT name=sitesearch val-ue=each.usp.br type=hidden> <INPUT name=restrict value=Portuguêstype=hidden> <!--<br>--> <INPUT name=q maxLength=255 size=12> <!--<br>--><!--<b>Busca na EACH</b>--> <INPUT border=0 name=sa alt="Buscar em each.usp.br usando o Google" src="EACH_arquivos/logo-google.jpg" type=image></FORM><!-- Search Google --></TD><TD vAlign=top width="85%" align=right><TABLE border=0 cellPadding=5 width="95%" align=center><TBODY><TR><TD class=content><TABLE><TBODY><TR><TD colSpan=2><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueCorpo><TBODY><TR><TD><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>DESTAQUES</P></TD></TR><TR><TD class=eachDestaque><TABLE bor-der=0><!-- INICIO DOS DESTAQUES --><TBODY><TR><!-- destaque estude --><TD width="15%" align=center><A href="http://each.uspnet.usp.br/each/estudenaeach"><IMG border=0 src="EACH_arquivos/logo-estude-each.jpg" height=80></A> <BR><CENTER><A href="http://each.uspnet.usp.br/each/estudenaeach"><FONT size=-1 face=arial>Estude na EACH</FONT></A></CENTER></TD><!-- destaque exalunos --><TD width="15%" align=center><A href="http://each.uspnet.usp.br/each/exalunos.php"><IMG border=0 src="EACH_arquivos/logo-exalunos.jpg" height=80></A> <BR><CENTER><A href="http://each.uspnet.usp.br/each/exalunos.php"><FONT size=-1 face=arial>Cadastro de Ex-alunos</FONT></A></CENTER></TD><!-- destaque mestrado --><TD width="15%" align=center><A href="http://each.uspnet.usp.br/sistcomplexos/"><IMG border=0 src="EACH_arquivos/logo-ppgsc-inscricoes.jpg" height=70></A> <BR><CENTER><A href="http://each.uspnet.usp.br/sistemascomplexos/"><FONT size=-1 face=arial>Inscrições Abertas</FONT></A></CENTER></TD><!-- destaque PAE --><TD width="15%" align=center><A href="http://each.uspnet.usp.br/each/pos-pae-inscricoes.php"><IMG border=0 src="EACH_arquivos/logo-pae.jpg" height=70></A> <BR><CENTER><A href="http://each.uspnet.usp.br/each/pos-pae-inscricoes.php"><FONT size=-1 face=arial>PAE 2011 <BR>Inscrições Abertas</FONT></A></CENTER></TD><!-- destaque CHT --><TD width="15%" align=center><A href="http://www.each.usp.br/chamados"><IMG border=0 src="EACH_arquivos/logo-cht.jpg" height=80></A><CENTER><A href="http://each.uspnet.usp.br/each/"><FONT size=-1 face=arial><A href="http://www.each.usp.br/chamados">Abrir Chamado Técnico</FONT></A></CENTER></TD><!-- destaque sala de imprensa --><TD width="15%" align=center><A href="http://each.uspnet.usp.br/each/sala-imprensa.php"><IMG border=0 src="EACH_arquivos/logo-sala-imprensa.jpg" height=80></A><CENTER><A href="http://each.uspnet.usp.br/each/sala-imprensa.php"><FONT size=-1 face=arial>Sala de Imprensa</FONT></A></CENTER></TD><!-- FIM DOS DESTAQUES --></TR></TBODY></TABLE></TD><!--</tr>--></TD></TR><TR><TD><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>ACONTECE NA EACH</P></TD></TR><TR><TD class=eachDestaque><TABLE><TBODY><TR><TD vAlign=top width="50%"><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/each/noticia.php?id=953">Reitor da USP visita a EACH e Cur-sinho Pró-Universitário</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/each/noticia.php?id=932">Pesquisa da EACH recebe prêmio internacional</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/each/noticia.php?id=938">EACH segue entre as unidades da USP com mais alunos vindos da rede pública de ensino</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/imprensa/aprovados.pdf">Lista de aprovados no programa Pró-Universidade</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/imprensa/cidadeconstitucional.pdf">Veja quem foi selecionado no projeto Cidade Constitucional IV</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/each/noticia.php?id=944">Termina avaliação de comissão ex-

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  28  

terna na EACH</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/each/noticia.php?id=945">Professor Pedro Bombonato visita a EACH e a apresenta o Programa de Pré-Iniciação Científica</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp;<A href="http://each.uspnet.usp.br/each/noticia.php?id=954">Horário de Atendimento | COSEAS-EACH</A><BR></P></TD><TD vAlign=top width="50%"><P class=eachDestaque><A href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000485"><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; Espalhafatos com Humor | Improvi-sando com a EACH | (23/10/2010 - 27/11/2010- 9h00 a 13h00)</A><BR><A href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000486"><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; Exposição dos trabalhos vencedores da 18ª Edição do Programa Nascente | Sagão da Biblioteca(03/11/2010 - 12/11/2010 - 08h00 a 22h00)</A><BR><A href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000480"><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; Dom Quixote Meeting 2010 | Auditório Azul, Vermelho e Verde - EACH (09/11/2010 - 10/11/2010 - 8h30 a18h00)</A><BR><A href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000487"><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; 1º Fórum sobre LIBRAS | (27/11/2010 - 27/11/2010 - 09h00 a 13h00)</A><BR></P></TD></TR></TBODY></TABLE></TD></TR></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR></TD></TR><TR><TD vAlign=top><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo colSpan=2><P class=eachDestaqueTitulo>DIRETORIA</P></TD></TR><TR><TD class=eachDestaque width="50%"><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://twitter.com/diretoriaeach">Twitter da Diretoria</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/diretoria-comunicados.php">Comunicados da Direto-ria</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://www.each.usp.br/diretoria/RelatoriosAvaliacoesEACH2010.pdf">Avaliação Exter-na</A><BR></P></TD><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/diretoria-ddd.php">Direto da Direção (DDD)</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/sala-imprensa.php#opiniao">Opinião</A><BR></P></TD></TR><TR><TD class=eachDestaqueTermino colS-pan=2></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR></TD><TD vAlign=top><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo colSpan=2><P class=eachDestaqueTitulo>CONTATOS &nbsp;&nbsp;| &nbsp;TELEFONES</P></TD></TR><TR><TD class=eachDestaque width="50%"><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/contatos-administracao.php">Administração <I><FONT color=red>com email</FONT></I></A><BR></P></TD><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/docentes-telefones.php">Docentes</A> <BR><IMG bor-der=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/coordenadores-telefones.php">Coordenadores de Cur-so</A> <BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/secretaria-cursos.php">Secretaria de Cur-sos</A></P></TD></TR><TR><TD class=eachDestaqueTermino colS-pan=2></TD></TR></TBODY></TABLE></TD></TR><TR><TD vAlign=middle colSpan=2><HR width="100%"></TD></TR><TR><TD vAlign=top><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. ADMINISTRATIVA</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/concursos-processos.php">Concursos Públicos | Do-centes</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/concursos-publicos-funcionarios.php">Concursos Públi-cos | Funcionários</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/download/formularios/formulario-cursos.doc">Formulário para Cursos | Funcionários</A></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. FINANCEIRA</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <I>Aguarde!!</I><BR></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR></TD><TD vAlign=top><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. INFRA-ESTRUTURA</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; Dúvidas, sugestões de manutenção e consertos? Email para infra-each<IMG border=0 src="EACH_arquivos/email-usp-arroba.jpg" width=12 height=12><IMG border=0src="EACH_arquivos/email-usp-host.jpg" width=36 height=11></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. ACADÊMICA</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/cg-atribuicao-didatica.php">Atribuição Didática dos Cursos</A> <I><FONT color=red><BLINK>novo</BLINK></FONT></I><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/secretaria-cursos.php">Secretaria de Cur-sos</A></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR></TD></TR><TR><TD vAlign=middle colSpan=2><HR width="100%"></TD></TR><TR><TD vAlign=top><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>GRADUAÇÃO</P></TD></TR><TR><TD class=eachDestaque><P

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  29  

class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/graduacao-destaques.php">Mural de Avisos aos Alunos</A></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>PESQUISA</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; Inscrições para os editais <A href="http://each.uspnet.usp.br/pesquisa/Edital-PIC-EACH-2010-2011.pdf">PIC</A> e <Ahref="http://each.uspnet.usp.br/pesquisa/Edital-PIBITI-EACH-2010-2011.pdf">PIBITi</A> 2010/2011 (até 16/04).<BR></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR></TD><TD vAlign=top><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>PÓS-GRADUAÇÃO</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/sistcomplexos/">Abertas as in-scrições do processo seletivo 2011 | Mestrado em Sistemas Complexos</A> <I><FONT col-or=red><BLINK>novo</BLINK></FONT></I><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/pos.php">Confira os pro-gramas de Pós-Graduação da EACH</A> <BR></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR><!-- INICIO DO DESTAQUE --><TABLE class=eachDestaqueRosto><TBODY><TR><TD class=eachDestaqueTitulo><P class=eachDestaqueTitulo>CULTURA E EXTENSÃO</P></TD></TR><TR><TD class=eachDestaque><P class=eachDestaque><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/latosensu/psicologiapolitica/matricula.php">Especialização em Psicologia Política | 2ª chamada</A> <BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/ccex/unati-2-2010.pdf">UnATI - programação 2º semes-tre/2010</A> <BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8>&nbsp; <A href="http://each.uspnet.usp.br/each/noticia.php?id=886">Yoga Para Gestantes e Baby Yo-ga</A></P></TD></TR><TR><TD class=eachDestaqueTermino></TD></TR></TBODY></TABLE><!-- FIM DO DESTAQUE --><BR></TD></TR></TBODY></TABLE></TD></TR></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" height="5%"><TBODY><TR height=2 bgColor=#b2b2b2><TD bgColor=#5384b2 height=2></TD></TR><TR height=2 bgColor=#b2b2b2><TD bgColor=#61cde3 height=2></TD></TR><TR height=3 bgColor=#b2b2b2><TD bgColor=#ff922d height=3></TD></TR><TR><TD class=eachMenu><FONT size=1>Escola de Artes, Ciências e Humani-dades (USP Leste)<BR>Rua Arlindo Béttio, 1000 - Ermelino Matarazzo - CEP: 03828-000</FONT></TD></TR><TR height=3 bgColor=#b2b2b2><TD bgColor=#ff922d height=3></TD></TR><TR height=2 bgColor=#b2b2b2><TD bgColor=#61cde3 height=2></TD></TR><TR height=2 bgCol-or=#b2b2b2><TD bgColor=#5384b2 height=2></TD></TR></TBODY></TABLE></A></BODY></HTML>

 ANEXO  2  -­‐  CÓDIGO  FONTE  JAVASCRIPT  ORIGINAL  DO  SITE  DA  EACH  DE  5/11/2010  function IEHoverPseudo() { var navItems = document.getElementById("primary-nav").getElementsByTagName("li"); for (var i=0; i<navItems.length; i++) { if(navItems[i].className == "menuparent") { navItems[i].onmouseover=function() { this.className += " over"; } navItems[i].onmouseout=function() { this.className = "menuparent"; } }}} window.onload = IEHoverPseudo;

 ANEXO  3  -­‐  CÓDIGO  FONTE  CSS  ORIGINAL  DO  SITE  DA  EACH  DE  5/11/2010  UL#primary-nav {BORDER-BOTTOM: #ccc 1px solid; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; FONT-SIZE: 100%; PADDING-TOP: 0px} UL#primary-nav UL {BORDER-BOTTOM: #ccc 1px solid; PADDING-BOTTOM: 0px; MARGIN: 0px; PAD-DING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; FONT-SIZE: 100%; PADDING-TOP: 0px} UL#primary-nav LI {POSITION: relative; LIST-STYLE-TYPE: none; FONT: 10px verdana} UL#primary-nav LI A {BORDER-BOTTOM: 0px; BORDER-LEFT: #ccc 1px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; DISPLAY: block; FONT: 10px verdana; BACKGROUND: #5384b2; COLOR: #ffffff; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid; TEXT-DECORATION: none; PADDING-TOP: 5px} * HTML UL#primary-nav LI {FONT: 10px verdana; FLOAT: left; HEIGHT: 1%} * HTML UL#primary-nav LI A {FONT: 10px verdana; HEIGHT: 1%} UL#primary-nav UL {POSITION: absolute; DISPLAY: none; TOP: 0px; LEFT: 149px} UL#primary-nav LI UL LI A {PADDING-BOTTOM: 2px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 2px} UL#primary-nav LI:hover UL UL {DISPLAY: none} UL#primary-nav LI:hover UL UL UL {DISPLAY: none} UL#primary-nav LI.over UL UL {DISPLAY: none} UL#primary-nav LI.over UL UL UL {DISPLAY: none} UL#primary-nav LI:hover UL {DISPLAY: block} UL#primary-nav LI LI:hover UL {DISPLAY: block} UL#primary-nav LI LI LI:hover UL {DISPLAY: block} UL#primary-nav LI.over UL {DISPLAY: block} UL#primary-nav LI LI.over UL {DISPLAY: block} UL#primary-nav LI LI LI.over UL {DISPLAY: block} UL#primary-nav LI.menuparent {BACKGROUND: url(imagem/arrow.gif) no-repeat right center} UL#primary-nav LI.menuparent:hover {BACKGROUND-COLOR: #f9f9f9} UL#primary-nav LI.over {BACKGROUND-COLOR: #f9f9f9} UL#primary-nav LI A:hover {COLOR: #000000}

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  30  

 ANEXO  4  -­‐  CÓDIGO  FONTE  HTML  ALTERADO  DA  PÁGINA  DA  EACH  <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Transitional//EN"><!-- saved from url=(0031)http://each.uspnet.usp.br/each/ --><HTML><HEAD><TITLE>Escola de Artes, Ciências e Humanidades - EACH/USP</TITLE><META name=keywords content="EACH USP Leste Graduação Pesqui-sa Cultura Extensão Biblioteca Laboratórios Concursos Processos Seletivos Licitações Ensino EACH/USP Escola de Artes, Ciências e Humanidades"><META name=description content="Site da Escola de Artes, Ciências e Humanidades (EACH - USP Leste) da USP."><META na-me=MSSmartTagsPreventParsing content=true><META content=no http-equiv=imagetoolbar><META content=no-cache http-equiv=Pragma><META name=robots content=all><META name=language con-tent=pt-br><META content="text/html; charset=iso-8859-1" http-equiv=Content-Type><!--<script language="JavaScript" src="http://each.uspnet.usp.br/each/include/drop-down.js"></script><script language="JavaScript" src="http://each.uspnet.usp.br/each/include/scroll.js"></script>--><!--<script lan-guage="JavaScript" src="http://each.uspnet.usp.br/each/include/script-ddown.js"></script>--><SCRIPT language=JavaScript src="EACH_arquivos/script-ddown-new.js"></SCRIPT><SCRIPT lan-guage=JavaScript src=""></SCRIPT><liNK rel=StyleSheet type=text/css href="EACH_arquivos/estilos.css"><!--<link rel="StyleSheet" href="http://each.uspnet.usp.br/each/include/estilos-menu.css" type="text/css">--><!--<link rel="StyleSheet" href="http://each.uspnet.usp.br/each/include/estilos-menu-ddown.css" type="text/css">--><liNK rel=StyleSheet type=text/css href="EACH_arquivos/estilos-menu-ddown-new.css"><META name=GENERATOR content="MSHTML 9.00.7930.16406"></HEAD><BODY><a title="Topo" name=#topo></a><a title="Ir para o menu" href="#menu"></a><a title="Ir para o conteúdo" href="#conteudo"></a><table border=0 cellSpacing=0 cellPadding=0 width="100%" height="15%"><tbody><tr height=3 bgColor=#b2b2b2><td bgColor=#ff922d height=3></td></tr><tr height=2 bgColor=#b2b2b2><td bgColor=#61cde3 height=2></td></tr><tr height=2 bgCo-lor=#b2b2b2><td bgColor=#5384b2 height=2></td></tr><tr><td bgCo-lor=white><table><tbody><tr><td width="15%"><a title="Ir para o site da USP" href="http://www.usp.br/"><img border=0 alt=USP src="EACH_arquivos/logo-USP.jpg" title="Logotipo da Universidade de São Paulo" width="85%"> </a></td><td width="20%"><a title="Site da EACH" href="http://each.uspnet.usp.br/each/index.php"><img border=0 alt=EACH src="EACH_arquivos/logo-each.jpg" title="Logotipo da Escola de Artes, Ciências e Humanida-des" height=70> </a></td><td width="65%" align=right><BIG>Escola de Artes, Ciências e Huma-nidades</BIG><br><SMALL>&nbsp;EACH/USP</SMALL></td></tr></tbody></table></td></tr><tr height=3 bgColor=#b2b2b2><td bgColor=#ff922d height=3></td></tr><tr height=2 bgCo-lor=#b2b2b2><td bgColor=#61cde3 height=2></td></tr><tr height=2 bgColor=#b2b2b2><td bgCo-lor=#5384b2 height=2></td></tr></tbody></table><table width="100%"><tbody><tr><a href="#" name="menu" title="Menu principal"></a><td vAlign=top width="15%" align=left><table><tbody><tr><td><ul id="ddmenu" class="jsoff"><li><a title="Página Inici-al" href="http://each.uspnet.usp.br/each/index.php">Página Inicial</a></li><li><a title="Administração" class="mum" href="http://each.uspnet.usp.br/each/#">Administração</a><ul><li><a title="Contatos" href="http://each.uspnet.usp.br/each/contatos-administracao.php">Contatos</a> </li><li><a title="Organograma" href="http://each.uspnet.usp.br/each/organograma.php">Organograma</a> </li><li><a title="Diretoria" href="http://each.uspnet.usp.br/each/diretoria.php">Diretoria</a> </li><li><a title="Assistências Técnicas" href="http://each.uspnet.usp.br/each/assistencias.php">Assistências Técnicas</a> </li><li><a title="Informática e Audiovisual" href="http://each.uspnet.usp.br/each/informatica.php">Informática e Audiovisual</a> </li><li><a title="Laboratórios Didáticos" href="http://each.uspnet.usp.br/each/laboratorios.php">Laboratórios Didáticos</a> </li><li><a title="Congregação" href="http://each.uspnet.usp.br/each/congregacao.php">Congregação</a> </li><li><a title="CTA" href="http://each.uspnet.usp.br/each/cta.php">CTA</a> </li><li><a title="Regimentos Internos" href="http://each.uspnet.usp.br/each/regimentos-internos.php">Regimentos Internos</a> </li></ul> </li><li><a title="Informações" class="mum" href="http://each.uspnet.usp.br/each/#">Informações</a><ul><li><a title="Calendário Anual" href="http://each.uspnet.usp.br/each/download/2010-calendario.pdf">Calendário Anual</a> </li><li><a title="Histórico" href="http://each.uspnet.usp.br/each/historico.php">Histórico</a> </li><li><a title="Telefonia" href="http://each.uspnet.usp.br/each/telefonia.php">Telefonia</a> </li><li><a title="Como chegar" href="http://each.uspnet.usp.br/each/como-chegar.php">Como chegar</a> </li><li><a title="Mapa do Site" href="http://each.uspnet.usp.br/each/mapa-site.php">Mapa do Site</a> </li></ul></li><li><a title="Serviços" class="mum" href="http://each.uspnet.usp.br/each/#">Serviços</a><ul><li><a title="Restaurante" href="http://each.uspnet.usp.br/each/restaurante.php">Restaurante</a> </li><li><a title="Serviço de Enfermagem" href="http://each.uspnet.usp.br/each/servico-enfermagem.php">Serviço de Enfermagem</a> </li><li><a title="Recursos Humanos (Concursos Públicos" href="http://each.uspnet.usp.br/each/secao-pessoal.php#concursos">Recursos Huma-nos (Concursos Públicos)</a> </li><li><a title="Recursos Humanos (Formulários)" href="http://each.uspnet.usp.br/each/rh-formularios.php">Recursos Humanos (Formulários)</a> </li><li><a title="Licitações" href="http://each.uspnet.usp.br/each/licitacoes.php">Licitações</a> </li></ul></li><li><a title="Biblioteca" href="http://each.uspnet.usp.br/each/biblioteca.php">Biblioteca</a> </li><li><a title="Docentes" class="mum" href="http://each.uspnet.usp.br/each/#">Docentes</a><ul><li><a title="Secretaria de Cursos" href="http://each.uspnet.usp.br/each/secretaria-cursos.php">Secretaria de Cursos</a> </li><li><a title="Por nome" href="http://each.uspnet.usp.br/each/docentes.php">Por no-me</a> </li><li><a title="Por Áreas de interesse" href="http://each.uspnet.usp.br/each/docentes-pesquisa.php">Por Áreas de interesse</a>

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  31  

</li><li><a title="Telefones dos Docentes" href="http://each.uspnet.usp.br/each/docentes-telefones.php">Telefones dos Docentes</a> </li><li><a title="Telefones dos Coordenadores de Curso" href="http://each.uspnet.usp.br/each/coordenadores-telefones.php">Telefones dos Co-ordenadores de Curso</a> </li><li><a title="Concursos e Processos Seletivos para Docentes" href="http://each.uspnet.usp.br/each/concursos-processos.php">Concursos e Processos Seleti-vos para Docentes</a> </li></ul></li><li><a title="Funcionários" class="mum" href="http://each.uspnet.usp.br/each/#">Funcionários</a><ul><li><a title="Relação de Funci-onários" href="http://each.uspnet.usp.br/each/funcionarios.php">Relação de Funcionários</a> </li><li><a title="Telefones por Área" href="http://each.uspnet.usp.br/each/contatos-administracao.php">Telefones por Área</a> </li><li><a title="Concursos Públicos para Funci-onários" href="http://each.uspnet.usp.br/each/concursos-publicos-funcionarios.php">Concursos Públicos para Funcionários</a> </li></ul></li><li><a title="Graduação" class="mum" href="http://each.uspnet.usp.br/each/#">Graduação</a><ul><li><a title="Comissão de Gradua-ção" href="http://each.uspnet.usp.br/each/cg.php">Comissão de Graduação</a> </li><li><a title="Mural de Avisos aos Alunos" href="http://each.uspnet.usp.br/each/graduacao-destaques.php">Mural de Avisos aos Alunos</a> </li><li><a title="Estágios" href="http://each.uspnet.usp.br/each/estagios.php">Estágios</a> </li><li><a title="Formulários" href="http://each.uspnet.usp.br/each/graduacao-formularios.php">Formulários</a> </li><li><a title="Concepção Geral" href="http://each.uspnet.usp.br/each/concepcao-geral.php">Concepção Geral</a> </li><li><a title="Características Básicas" href="http://each.uspnet.usp.br/each/caracteristicas-basicas.php">Características Básicas</a> </li><li><a title="Ciclo Básico" href="http://each.uspnet.usp.br/each/ciclo-basico.php">Ciclo Básico</a> </li><li><a title="Cursos" href="http://each.uspnet.usp.br/each/cursos.php">Cursos</a> </li></ul></li><li><a title="Pesquisa" href="http://each.uspnet.usp.br/each/pesquisa.php">Pesquisa</a> </li><li><a title="Pós-Graduação" href="http://each.uspnet.usp.br/each/pos.php">Pós-Graduação</a> </li><li><a title="Cultura e Extensão" class="mum" href="http://each.uspnet.usp.br/each/#">Cultura e Extensão</a><ul><li><a title="Comissão de Cultura e Extensão" href="http://each.uspnet.usp.br/each/ccex.php">Comissão de Cultura e Extensão</a> </li><li><a title="Programas de Extensão" href="http://each.uspnet.usp.br/each/extensao-programas.php">Programas de Extensão</a> </li><li><a title="Projetos aprovados pela CCEx" href="http://each.uspnet.usp.br/each/extensao-projetos.php?detalhe=atuais">Projetos aprova-dos pela CCEx</a> </li><li><a title="Coral USP Leste" href="http://each.uspnet.usp.br/each/coral.php">Coral USP Leste</a> </li><li><a title="NASCE" href="http://www.each.usp.br/nasce/">NASCE</a> </li><li><a title="Projeto Bem Estar" href="http://each.uspnet.usp.br/pbe/">Projeto Bem Estar</a> </li></ul></li><li><a title="Eventos" href="http://each.uspnet.usp.br/each/eventos.php">Eventos</a> </li><li><a title="Comissões Assessoras" class="mum" href="http://each.uspnet.usp.br/each/#">Comissões Assessoras</a><ul><li><a title="Planejamento e Gestão" href="http://each.uspnet.usp.br/each/cplage.php">Planejamento e Gestão</a> </li><li><a title="Planejamento e Projeto do Espaço" href="http://each.uspnet.usp.br/each/cppe.php">Planejamento e Projeto do Espaço</a> </li><li><a title="Comunicação e Relações Institucionais" href="http://each.uspnet.usp.br/each/ccri.php">Comunicação e Relações Institucionais</a> </li><li><a title="Biblioteca e Edição" href="http://each.uspnet.usp.br/each/cobed.php">Biblioteca e Edição</a> </li><li><a title="Programas Especiais" href="http://each.uspnet.usp.br/each/copre.php">Programas Espe-ciais</a> </li></ul></li><li><a title="COSEAS/EACH" class="mum" href="http://each.uspnet.usp.br/each/#">COSEAS/EACH</a><ul><li><a title="Destaques da COSE-AS/EACH" href="http://each.uspnet.usp.br/each/coseas.php">Destaques da COSEAS/EACH</a> </li><li><a title="Enfermagem" href="http://each.uspnet.usp.br/each/servico-enfermagem.php">Enfermagem</a> </li><li><a title="Restaurante" href="http://each.uspnet.usp.br/each/restaurante.php">Restaurante</a> </li><li><a title="Cardápio do Restaurante" href="http://each.uspnet.usp.br/infra/restaurante/cardapio.pdf">Cardápio do Restaurante</a> </li></ul></li><li><a title="Vídeo Institucional" href="http://iptv.usp.br/portal/Id.do?instance=0&amp;id=usptuEbKoFLNQZqmRo7NMlCcgMh9FnVK6qIG1gWcF1qYHk.&amp;type=video">Vídeo Institucional</a> </li><li><a title="Ex-Alunos" href="http://each.uspnet.usp.br/each/exalunos.php">Ex-Alunos</a> </li><li><a title="Sala de Imprensa" class="mum" href="http://each.uspnet.usp.br/each/sala-imprensa.php">Sala de Im-prensa</a><ul><li><a title="Sala de Imprensa" href="http://each.uspnet.usp.br/each/sala-imprensa.php">Sala de Imprensa</a> </li><li><a title="Clipping" href="http://each.uspnet.usp.br/each/clipping.php">Clipping</a> </li><li><a title="Notas e Notícias" href="http://each.uspnet.usp.br/each/news.php">Notas e Notícias</a> </li><li><a title="Opinião" href="http://each.uspnet.usp.br/each/sala-imprensa.php#opiniao">Opinião</a> </li></ul></li><li><a title="Links Úteis" class="mum" href="http://each.uspnet.usp.br/each/#">Links Úteis</a><ul><li><a title="USP" href="http://www.usp.br/">USP</a> </li><li><a title="Reitoria" href="http://www.usp.br/gr/">Reitoria</a> </li><li><a title="Prefeitura do Campus" href="http://www.usp.br/pco/">Prefeitura do Campus</a> </li><li><a title="DRH" href="http://www.usp.br/drh/">DRH</a> </li><li><a title="FUVEST" href="http://www.fuvest.br/">FUVEST</a> </li><li><a title="Júpiter Web" href="https://sistemas2.usp.br/jupiterweb/">Júpiter Web</a> </li><li><a title="SibiNet" href="http://www.usp.br/sibi/">SibiNet</a> </li><li><a title="CoL" href="http://col.redealuno.usp.br/portal/">CoL</a> </li><li><a title="CIPA" href="http://www.each.usp.br/cipa/">CIPA</a> </li><li><a title="USP Leste Recicla" href="http://www.each.usp.br/recicla/">USP Leste Recicla</a> </li></ul></li></ul></td></tr></tbody></table><table><tbody><tr><td align=center><img src="EACH_arquivos/passarela-estacao.jpg" title="Passarela da Estação Usp Leste" width=150 alt="Passarela da Estação Usp Leste"></td></tr></tbody></table><!-- Search Google --><FORM

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  32  

method=get action=http://www.google.com/custom>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=1 face="Arial, Helvetica, sans-serif">Busca no site da EACH</font> <br><input name=cof val-ue=T:#000000;BGC:#FFFFFF;AH:center;S:http://www.each.usp.br/;AWFID:0117d039148ef7ae; type=hidden><input name=domains value=each.usp.br type=hidden><input name=sitesearch val-ue=each.usp.br type=hidden><input name=restrict value=Português type=hidden><!--<br>--><input name=q maxLength=255 size=12 title="Insira aqui o texto para buscar em each.usp.br usando o Google"><!--<br>--><!--<b>Busca na EACH</b>--><input border=0 name=sa alt="Buscar em each.usp.br usando o Google" src="EACH_arquivos/logo-google.jpg" title="Buscar em each.usp.br usando o Google" type=image></FORM><!-- Search Google --></td><td vAlign=top width="85%" align=right><table border=0 cellPadding=5 width="95%" align=center><tbody><tr><td class=content><table><tbody><tr><td colSpan=2><!-- INICIO DO DESTAQUE --><a href="#" name="conteudo" title="Conteúdo do site"></a><table class=eachDestaqueCorpo><tbody><tr><td><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>DESTAQUES</P></td></tr><tr><td class=eachDestaque><table bor-der=0><!-- INICIO DOS DESTAQUES --><tbody><tr><!-- destaque estude --><td width="15%" align=center><center><a title="Vídeo Estude na EACH" href="http://each.uspnet.usp.br/each/estudenaeach"><img border=0 src="EACH_arquivos/logo-estude-each.jpg" title="Vídeo Estude na EACH" height=80 alt="Vídeo Estude na EACH"><br><font size=-1 face=arial>Estude na EACH</font></a></center></td><!-- destaque exalunos --><td width="15%" align=center><center><a title="Cadastro de Ex-alunos" href="http://each.uspnet.usp.br/each/exalunos.php"><img border=0 src="EACH_arquivos/logo-exalunos.jpg" title="Cadastro de Ex-alunos"height=80 alt="Cadastro de Ex-alunos"><br><font size=-1 face=arial>Cadastro de Ex-alunos</font></a></center></td><!-- destaque mestrado --><td width="15%" align=center><center><a title="Processo Seletivo Mestrado Sistemas Comple-xos 2011" href="http://each.uspnet.usp.br/sistcomplexos/"><img border=0 src="EACH_arquivos/logo-ppgsc-inscricoes.jpg" title="Processo Seletivo Mestrado Sistemas Complexos 2011"height=70 alt="Processo Seletivo Mestrado Sistemas Complexos 2011"> <br><font size=-1 face=arial>Inscrições Abertas</font></a></center></td><!-- destaque PAE --><td width="15%" align=center><center><a title="Estágio PAE - Inscrições Abertas" href="http://each.uspnet.usp.br/each/pos-pae-inscricoes.php"><img border=0 src="EACH_arquivos/logo-pae.jpg" title="Estágio PAE - Inscrições Abertas"height=70 alt="Estágio PAE"><br><font size=-1 face=arial>PAE 2011 <br>Inscrições Aber-tas</font></a></center></td><!-- destaque CHT --><td width="15%" align=center><center><a title="Abrir Chamado Técnico" href="http://www.each.usp.br/chamados"><img border=0 src="EACH_arquivos/logo-cht.jpg" title="CHT Chamado Técnico"height=80 alt="CHT Chamado Téc-nico"><font size=-1 face=arial>Abrir Chamado Técnico</font></a></center></td><!-- destaque sala de imprensa --><td width="15%" align=center><center><a title="Sala de Imprensa" href="http://each.uspnet.usp.br/each/sala-imprensa.php"><img border=0 src="EACH_arquivos/logo-sala-imprensa.jpg" title="Sala de Imprensa"height=80 alt="Sala de Imprensa"><font size=-1 face=arial>Sala de Imprensa</font></a></center></td><!-- FIM DOS DESTAQUES --></tr></tbody></table></td><!--</tr>--></td></tr><tr><td><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>ACONTECE NA EACH</P></td></tr><tr><td class=eachDestaque><table><tbody><tr><td vAlign=top width="50%"><P class=eachDestaque>- &nbsp;<a title="Reitor da USP visita a EACH e Cursinho Pró-Universitário" href="http://each.uspnet.usp.br/each/noticia.php?id=953">Reitor da USP visita a EACH e Cur-sinho Pró-Universitário</a><br>- &nbsp;<a title="Pesquisa da EACH recebe prêmio internacio-nal" href="http://each.uspnet.usp.br/each/noticia.php?id=932">Pesquisa da EACH recebe prê-mio internacional</a><br>- &nbsp;<a title="EACH segue entre as unidades da USP com mais alunos vindos da rede pública de ensino" href="http://each.uspnet.usp.br/each/noticia.php?id=938">EACH segue entre as unidades da USP com mais alunos vindos da rede pública de ensino</a><br>- &nbsp;<a title="Lista de aprovados no programa Pró-Universidade" href="http://each.uspnet.usp.br/imprensa/aprovados.pdf">Lista de aprovados no programa Pró-Universidade</a><br>- &nbsp;<a title="Veja quem foi selecionado no projeto Cidade Constitu-cional IV" href="http://each.uspnet.usp.br/imprensa/cidadeconstitucional.pdf">Veja quem foi selecionado no projeto Cidade Constitucional IV</a><br>- &nbsp;<a title="Termina avaliação de comissão externa na EACH" href="http://each.uspnet.usp.br/each/noticia.php?id=944">Termina avaliação de comissão ex-terna na EACH</a><br>- &nbsp;<a title="Professor Pedro Bombonato visita a EACH e a apresen-ta o Programa de Pré-Iniciação Científica" href="http://each.uspnet.usp.br/each/noticia.php?id=945">Professor Pedro Bombonato visita a EACH e a apresenta o Programa de Pré-Iniciação Científica</a><br>- &nbsp;<a title="Horário de Atendimento - COSEAS-EACH" href="http://each.uspnet.usp.br/each/noticia.php?id=954">Horário de Atendimento | COSEAS-EACH</a><br></P></td><td vAlign=top width="50%"><P class=eachDestaque>- &nbsp;<a title="Espalhafatos com Humor - Improvisando com a EACH (23/10/2010 - 27/11/2010 - 9h00 a 13h00)" href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000485"> Espalhafatos com Humor | Improvisando com a EACH | (23/10/2010 - 27/11/2010 - 9h00 a 13h00)</a><br>- &nbsp;<a title="Exposição dos trabalhos vencedores da 18ª Edição do Programa Nascente - Sagão da Biblioteca (03/11/2010 - 12/11/2010 - 08h00 a 22h00)" href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000486"> Exposição dos traba-lhos vencedores da 18ª Edição do Programa Nascente | Sagão da Biblioteca (03/11/2010 - 12/11/2010 - 08h00 a 22h00)</a><br>- &nbsp;<a title="Dom Quixote Meeting 2010 - Auditório Azul, Vermelho e Verde - EACH (09/11/2010 - 10/11/2010 - 8h30 a 18h00)" href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000480"> Dom Quixote Meeting 2010 | Auditório Azul, Vermelho e Verde - EACH (09/11/2010 - 10/11/2010 - 8h30 a 18h00)</a><br>- &nbsp;<a title="1º Fórum sobre LIBRAS (27/11/2010 - 27/11/2010 - 09h00 a 13h00)" href="http://each.uspnet.usp.br/each/eventos-info.php?id=0000000487"> 1º Fórum so-bre LIBRAS | (27/11/2010 - 27/11/2010 - 09h00 a 13h00)</a><br></P></td></tr></tbody></table></td></tr></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br></td></tr><tr><td vAlign=top><!-- INICIO DO DESTAQUE --><table

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  33  

class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo colSpan=2><P class=eachDestaqueTitulo>DIRETORIA</P></td></tr><tr><td class=eachDestaque width="50%"><P class=eachDestaque>- &nbsp; <a title="Twitter da Diretoria" href="http://twitter.com/diretoriaeach">Twitter da Diretoria</a><br>- &nbsp; <a title="Comunicados da Diretoria" href="http://each.uspnet.usp.br/each/diretoria-comunicados.php">Comunicados da Diretoria</a><br>- &nbsp; <a title="Avaliação Externa" href="http://www.each.usp.br/diretoria/RelatoriosAvaliacoesEACH2010.pdf">Avaliação Exter-na</a><br></P></td><td class=eachDestaque><P class=eachDestaque>- &nbsp; <a title="Direto da Direção (DDD)" href="http://each.uspnet.usp.br/each/diretoria-ddd.php">Direto da Direção (DDD)</a><br>- &nbsp; <a title="Opinião" href="http://each.uspnet.usp.br/each/sala-imprensa.php#opiniao">Opinião</a><br></P></td></tr><tr><td class=eachDestaqueTermino colS-pan=2></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br></td><td vAlign=top><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo colSpan=2><P class=eachDestaqueTitulo>CONTATOS &nbsp;&nbsp;| &nbsp;TELEFONES</P></td></tr><tr><td class=eachDestaque width="50%"><P class=eachDestaque>- &nbsp; <a title="CONTATOS - Adminis-tração, com email" href="http://each.uspnet.usp.br/each/contatos-administracao.php">Administração <I><font color=red>com ema-il</font></I></a><br></P></td><td class=eachDestaque><P class=eachDestaque>- &nbsp; <a title="TELEFONES - Docentes" href="http://each.uspnet.usp.br/each/docentes-telefones.php">Docentes</a> <br>- &nbsp; <a title="TELEFONES - Coordenadores de Curso" href="http://each.uspnet.usp.br/each/coordenadores-telefones.php">Coordenadores de Cur-so</a> <br>- &nbsp; <a title="TELEFONES - Secretaria de Cursos" href="http://each.uspnet.usp.br/each/secretaria-cursos.php">Secretaria de Cursos</a> </P></td></tr><tr><td class=eachDestaqueTermino colS-pan=2></td></tr></tbody></table></td></tr><tr><td vAlign=middle colSpan=2><HR width="100%"></td></tr><tr><td vAlign=top><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. ADMINISTRATIVA</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; <a title="Concursos Públicos - Docentes" href="http://each.uspnet.usp.br/each/concursos-processos.php">Concursos Públicos | Docen-tes</a><br>- &nbsp; <a title="Concursos Públicos - Funcionários" href="http://each.uspnet.usp.br/each/concursos-publicos-funcionarios.php">Concursos Públi-cos | Funcionários</a><br>- &nbsp; <a title="Formulário para Cursos - Funcionários" href="http://each.uspnet.usp.br/each/download/formularios/formulario-cursos.doc">Formulário para Cursos | Funcionários</a> </P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. FINANCEIRA</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; <I>Aguarde!!</I><br></P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br></td><td vAlign=top><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. INFRA-ESTRUTURA</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; Dúvidas, sugestões de manutenção e consertos? Email para infra-each<img border=0 src="EACH_arquivos/email-usp-arroba.jpg" width=12 height=12><img border=0 src="EACH_arquivos/email-usp-host.jpg" width=36 height=11> </P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>A.T. ACADÊMICA</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; <a title="Atribuição Didática dos Cursos" href="http://each.uspnet.usp.br/each/cg-atribuicao-didatica.php">Atribuição Didática dos Cursos</a> <I><font color=red>novo</font></I><br>- &nbsp; <a title="Secretaria de Cursos" href="http://each.uspnet.usp.br/each/secretaria-cursos.php">Secretaria de Cursos</a> </P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br></td></tr><tr><td vAlign=middle colSpan=2><HR width="100%"></td></tr><tr><td vAlign=top><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>GRADUAÇÃO</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; <a title="Mural de Avisos aos Alunos" href="http://each.uspnet.usp.br/each/graduacao-destaques.php">Mural de Avisos aos Alunos</a> </P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>PESQUISA</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; Inscrições para os editais <a title="Inscrições para os editais - PIC" href="http://each.uspnet.usp.br/pesquisa/Edital-PIC-EACH-2010-2011.pdf">PIC</a> e <a title="Inscrições para os editais - PIBITi" href="http://each.uspnet.usp.br/pesquisa/Edital-PIBITI-EACH-2010-2011.pdf">PIBITi</a> 2010/2011 (até 16/04).<br></P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br></td><td vAlign=top><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>PÓS-GRADUAÇÃO</P></td></tr><tr><td class=eachDestaque><P class=eachDestaque>- &nbsp; <a title="Abertas as inscrições do pro-cesso seletivo 2011 | Mestrado em Sistemas Complexos" href="http://each.uspnet.usp.br/sistcomplexos/">Abertas as inscrições do processo seletivo 2011 | Mestrado em Sistemas Complexos</a> <I><font color=red>novo</font></I><br>- &nbsp; <a title="Confira os programas de Pós-Graduação da EACH" href="http://each.uspnet.usp.br/each/pos.php">Confira os programas de Pós-Graduação da EACH</a> <br></P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br><!-- INICIO DO DESTAQUE --><table class=eachDestaqueRosto><tbody><tr><td class=eachDestaqueTitulo><P class=eachDestaqueTitulo>CULTURA E EXTENSÃO</P></td></tr><tr><td class=eachDestaque><P

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  34  

class=eachDestaque>- &nbsp; <a title="Especialização em Psicologia Política | 2ª chamada" href="http://each.uspnet.usp.br/each/latosensu/psicologiapolitica/matricula.php">Especialização em Psicologia Política | 2ª chamada</a> <br>- &nbsp; <a title="UnATI - programação 2º semestre/2010" href="http://each.uspnet.usp.br/ccex/unati-2-2010.pdf">UnATI - programação 2º semestre/2010</a> <br>- &nbsp; <a title="Yoga Para Gestantes e Baby Yoga" href="http://each.uspnet.usp.br/each/noticia.php?id=886">Yoga Para Gestantes e Baby Yo-ga</a> </P></td></tr><tr><td class=eachDestaqueTermino></td></tr></tbody></table><!-- FIM DO DESTAQUE --><br></td></tr></tbody></table></td></tr></tr></tbody></table></td></tr></tbody></table><table border=0 cellSpacing=0 cellPadding=0 width="100%" height="5%"><tbody><tr height=2 bgCo-lor=#b2b2b2><td bgColor=#5384b2 height=2></td></tr><tr height=2 bgColor=#b2b2b2><td bgCo-lor=#61cde3 height=2></td></tr><tr height=3 bgColor=#b2b2b2><td bgColor=#ff922d height=3></td></tr><tr><td class=eachMenu><font size=1>Escola de Artes, Ciências e Humani-dades (USP Leste)<br>Rua Arlindo Béttio, 1000 - Ermelino Matarazzo - CEP: 03828-000</font></td></tr><tr height=3 bgColor=#b2b2b2><td bgColor=#ff922d height=3></td></tr><tr height=2 bgColor=#b2b2b2><td bgColor=#61cde3 height=2></td></tr><tr height=2 bgCo-lor=#b2b2b2><td bgColor=#5384b2 height=2></td></tr></tbody></table></BODY></HTML>

 ANEXO  5  -­‐  CÓDIGO  FONTE  JAVASCRIPT  ALTERADO  DO  SITE  DA  EACH  var menuID = 'ddmenu'; function accessible_menus_ie() { var sfEls = document.getElementById(menuID).getElementsByTagName('LI'); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? ' ': '') + 'sfhover'; this.parentNode.className+=(this.parentNode.className.length>0? ' ': '') + 'sf-hover'; this.className=this.className.replace(new RegExp('( ?|^)sub_menu\\b'), 'sub_mnu_sfhvr');} sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp('( ?|^)sfhover\\b'), ''); this.parentNode.className=this.parentNode.className.replace(new RegExp('( ?|^)sfhover\\b'), ''); this.className=this.className.replace(new RegExp('( ?|^)sub_mnu_sfhvr\\b'), 'sub_menu'); }}} function accessible_menus_non_ie() { var ddMenu = document.getElementById(menuID); ddMenu.className = ddMenu.className.replace(new RegExp('(^|\\s)'+'jsoff'+'(\\s|$)'), ''); var mcEls = document.getElementById(menuID).getElementsByTagName('A'); for (var i=0; i<mcEls.length; i++) { mcEls[i].onfocus=function() { this.className = this.className ? this.className + ' sffocus' : 'sffocus'; //a:focus this.parentNode.className = this.parentNode.className ? ' sffocusparent' : 'sffocus-parent'; //li < a:focus this.parentNode.parentNode.className = this.parentNode.parentNode.className ? ' sffocusparent' : 'sffocusparent'; //ul < li < a:focus if(this.parentNode.parentNode.parentNode.nodeName == 'LI') { //li < ul < li < a:focus this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className ? ' sffocusparent' : 'sffocusparent'; //li < ul < li < a:focus this.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.className ? ' sffocusparent' : 'sffocus-parent'; //ul < li < ul < li < a:focus if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') { //li < ul < li < ul < li < a:focus this.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.className ? ' sffocusparent' : 'sffocusparent'; //li < ul < li < ul < li < a:focus this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className ? ' sffocusparent' : 'sffocusparent'; //ul < li < ul < li < ul < li < a:focus }}} mcEls[i].onblur = function() { this.className = this.className.replace(new RegExp('(^|\\s)'+'sffocus'+'(\\s|$)'), ''); this.parentNode.className = this.parentNode.className.replace(new Re-gExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), ''); this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(new Re-gExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), ''); if(this.parentNode.parentNode.parentNode.nodeName == 'LI') { this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className.replace(new Re-gExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), ''); this.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.className.replace(new Re-gExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), ''); if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') { this.parentNode.parentNode.parentNode.parentNode.parentNode.className =

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  35  

this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new Re-gExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), ''); this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), ''); }}}}} // only ie needs the sfHover script. all need the accessibility script... if(typeof window.addEventListener != 'undefined') { //.. gecko, safari, konqueror and standard window.addEventListener('load', accessible_menus_non_ie, false);} else if(typeof document.addEventListener != 'undefined') { //.. opera 7 document.addEventListener('load', accessible_menus_non_ie, false);} else if(typeof window.attachEvent != 'undefined') { //.. win/ie window.attachEvent('onload', accessible_menus_ie); window.attachEvent('onload', accessible_menus_non_ie);} //** remove this condition to degrade older browsers else { //.. mac/ie5 and anything else that gets this far if(typeof window.onload == 'function') { //if there's an existing onload function var existing = window.onload; //store it window.onload = function() { //add new onload handler existing(); //call existing onload function //call generic onload function accessible_menus_ie(); accessible_menus_non_ie();}; } else { window.onload = function() { //setup onload function accessible_menus_ie(); accessible_menus_non_ie();}; }}

 ANEXO  6  -­‐  CÓDIGO  FONTE  CSS  ALTERADO  DO  SITE  DA  EACH  #ddmenu a:link {text-decoration:none} #ddmenu a:visited {text-decoration:none} #ddmenu a:hover, #ddmenu a:focus, #ddmenu a:active {text-decoration:none} /* --- TOP LEVEL MENU STYLES --- */ #ddmenu {float:left; display:inline; width:100%; padding:0; font-size: 100%;} #ddmenu li { position:relative; float:left; font:10px verdana; font-size:10px; font-weight:normal; background-color:#5384b2; list-style-type:none; width:150px; height:23px; border-width:1px 1px 0; border-style:solid; border-color:#ccc; vertical-align:middle; padding: 0px;} #ddmenu li a {display:block; color:#fff; vertical-align:middle; padding:5px; font:10px verdana;} /* --- SUB MENU ITEMS --- */ #ddmenu li li { font-weight:normal; z-index:20; background-color:#5384b2; width:150px; border-width:1px 1px 0; border-style:solid; border-color:#ccc; height:100%; padding: 0px; font:10px verdana; padding-top:2px; padding-bottom:2px;} #ddmenu li li a {color:#fff padding:5px; font:10px verdana;} #ddmenu ul > li {display:block; float:none} /* for Opera */ /* --- SUB MENU INITIAL POSITION --- */ #ddmenu ul {position:absolute; left:-9999px; top:100%; padding:0; border:none; list-style-type:none;} /*for modern browsers:*/ #ddmenu li > ul {top:auto; width:auto} /* --- SHOW SUB MENU --- */ /*For ie6:*/ #ddmenu li.sfhover ul,#ddmenu li a:active ul,#ddmenu li.sffocusparent ul,#ddmenu li a.sffocus ul {left:149} /* for modern browsers + IE7:*/ #ddmenu li:hover > ul,#ddmenu li.sfhover > ul,#ddmenu li.sffocusparent > ul,#ddmenu li a:active > ul,#ddmenu li a:focus + ul,#ddmenu li a.sffocus + ul {left:149} /* --- SUB LEVEL positions for JavaScript OFF --- */ /* --- The focus position for submenu anchors --- */ #ddmenu.jsoff li li a:focus, #ddmenu.jsoff li li a:active { /* --- THE FOCUS POSITION FOR FIRST SUB MENU ANCHORS --- */ position:relative; left:9999px; top:-1px; z-index:21;} /* --- The hovered position for submenu anchors when the anchor is in focus --- */ #ddmenu.jsoff li:hover li a:focus, #ddmenu.jsoff li:hover li a:active { position:relative; left:auto; top:-1px; margin-left:0} #ddmenu.jsoff li:hover a:focus + ul { /* --- THE POSITION OF SUB MENU, WHEN THE PARENT IS FOCUSSED AND HOVERED --- */ margin-left:0px;} #ddmenu.jsoff li li a:focus + ul { /* --- THE POSITION OF SUB MENU, WHEN THE PARENT IS

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  36  

FOCUSSED FOR JavaScript OFF --- */ top:-1px; left:12em; margin-left:10000px;} /* --- BACKGROUND IMAGES OF PARENT ITEMS --- */ #ddmenu li a.mum {background-color:#5384b2;} #ddmenu ul li a.mum {background-color:#5384b2;} /* --- LINK HOVER STYLES --- */ #ddmenu li a:link, #ddmenu li a:visited {background-color:transparent; color:#fff;} #ddmenu li a:hover, #ddmenu li:hover a, #ddmenu li a:focus, #ddmenu li a:active, #ddmenu li.sfhover a, #ddmenu li a.sffocus, #ddmenu li.sffocusparent a {background-color:#5384b2; color:#000;} #ddmenu li li a:link, #ddmenu li li a:visited {background-color:transparent; color:#fff;} #ddmenu ul li a:hover, #ddmenu ul li:hover a, #ddmenu ul li a:focus, #ddmenu ul li a:active, #ddmenu ul li.sfhover a, #ddmenu ul li a.sffocus, #ddmenu ul li.sffocusparent a {background-color:#5384b2; color:#000;}

 ANEXO  7-­‐  TABELA  DE  DADOS  COMPLETA  DO  QUESTIONÁRIO  APLICADO  

Data e hora Questão 1

Questão 2 Questão 3

Questão 4 Questão 5 Questão 6

Questão 7

10/28/2010 9:48:18

Visão parcial-mente reduzida

três horas ou mais Tamanho do texto Sim

Tamanho da fonte (textos) GPP

10/28/2010 9:53:59

Visão parcial-mente reduzida

até duas horas

Site incompreensível por leitor de tela Não

Tamanho do texto, Grande quantidade de links/menus até o conteúdo principal

Tamanho da fonte (textos), Compatibilidade com leitores de tela, Criação de teclas de atalho, de forma intuitiva, a fim de facilitar o acesso no site da EACH. E a criação de de cabeçalhos no início do con-téudo das notícias, faciitanto a leitura de quem usa softwares leitores de tela. LZT

10/28/2010 10:16:17 Daltonismo N/A

Site incompreensível por leitor de tela Não

Tamanho do texto, Site é parcialmente ilegível por leitor de tela

Quantidade de links/menus até o conteúdo principal GPP

10/28/2010 10:16:50

Visão parcial-mente reduzida

até duas horas

Site incompreensível por leitor de tela Não

Site é totalmente ilegível por leitor de tela Tamanho da fonte (textos) GA

10/28/2010 10:19:19 Daltonismo

três horas ou mais

Não possuo dificulda-des Sim

Quantidade de links/menus até o conteúdo principal N/A

10/28/2010 10:19:40

Visão parcial-mente reduzida

três horas ou mais

Não possuo dificulda-des Sim

GPP

10/28/2010 11:53:43

Visão parcial-mente reduzida

três horas ou mais Tamanho do texto Sim

CAF

10/28/2010 13:12:22

Visão parcial-mente reduzida

três horas ou mais

Grande quantidade de links/menus até o conteúdo Não

Tamanho do texto, Site é parcialmente ilegível por leitor de tela, Grande quantidade de links/menus até o conteúdo principal

Tamanho da fonte (textos), Compatibilidade com leitores de tela, Quantidade de links/menus até o conteúdo principal GER

10/28/2010 14:07:12 Daltonismo

três horas ou mais

Contraste entre texto e fundo Sim

OBS

10/28/2010 14:33:22 Daltonismo

até uma hora

Não possuo dificulda-des Não

Tamanho do texto, Grande quantidade de links/menus até o conteúdo principal

Tamanho da fonte (textos), Quantidade de links/menus até o conteúdo principal CAF

10/28/2010 20:43:00

Visão parcial-mente reduzida

três horas ou mais

falta de clareza dos links e localização das informações Não

Grande quantidade de links/menus até o conteúdo principal

GA

10/28/2010 21:37:07

Visão parcial-mente reduzida

três horas ou mais

Sites pouco esclare-cedores (não objeti-vos) Não

Contraste entre fundo e cores, Grande quanti-dade de links/menus até o conteúdo principal

Quantidade de links/menus até o conteúdo principal LZT

10/28/2010 22:00:34

Visão parcial-mente reduzida

três horas ou mais lerdeza da rede Não problema da rede acesso GPP

10/28/2010 22:15:41

Visão parcial-mente reduzida

três horas ou mais

Não possuo dificulda-des Sim

MKT

10/28/2010 23:28:05 Daltonismo

até duas horas

Não possuo dificulda-des Sim

Quantidade de links/menus até o conteúdo principal SI

10/28/2010 23:32:12

Visão parcial-mente reduzida

até duas horas Tamanho do texto Sim

Tamanho da fonte (textos) GA

10/28/2010 23:43:19

Visão parcial-mente reduzida

até duas horas

Sou portador de Astimagmatismo o que acaba dificultan-do muito, apesar de Não

Compatibilidade com leitores de tela LCN

UNIVERSIDADE  DE  SÃO  PAULO  ESCOLA  DE  ARTES,  CIÊNCIAS  E  HUMANIDADES  

 

ACH2042  –  RESOLUÇÃO  DE  PROBLEMAS   I I  –  TURMA  L4  –  GRUPO  ACESSIBILIDADE  VISUAL  37  

óculos. 10/29/2010

10:43:15 Visão parcial-mente reduzida

três horas ou mais

Não possuo dificulda-des Não

Dificuldade de encon-trar informações Organização OBS

10/29/2010 13:24:11

Visão parcial-mente reduzida

três horas ou mais

Grande quantidade de links/menus até o conteúdo Sim

Tamanho da fonte (textos) GA

10/29/2010 20:36:27

Visão parcial-mente reduzida

três horas ou mais Tamanho do texto Não Tamanho do texto Tamanho da fonte (textos) LCN

10/29/2010 21:00:13

Visão totalmen-te reduzida

três horas ou mais

Não possuo dificulda-des Não

Contraste entre fundo e cores Tamanho da fonte (textos) LCN

10/29/2010 21:27:55

Visão parcial-mente reduzida

até uma hora Tamanho do texto Sim

LZT

10/29/2010 22:24:36

Visão parcial-mente reduzida

três horas ou mais

Não possuo dificulda-des Sim

GPP

10/30/2010 0:51:54

Visão parcial-mente reduzida

até uma hora Tamanho do texto Sim

MKT

10/30/2010 15:01:27

Visão parcial-mente reduzida

até uma hora

Não possuo dificulda-des Sim

Compatibilidade com leitores de tela LCN

10/31/2010 16:28:22

Visão parcial-mente reduzida

três horas ou mais

Não possuo dificulda-des Não

Grande quantidade de links/menus até o conteúdo principal

Compatibilidade com leitores de tela, Quantidade de links/menus até o conteúdo principal LCN

10/31/2010 19:40:43

Visão parcial-mente reduzida

três horas ou mais

Contraste entre texto e fundo Sim

LCN

11/2/2010 0:26:33 Daltonismo

até duas horas

Não possuo dificulda-des Não

Tamanho do texto, Grande quantidade de links/menus até o conteúdo principal

Tamanho da fonte (textos), Compatibilidade com leitores de tela, Quantidade de links/menus até o conteúdo principal SI

11/2/2010 12:12:03

Visão parcial-mente reduzida

até uma hora

Não possuo dificulda-des Sim

LZT

11/4/2010 13:38:52

Visão parcial-mente reduzida

até meia hora

Não possuo dificulda-des Sim

Tamanho da fonte (textos), Compatibilidade com leitores de tela, Quantidade de links/menus até o conteúdo principal, alem de tudo isso o sit é muito complexo e dificulta a localização LCN