Acessibilidade no site da each
-
Upload
lucas-machado -
Category
Documents
-
view
328 -
download
2
Transcript of Acessibilidade no site da each
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> 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&id=usptuEbKoFLNQZqmRo7NMlCcgMh9FnVK6qIG1gWcF1qYHk.&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> <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> <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> <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> <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> <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> <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> <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> <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> <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> 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> 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> 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> 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> <A href="http://twitter.com/diretoriaeach">Twitter da Diretoria</A><BR><IMG border=0 src="EACH_arquivos/fbullet.gif" width=10 height=8> <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> <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> <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> <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 | 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> <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> <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> <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> <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> <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> <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> <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> <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> 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> <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> <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> <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> 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> <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> <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> <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> <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> <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> 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&id=usptuEbKoFLNQZqmRo7NMlCcgMh9FnVK6qIG1gWcF1qYHk.&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> <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>- <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>- <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>- <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>- <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>- <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>- <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>- <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>- <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>- <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>- <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>- <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>- <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>- <a title="Twitter da Diretoria" href="http://twitter.com/diretoriaeach">Twitter da Diretoria</a><br>- <a title="Comunicados da Diretoria" href="http://each.uspnet.usp.br/each/diretoria-comunicados.php">Comunicados da Diretoria</a><br>- <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>- <a title="Direto da Direção (DDD)" href="http://each.uspnet.usp.br/each/diretoria-ddd.php">Direto da Direção (DDD)</a><br>- <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 | TELEFONES</P></td></tr><tr><td class=eachDestaque width="50%"><P class=eachDestaque>- <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>- <a title="TELEFONES - Docentes" href="http://each.uspnet.usp.br/each/docentes-telefones.php">Docentes</a> <br>- <a title="TELEFONES - Coordenadores de Curso" href="http://each.uspnet.usp.br/each/coordenadores-telefones.php">Coordenadores de Cur-so</a> <br>- <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>- <a title="Concursos Públicos - Docentes" href="http://each.uspnet.usp.br/each/concursos-processos.php">Concursos Públicos | Docen-tes</a><br>- <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>- <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>- <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>- 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>- <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>- <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>- <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>- 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>- <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>- <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>- <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>- <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>- <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