Este documento apresenta uma análise da página inicial do site da Universidade Estadual de Londrina (UEL) e as reformulações realizadas para torná-la mais acessível e usável. Inicialmente, são apontados problemas como ausência de texto alternativo em imagens e uso de scripts para links. Em seguida, são detalhadas validações e readequações feitas com base em HTML5 e CSS3 para melhorar a semântica, navegação, leitura por tela e conformidade com critérios de acessibilidade.
Análise e reformulação da página inicial do site uel.br com base nas premissas de A&U utilizando HTML5 e CSS3
1. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:50
Frederico de Figueiredo Siena
kardeco@gmail.com
Hericson Ramos Forti
sis4web@gmail.com
Rennan Martini Rodrigues
1
martini.rennan@gmail.com
2. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:50
Licença de Uso
Este material está
disponibilizado sob a
licença Creative
Commons, e pode ser
distribuído conforme
especificado no quadro
ao lado.
A propriedade das imagens utilizadas neste material, são de
direito de seus respectivos autores/proprietários. Esta
licença não se aplica a nenhuma imagem exibida - para
utilização das mesmas obtenha autorização junto ao(s)
autor(es).
http://creativecommons.org/licenses/disclaimer-popup?lang=pt 2
http://creativecommons.org/licenses/by-nc-sa/2.5/br/legalcode
3. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
Roteiro
Acessibilidade e Usabilidade
Análise inicial do site www.uel.br
Validações realizadas
Readequações realizadas
Conclusão
Perguntas
3
4. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
Acessibilidade e Usabilidade
Acessibilidade para WEB é permitir que os mais
diferentes tipos de pessoas, com as mais
diferentes tipos de deficiências e limitações
possam participar do processo de inserção como
cidadão. Este processo consiste do ato do
indivíduo não apenas como agente passivo, mas
capaz de navegar e contribuir com o conteúdo,
além de adaptar a “exibição” às suas
necessidades, porém não garante que o agora
usuário esteja satisfeito e apto a utilizar os
serviços de modo eficiente visando atingir seu
objetivo inicial. Neste aspecto a Usabilidade tem
papel fundamental em garantir a Acessibilidade
com eficiência. 4
5. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
Análise inicial do site www.uel.br
Das 25 imagens presentes, nenhuma possui
legenda, não têm texto alternativo e não fazem
uso do atributo "alt".
Dos 5 links que são sendo ativados unicamente
através de scripts, o conteúdo do atributo "href"
nos links deveria indicar um recurso válido, ou
seja, uma direção (URL) à qual se pode atender
mesmo quando não se consegue atender aos
scripts.
5
6. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
Análise inicial do site www.uel.br
Os seguintes erros listados visam atender o
obstáculo de acessibilidade no Nível de
Prioridade 2:
A página não contém uma declaração do tipo de
documento (DTD);
A folha de estilos contém erros;
Foram detectados tamanhos de fonte definidos
em px nos valores das folhas de estilo;
Existem 27 links com o atributo "target";
6
7. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
Análise inicial do site www.uel.br
Existem 27 links com o atributo "target";
Dos dois 2 formulários existentes nenhuma
etiqueta <label> foi definida.
Os próximos erros relatados visam atender o
obstáculo de acessibilidade no Nível de
Prioridade 3:
Não se encontra especificado o idioma principal
na tag <HTML>. Isso dificulta a interpretação
correta para a utilização de tecnologias
assistivas, como é o caso do leitor de telas NVDA,
que não consegue ler de forma correta as
palavras do idioma português. 7
8. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
Análise inicial do site www.uel.br
Além de todos esses erros listados também nota-
se que o design do portal não atende as
necessidades de usabilidade.
A informação está concentrada em blocos
pequenos centralizados na tela, dificultando a
navegação entre os itens.
8
9. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:51
www.uel.br acessado em 01/11/2011
9
10. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:52
Validações Realizadas
10
11. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:52
Validações Realizadas
11
12. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:53
Validações Realizadas
12
13. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:54
Validações Realizadas
13
14. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:55
Validações Realizadas
14
15. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:56
Readequações realizadas
Utilização da marcação HTML 5 para adoção de
elementos com maior semântica;
Remoção de atributos obsoletos na linguagem,
como o atributo “target”;
Utilização de roles para aplicação web rica e
acessível (ARIA);
Utilização de atributos acessíveis em formulários,
como o “accesskey” e o “tabindex”;
Readequação do layout sem afetar a estrutura
informacional da página, para uma melhor
compreensão da disposição de cada elemento e
dos blocos de informação;
15
16. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:56
Readequações realizadas
Utilização de conteúdos alternativos caso o
navegador não ofereça suporte a tag <script>;
Representação textual das imagens através do
atributo “alt”, contextualizando a foto
selecionada;
Padronização de tamanhos de fontes para texto
com a medida em “EM” para se adequar aos
mais diversos tipos de dispositivos;
Melhor pontuação no relatório de validadores de
acessibilidade, de preferência nos 3 níveis de
prioridade.
16
17. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:56
Conclusão
O HTML5 com todas as novidades ainda continua com
limitações de acessibilidade. Como sua utilização é um
padrão de mercado, a supressão destas dificuldades em
adequar o reconhecimento do conteúdo a tecnologias
assistivas, outras iniciativas e novos consórcios como o WAI
são formados, gerando novas marcações, permitindo aos
leitores de tela informar o conteúdo que o usuário irá
encontrar em cada seção do código. Esta é apenas uma das
aplicações do ARIA, que possui outras propriedades para
permitir que elementos interativos sejam acessíveis e
interoperáveis. 17
18. Análise e reformulação da página inicial do site uel.br com
base nas premissas de A&U utilizando HTML5 e CSS3 07/03/12 - 21:41:56
D ú v i d a s
18