Discussion on Atividade 5 - Análise de estilos de interface da web 2.0 com o auxílio de avaliadores automáticos

[pitersmacri]

Grupo: Piters M. Olivera e Douglas Limeira

- Site analisado: http://www.aprex.com.br/
- Avaliadores utilizados: DaSilva e Examinator

O site da Aprex, segundo o site americano CNN Money (que faz parte da
famosa rede de tv norte-americana CNN), esteve em 2007 na lista dos 31
melhores sites fora dos EUA com Web 2.0 (mais especificamente fazendo
parte do Business 2.0).

* Utilizando o Examinator:

Segundo os testes do Examinator, o site da Aprex não passou da bateria
de testes para prioridade 1, pois apresenta problemas com declarações
de javascript
(não utiliza a declaração <noscript> para contrapôr a utilização da
declaração <script>), imagens sem legendas (falta o uso do atributo
"alt" ou "longdesc" para identificar o elemento não textual) e links
ativados com javascript (alguns navegadores não usam javascript
ativado, o que pode causar problema de acessibilidade e usabilidade).
Um requisito de quatro foram totalmente completados.

Na prioridade 2 do Examinator, apenas três de doze requisitos foram
cumpridos. A
manipulação de eventos (pode prejudicar o uso do mouse), utilização de
medidas absolutas (uso de CSS com medidas em pixels e pontos),
Validação do código das folhas de estilo CSS, Utilização de CSS,
notação de atributos obsoletos abolidos pela W3C, Atributos de
apresentação (uso de atributos "<font>", "<size>"), erros na validação
do código (X)HTML, utilização de tabelas para maquetar a página
(tabela-layout) e links de mesmo nome com destinos diferentes.

Na prioridade 3, um de três requisitos foram
completados. O uso de muitos links redundantes e falta de
identificação de idioma dos documentos resultaram em pontos falhos.

* Utilizando o DaSilva:

O avaliador DaSilva utiliza um método um pouco diferente do
Examinator. Assim como o Examinator, o DaSilva também aponta os erros
de prioridade, mas identifica a linha no código fonte que contém o
erro, facilitando a correção por parte dos administradores. Outra
característica que ajuda o administrador do site são os avisos de
recomendações para melhorias ou mudanças no site.

Nos testes de prioridade 1 (um ou mais grupos de usuários poderão
ficar impossibilitados de acessar as informações contidas no
documento), foram encontrados 23 erros no código fonte e 38 avisos de
recomendação. Links redundantes, falta de identificação do idioma do
documento e falta de identificação textual para as imagens foram os
erros apontados.

Já no teste de prioridade 2 (a satisfação desse tipo de pontos
promoverá a remoção
de barreiras significativas ao acesso a documentos disponíveis na
Web), foram identificados 51 erros no código fonte e 44 avisos de
recomendação. Uso do CSS com unidades absolutas (pixels ou pontos),
não especificação de respostas e eventos e má utilização dos
cabeçalhos (a falta de hierarquia promove a desorganização do
conteúdo) foram os problemas encontrados.

No teste de prioridade 3 (a satisfação deste tipo de pontos irá
melhorar o
acesso a documentos armazenados na Web), nenhum erro foi encontrado e
foram emitidos 40 avisos, mostrando que o site da Aprex está dentro do
que é esperado pela Web 2.0.

[hermes]

Aluno: Hermes Ribeiro Martins
Site analisado: http://www.flickr.com
Analisadores: Da silva, examinator!

O site da web 2.0 analisado foi o flickr.com. O flickr.com é um site
especializado em guardar, organizar, procurar e compartilhar fotos
online, com ele você pode organizar álbuns e compartilhar fotos com
amigos e familia, e ainda procurar por outras fotos e fotógrafos.
Depois da analise dos sites, chegamos a uma conclusão, o site
flickr.com precisa melhorar sua acessibilidade.
Precisa-se utilizar mais o atributo "alt" em cada imagem (fornecendo
um equivalente textual para cada imagem pois, há falta de "legenda" em
algumas imagens, ou seja, falta um texto alternativo), se a imagem for
muito complexa deve-se utilizar o recurso "longdesc" ao invés do"alt"
para descrevê-la.
Precisa-se melhorar na questão da apresentação, o site utiliza
linguagem de programação (x)html para controlar o estilo e a forma de
apresentação da página, e o recomendado é utilizar o CSS para
controlar o estilo da página e o (x)html para estruturar o conteudo da
página. Outro quesito que se deve melhorar é a questão do não uso de
cabeçalhos, o flickr.com não usa nenhum cabeçalho e isso dificulta a
navegação pelas pessoas que fazem uso das tecnologias de apoio para
poder acessar os sites.
Precisa-se melhorar no quesito da não especificação do idioma
principal, deve-se indicar o idioma principal em todas as páginas.
Outro ponto que o site precisa melhorar é no fato que se deve associar
os rotulos aos respectivos controles dos formularios, e para isso
precisa-se usar o elemento "label", ao utilizar esse comando, as
pessoas que usam leitores de tela não terão problemas ao ler o
formulário.
O site Flickr.com apresenta elementos positivos também, como é o caso
do objetivo de cada link estar claramante indentificado (é essencial
para as pessoas que utilizam o site saberem onde estão "indo" ao
clicar nos links),
da não utilização de medidas absolutas (usa-se as medidas relativas,
no qual o usuário da página pode reduzir ou ampliar o tamanho dos
elementos que compõe a página de acordo com as suas necessidades,
provocando ao usuário uma certa sensação de "poder" ao controlar da
melhor maneira de visualizar o site), da página ter um titulo que
parece claro, descritivo e conciso, de cada bloco de informação
possuir em média 7 palavras (grandes blocos de informação dificultam a
compreensão).
Bom, existe muita coisa para ser melhorada no site flickr.com em
relação a questão da acessibilidade, mas o site está no caminho certo,
não foram encontrados muitos erros pelos sites analisadores que foram
usados por mim para verificação do Flickr.com, ao todo foram 12 erros
que deverão ser corrigidos para que os usuários possam ter uma
acessibilidade melhor ao conteudo oferecido pelo site.

[Luis Gustavo]

Aluno: Luis Gustavo Pessoa Lacombe
Site: www.apontador.com.br

Analisando o site acima com o auxílio dos avaliadores online podemos
destacar alguns pontos principais que foram discutidos em sala de aula
e sugerir algumas mudanças de interface.
1. Um item bem destacado nos avaliadores é a identificação do
principal idioma utilizada nos documentos. Essa identificação é
especificada na expressão HTML. Os mecanismos de busca podem utilizar
essa informação para separar páginas de um determinado idioma de
acordo com o que o usuário determinar. Por exemplo, podemos pesquisar
no Google somente páginas em português e para que o site saiba quais
são essas páginas, a identificação do idioma no HTML vai ser usada
justamente para fazer essa identificação.
2. Fornecer um equivalente textual a cada imagem para possibilitar
mecanismos de busca a pesquisar imagens no site. Mas em se tratando de
acessibilidade, é importante usar essas identificações de imagens
principalmente para acesso a usuários cegos que precisam utilizar
softwares especiais. Esses programas “lêem” as tags especiais do site
e fornecem informações de acordo com o que está escrito dentro de
caixas de texto assim como em imagens.
3. Quando projetamos um site, temos que ter em mente que existem
inúmeras versões de navegadores, algumas desatualizadas.
Conseqüentemente novas tecnologias, principalmente da web 2.0 podem
não ser compatíveis com esses navegadores. Garantir a navegabilidade
do site é essencial para manter o usuário “ligado” nele e assim
divulgar melhor o conteúdo. O site em questão usa frames mas deveria
também fazer o uso de no frames afim de garantir a visualização sem
maiores transtornos dos usuários que utilizam browsers não compatível
com essa tecnologia.
4. Continuando a questão de frames, sua identificação também é
importante e podemos fazê-lo através de um título.
5. Fornecer equivalentes textuais para sons (reproduzidos ou não com
interação do usuário), arquivos de áudio independentes, trilhas áudio
de vídeo e trechos de vídeo para beneficiar principalmente os
deficientes visuais que, como dito anteriormente, utilizam programas
que baseiam a informação dada justamente nessas identificações.
6. A folha de estilo em cascata (CSS) é um recurso bastante utilizado
na web 2.0, mas devemos lembrar que o site deve estar formatado de tal
maneira que sua visualização possa ser feita sem CSS afim de
contornar alguma incompatibilidade do browser ou problemas coma rede.
7. A utilização de valores relativos no tamanho dos objetos faz com
que os problemas de visualização da página diminuam, contornando a
questão da definição do monitor.

As descrições acima abordam aspectos mais técnicos, é importante
também observar o layout e sua funcionalidade de acordo com o que o
site se propõe a oferecer, algo que não podemos obter de um avaliador
online.
Podemos observar que se trata de uma página cuja principal finalidade
é oferecer serviços de endereços de várias localidades e de
restaurantes, casas de show, etc. O contraste da página com o fundo é
boa e discreta, algo suave e sem excessos. Assim que a página é
carregada, fica nítida a caixa de texto aonde devemos digitar o
endereço desejado que inclusive já contém o cursor, atitude bem direta
e que reflete o principal objetivo do site.
Logo abaixo desta seção, as coisas ficam mais confusas. Um menu
lateral melhor dividido deixaria mais organizados os links. Essa
divisão poderia ser feita por tipo de serviço assim como tipo de
localidade (bares, restaurantes, casas de shows). Como seria muita
informação, um menu que se expande ficaria bem no contexto da página.
As publicidades estão no rodapé, algo não recomendado e que pouco as
destacam, dando assim pouco retorno. O ideal era ter banners laterais
opostos ao menu em uma DIV própria para elas eno meio do site um
pequeno explicativo das vantagens de acessar os serviços e com um link
no final para quem quiser saber mais.
Uma listagem confusa das cidades poderia que aparece no meio do site
poderia ser melhor organizada em um Combo ou simplesmente mostrando ao
usuário uma caixa de texto de procura aonde o mesmo iria digitar no
nome da cidade e assim o site poderia oferecer as opções relativas a
cidade. Para ocupar o espaço vazio, imagens com lugares legais e
publicidades de sítios históricos poderia fazer com que o internauta
tivesse interesse em pesquisar e assim navegar por mais links.

[Wyllamys Cavalcante]

Alunos : Luan Rocha
Wyllamys Cavalcante

Site analisado: http://br.msn.com/
Analisadores: DaSilva e W3C oficial (CSS também)

No "validator" W3C oficial, o site foi aprovado tanto nos "markups"
que garantem a integridade XHTML como também foi aprovado com sucesso
na parte de CSS, apenas foi reprovado em alguns testes em caso de
acesso móvel, como redimensionamento das imagens, espaçamento das
mesmas e etc.

No analisador DaSilva, foram acusados alguns problemas com imagens
por conta da falta de sua especificação, como por exemplo a falta de
uso da tag alt. Também poderia ocorrer problemas de visualização de
certas porções da página, como por exemplo a dificuldade de se ler um
texto caso seja retirado seu respectivo CSS.

É notável que o site msn.com enquadra-se um pouco no estilo da web
2.0, analisando-o como um só ele fica de fora de alguns aspectos, como
participação por exemplo (vc já viu algum usuário do dia-a-dia
atualizando a página do msn?), mas se você analisar o contexto em que
o site está envolvido nota-se o estilo web 2.0. Como exemplo,
atualmente é oferecido o pacote Windows Live (http://get.live.com/mail/
options), onde se tem email (aplicação em potencial de uso em massa
rodando na "plataforma web"), spaces (interação), compartilhamento de
fotos e etc.

[Ricardo]

Grupo:
Ricardo Anastácio de Souza
Janaína Militão do Nascimento

Site analisado: http://www.brasilwiki.com.br/
Site para Avaliação: Oficial W3C (CSS) e DaSilva

Descrição do site: O BrasilWiki é um jornal on-line cujas notícias são
incluídas pelos usuários.

* Utilizando o W3C (CSS):

Não foram encontrados erros, porém muitas advertências, todas simples
sem muita relevância, exemplo: mesma cor de fundo e cor da borda.
Neste teste o validador da W3C levou em conta somente o código CSS;
porém pude notar que o layout do site foi desenvolvido em tabelas, não
aconselhado para os padrões de acessibilidade.

Avaliador DaSilva:

O site apresentou problemas como:
- erros de declarações de javascript;
- falta de utilização de medinas relativas pt/px no CSS;
- Não declaração do tipo do documento no topo do código;
- Falta da definição do idioma; e
- Utilização de alguns elementos utrapassados segundo a W3C.

Colocação:

Não só este, como outros sites que avaliei, foram encontrados erros
semelhantes e básicos dentro da órbita dos padrões de acessibilidade,
seja um site brasileiro como este ou até mesmo o google docs e o
orkut. Já no que diz respeito a tabulação entre os componentes
(conteúdos) do site, demonstrou-se bem organizado.

A pesar dos avaliadores não destacarem quase nada sobre o estilo da
interface, linha de comando, menu, etc. (o que seria muito difícil); o
site avaliado conseguiu aliar um bom uso da interface com facilidade
para o usuário encontrar os conteúdos de maneira rápida sem precisar
está retornando, para ajudar essa disponibilidade constante os menus
contribuem muito, já que estão sempre visíveis para o usuário em todas
as páginas, um problema porém foi a má distribuição por categorias/
grupos nos menus, ficando tudo misturado e consequinte dificultando a
leitura pesquisa do usuário.
Felizmente, essa atividade serviu-me para aliviar o grande peso em
achar que como futuro programador para WEB ainda não sabia nada de Web
2.0 (principalmente no tocante a acessibilidade), pois notei que até
mesmo os grandes sites / grandes empresas, na maioria das vezes se
distanciam desses padrões. Como disse Fabiano Pereira do
imasters.com.br: "a WEB 2.0, verdadeiramente, ainda é um bebê!"

[Luciano]

Tarefa 5.
Aluno: Luciano O. Wanderley


Site: www.congregacionalbessa.com.br

Primeiro, as análises dos sites.

1. www.dasilva.org.br/
Listou 35 erros, sendo 11 na prioridade 1, 18 na prioridade 2 e 6 na
prioridade 3, além de 85 avisos se forem observados os quesitos
necessários para o E-GOV.
O site apresenta diversos erros em sua estrutura, fazendo com que
tenha essa quantidade de erros.
Alguns erros são primários, tais como utilizar elementos ultrapassados
pelo W3C e formatar o lay-out da página com table. Além de faltar a
informação do idioma da página no início do documento.

2. www.sidar.org/hera/
Conseguiu listar outros erros, tais como: imagens sem textos
alternativos, falta de folha de estilo (CSS).
Os erros primários de elementos obsoletos foram detectados.

3. www.acesso.umic.pt/webax/examinator.php
Conseguiu encontrar erros, tais como a não utilização de qualquer tipo
de tag de cabeçalho (h1 ... h6), e os mesmos erros listados nos sites
anteriores.

Minha conclusão.

O site é realmente muito mal feito, e não procura seguir padrão algum.
O site foi criado em 2006 e até o presente momento parece que não
sofreu nenhum tipo de alteração.
Os links, conteúdos, imagens e vídeos, estão amontoados.

Começaria destacando:
1. A mudança do lay-out da página, retirando o table e acrescentando
uma folha de estilo (CSS), conforme a regra da W3C.
2. Fazer uma nova página, retirando os elementos obsoletos pelos
atuais, acrescentando o idioma da página para "pt-br", inserindo
legenda nas fotos.
3. Observaria as leis de design, para que a página seja mais atraente
e possa cumprir seu papel de informar, e não de espantar o usuário.
4. Modificaria o menu da lateral, e acrescentaria uma espécie de
identidade visual com letras e imagens próprias, para identificar as
páginas do site, para ter uma mudança da interface gráfica.
5. Tiraria os elementos de vídeos que estão na primeira página, e
criaria uma nova página seção para eles.
6. Como não há elementos em que o usuário interaja com o site,
tentaria modificar algumas seções para que o usuário interaja com o
site de forma mais dinâmica, assim como sua navegação.

[Pollyane Carvalho]

Equipe:
Pollyane Carvalho
Rharon Maia

Site Avaliado: http://last.fm
Avaliadores: http://www.sidar.org/hera/ e http://www.acesso.umic.pt/webax/examinator.php


- http://www.sidar.org/hera/

Erros de Prioridade 1:
2 checkpoints com erros
*Provide a text equivalent for every non-text element (e.g., via
"alt", "longdesc", or in element content). This includes: images,
graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic
objects, ascii art, frames, scripts, images used as list bullets,
spacers, graphical buttons, sounds (played with or without user
interaction), stand-alone audio files, audio tracks of video, and
video.
*Make programmatic elements such as scripts and applets directly
accessible or compatible with assistive technologies.

A falta de utilização de texto para cada elemento não-texto,
evidenciando a falta de preocupação com acessibilidade. Algo
extremamente valorizado nos conceitos de Web 2.0


Erros de Prioridade 2:
8 checkpoints com erros
*Create documents that validate to published formal grammars.
*Use style sheets to control layout and presentation.
*Use relative rather than absolute units in markup language attribute
values and style sheet property values.
*For scripts and applets, ensure that event handlers are input device-
independent.
*For scripts, specify logical event handlers rather than device-
dependent event handlers.
*Until user agents support explicit associations between labels and
form controls, for all form controls with implicitly associated
labels, ensure that the label is properly positioned.
*Avoid deprecated features of W3C technologies.
*Associate labels explicitly with their controls.

Todos os erros relacionados a essa sessão exemplificam erros básicos
de sintaxe e descumprimento das normas estabelecidas pela w3c. O que
dificulta a perpetuação de um padrão na web.


Erros de Prioridade 3:
3 checkpoints com erros
*Identify the primary natural language of a document.
*Provide keyboard shortcuts to important links (including those in
client-side image maps), form controls, and groups of form controls.
*Until user agents handle empty controls correctly, include default,
place-holding characters in edit boxes and text areas.

Falta de Identificação da Língua primária do site na página, Falta de
teclas de atalho e controles vazios que não incluem caracteres por
omissão, tais problemas dificultam a identificação do Site e causam
problema no caso de utilização alternativa dos links.

- http://www.acesso.umic.pt/webax/examinator.php

Esta página não passa a bateria de testes do eXaminator para a
prioridade 1
• Testes de prioridade 1

Conteúdo alternativo para scripts:
Há 17 elemento(s) <script> no corpo da página (<body>) para um total
de 1 elemento(s) <noscript>. Verifique o conteúdo alternativo
existente nos elementos <noscript> e verifique quais os elementos
<script> que não têm o correspondente <noscript>.Os scripts incluídos
no corpo do documento devem ter conteúdos alternativos em <noscript>
que descrevam a sua acção ou constituam mesmo um substituto da função
desenvolvida em <script>Forneça um equivalente textual para todo o
elemento não textual. Pode ser feito através do atributo "alt", ou
"longdesc" ou no conteúdo do elemento. (Prioridade 1)
Como foi discutido em sala de aula a questão da acessibilidade, o site
do lastfm.com não teve a preocupação com todos os tipos de
internautas, principalmente aqueles que são portadores de algum tipo
de deficiência(visual, por exemplo).Questão bem colocada pelo
analisador.

Texto alternativo nas imagens
Há 28 imagem(ns) e 11 não têm legenda, ou seja não têm texto
alternativo, ou seja não fazem uso do atributo "alt". Deve também
verificar, nas imagens que fazem uso do atributo "alt", se estes se
encontram correctos.
Cada imagem deve ter o atributo "alt" preenchido com uma legenda que
explicite o conteúdo ou cumpra a função da mesma. Se a imagem é muito
complexa, exigindo uma descrição mais longa, deve usar em adição o
atributo "longdesc".
Forneça um equivalente textual para todo o elemento não textual. Pode
ser feito através do atributo "alt", ou "longdesc" ou no conteúdo do
elemento. (Prioridade 1)
Mais uma vez ele (o analisador) acusa a questão foi discutido em sala
de aula a questão da acessibilidade, com não teve a preocupação com
todos os tipos de internautas, principalmente aqueles que são
portadores de algum tipo de deficiência(visual, por exemplo).Questão
bem colocada pelo analisador.



Destino dos links.
O objectivo de cada link parece estar claramente identificado.
Os links devem indicar de maneira muito clara e sucinta para onde
apontam, de forma a que os utilizadores possam saber o que encontrarão
se decidirem escolher esse link.
Identifique claramente o destino de cada link. (Prioridade 2)
Como foi citado pela analise, o site não apresenta problemas em
relação a questoa de confusão para onde os links apontam, conteúdo bem
separado por sessões facilitando o acesso do usuário
Elementos obsoletos
Correcto! Não se usam elementos obsoletos em HTML 4.01 (<applet>,
<center> ou <font>, por exemplo.Os elementos obsoletos são construções
que foram sendo substituídas por outras mais apropriadas e devem
evitar-se porque podem provocar problemas de acessibilidade. Por outro
lado, a sua utilização evidencia uma falta de actualização na área do
desenho Web por parte do profissional que o realizou.
Evite o uso de notação obsoleta das tecnologias do W3C. (Prioridade
2)
O site não apresenta a utilização dessas tags colocadas acima, porém
como veremos mais adiante ele acusa a utilização de elementos
obsoletos que podem comprometer a acessibilidade do site , além de
atrapalhar a “manipulação ” do html pelo css.
Utilização de tabelas para maquetar a página (tabela-layout)
Correcto! Não se usam tabelas para maquetar a página.
As tabelas são elementos para apresentar conteúdo tabular e não devem
utilizar-se para apresentar outro tipo de conteúdo. Isto é
especialmente importante para quem utiliza navegadores de base texto
ou leitores que lêem linha a linha os dados existentes no ecrã.
Não deve usar tabelas para formatar páginas a não ser que a tabela
faça sentido quando em formato linear. Caso contrário, se a tabela não
fizer sentido, forneça um equivalente alternativo (o qual poderá ser
uma versão linear). (Prioridade 2)
Mais uma vez ele acusa de forma correta a não utlização de tabelas, a
utilização de tabless fica visível com a utlização da ferramenta web
developer toolbar como plugin do firefox
Utilização de CSS
Correcto! Usam-se estilos para controlar a apresentação da página.
As folhas de estilo representam um grande passo em frente para a Web
uma vez que a sua utilização permite separar o conteúdo da
apresentação das páginas.
Use folhas de estilo para controlar a disposição dos elementos na
página e a forma de os apresentar. (Prioridade 2)
Elementos HTML de apresentação
Correcto! Não se usam elementos HTML de apresentação como <b>,
<center> ou <font> para controlar a apresentação da página.
É incorrecto utilizar elementos da linguagem de programação (X)HTML
para controlar a forma/estilo de apresentação da página. Use (X)HTML
para estruturar/suportar o conteúdo e as folhas de estilo CSS para
controlar o estilo da página.
Use folhas de estilo para controlar a disposição dos elementos na
página e a forma de os apresentar. (Prioridade 2)
Como já foi citado anteriormente o site não apresenta a utilização
dessas tags colocadas acima, porém como veremos mais adiante ele acusa
a utilização de elementos obsoletos que podem comprometer a
acessibilidade do site, além de atrapalhar a “manipulação” do html
pelo css.
Atributos obsoletos
Usam-se 2 atributos obsoletos em HTML 4.01 ("hspace", "bgcolor" ou
"nowrap", por exemplo).
Os atributos obsoletos são construções que foram descontinuadas e
progressivamente substituídas por outras mais apropriados,
nomeadamente através do uso de CSS, pelo que devem evitar-se, senão
mesmo eliminar-se, por poderem provocar problemas de acessibilidade.
Por outro lado, a sua utilização revela falta de actualização por
parte do profissional Web que a realizou.
A utilização dessas tags pode dificutar o “trabalho” do css e outras
“linguagens” que serão implementadas em cima do html. Ponto bem
colocado na analise
Atributos de apresentação
Usam-se 1 atributos para controlar a apresentação da página (por
exemplo: "size", "color" ou "face").
É incorrecto utilizar atributos da linguagem de programação (X)HTML
para controlar a forma/estilo de apresentação da página. Use (X)HTML
para estruturar/suportar o conteúdo e as folhas de estilo CSS para
controlar o estilo da página.
Use folhas de estilo para controlar a disposição dos elementos na
página e a forma de os apresentar. (Prioridade 2)
Mais uma vez o site acusa a utilização de tags que podem dificutar o
“trabalho” do css e outras “linguagens” que serão implementadas em
cima do html.




Validação do código (X)HTML.
O código tem 76 erros de validação.
É importante evitar os erros de sintaxe no código fonte para que a
página seja correctamente interpretada pelos agentes de utilizador,
nos quais se incluem as ajudas técnicas.
Crie documentos validando a notação com a gramática formal publicada.
(Prioridade 2)
Identificação do idioma principal da página
Correcto! É especificado "pt" como idioma principal. Verifique se o
código se encontra correcto.
Em todas as páginas deve-se indicar o idioma principal do documento.
Se o documento estiver em XHTML, dever-se-á verificar que, para além
do atributo "lang", se utiliza também "xml:lang".
Identifique o idioma principal do documento. (Prioridade 3)
Ponto importante colocado pelo analisador, pois a população de uma
forma mais direcionada (de outros paises) podem saber qual idioma do
site podendo alterar , se desejar, para o idioma que prefirir
Caracteres por defeito
Há 3 controlo(s) vazío(s) e 3 deles não tem um texto por omissão.
Todos os campos de edição e áreas de texto devem conter algum carácter
porque existem ajudas técnicas que não podem colocar o foco nos
controlos vazíos.
Até que os agentes do utilizador consigam manipular controlos vazios
correctamente, inclua caracteres predefinidos de preenchimento nas
caixas de edição e nas áreas de texto. (Prioridade 3)

Verificações manuais a empreender
Obstáculos à acessibilidade (Testes de prioridade 2)
Blocos de informação
Há uma média de 4 palavras em cada bloco de informação.
Estruture e segmente corretamente os textos utilizando títulos,
subtítulos, parágrafos e listas. Lembre-se que os blocos de informação
demasiado grandes dificultam a sua compreensão.
Divida grandes blocos de informação em grupos mais geríveis e
apropriados. (Prioridade 2)
Esse tipo de estrutura facilita o entendimento do site, não causando
confusão para o internauta usuário, que eh um dos lemas da web2.0
Informação sobre documentos relacionados.
Correcto! Proporciona-se informação sobre documentos relacionados
através de 1 elemento(s) <link> existentes no cabeçalho da página.
Os elementos <link> com atributos "rel" ou "rev" permitem dar
informação acerca da relação entre a página actual e outros recursos.
Providencie informação sobre colecções de documentos (i.e. documentos
compostos por múltiplas páginas). (Prioridade 3)
Agrupar links.
Correcto! 67% dos links estão organizados em listas (total dos links:
109).
Devem-se proporcionar barras de navegação constituidas por listas de
links para os agrupar, facilitando assim a sua localização. Lembre-se
que as listas não se definem pelo seu aspecto gráfico mas pelo uso
apropriado dos elementos <ol> (lista ordenada), <ul> (lista não
ordenada) e <dl> (lista de definição).
Providencie barras de navegação para salientar e dar acesso aos
mecanismos de navegação. De preferência faça uso de elementos de
notação para listas (<ul>...<ol>) para estruturar esses mecanismos.
Use CSS para lhes dar estilo. (Prioridade 3)
Esse tipo de estrutura facilita o entendimento do site, não causando
confusão para o internauta usuário, que eh um dos lemas da web2.0
Utilização de accesskey
Não se utiliza o atributo "accesskey" apesar do importante número de
elementos candidatos a usá-lo (links: 109; inputs: 7 e áreas de
texto: ) = total de elementos candidatos: (116). Não abuse da sua
utilização. A equipa da ACESSO da UMIC recomenda o uso de 3 a 4 teclas
de atalho no máximo em todo o website. Geralmente alt+1 para motor de
busca; alt+2 para bookmark do corpo da página
Os atalhos de teclado permitem, a quem utiliza o teclado para navegar,
aceder rapidamente aos elementos mais importantes da página. É
particularmente importante colocar uma tecla de atalho para acesso ao
campo de edição do motor de busca.
Defina teclas de atalho para links importantes (incluíndo os que se
encontram nos mapas de imagem client-side), controlos de formulário, e
grupos de controlos de formulários. (Prioridade 3).




- Conclusões –

-De forma geral o site : http://www.acesso.umic.pt/webax/examinator.php
apresentou um relatório dentro dos padrões da web2.0 fazendo de forma
concisa os seus comentários.
- Em relação com as versões anteriores do lastfm.com , houve uma boa
evolução.
- Não foi retratado pelo analisador, se o site é versão “beta
perpetuo” ou não.
- O site pensa mais do que nunca o usuário como construtor do
ambientes serviços disponibilizados pelo site.

[Jonny Wilson Oliveira Alves da Silva]

Alunos: JonnyWilson e Tyrone Michel
Site analisado: http://www.youtube.com
Analisadores: Dasilva e Examinator

O youtube é um site da web 2.0 muito famoso, com milhões de acessos
diários. Sua função permite que seus usuários carreguem, assistam e
compartilhem vídeos digitais, sem precisar fazer o seu download deles,
mas também possui a função de visualizador de canais (tv) pela
internet.

Examinator:

Testes de prioridade 1
Há 3 célula(s) de cabeçalhos e nenhuma delas tem atributos de
associação.
Deve-se associar ao conteúdo das células de dados a respectiva célula
cabeçalho. Desta forma, os agentes de utilizador estarão em condições
de transmitir a relação entre os distintos elementos da tabela.
çalhos.

Testes de prioridade 2
Deve existir um título para a página, através do elemento <title>, e o
mesmo deve ser claro, descritivo e conciso.
Recomenda-se o uso das tecnologias do W3C, pela sua aceitação
generalizada em todo o mundo e também pelo facto de as mesmas
incorporarem as questões de acessibilidade desde a concepção.
Use tecnologias W3C quando a mesma esteja disponível e seja apropriada
para uma tarefa. Utilize as versões mais recentes, desde que
suportadas.
Aviso Há uma média de 363 palavras em cada bloco de informação.
Estruture e segmente correctamente os textos utilizando títulos,
subtítulos, parágrafos e listas.

Divida grandes blocos de informação em grupos mais geríveis e
apropriados.

Testes de prioridade 3
Proporciona-se informação sobre documentos relacionados através de 3

elemento(s) <link> existentes no cabeçalho da página.
Os elementos <link> com atributos "rel" ou "rev" permitem dar
informação acerca da relação entre a página actual e outros recursos.
Providencie informação sobre colecções de documentos (i.e. documentos
compostos por múltiplas páginas).

Aviso 0% dos links estão organizados em listas (total de links: 173).

Devem-se proporcionar barras de navegação constituidas por listas de
links para os agrupar, facilitando assim a sua localização. Lembre-se
que as listas não se definem pelo seu aspecto gráfico mas pelo uso
apropriado dos elementos <ol> (lista ordenada), <ul> (lista não
ordenada) e <dl> (lista de definição).
Providencie barras de navegação para salientar e dar acesso aos
mecanismos de navegação. De preferência faça uso de elementos de
notação para listas (<ul>...<ol>) para estruturar esses mecanismos.

Use CSS para lhes dar estilo.Aviso Não se utiliza o atributo

"accesskey" apesar do importante número de elementos candidatos a usá-

lo (links: 173; inputs: 11 e áreas de texto: ) = total de elementos
candidatos: (184). Não abuse da sua utilização. A equipa da ACESSO da

UMIC recomenda o uso de 3 a 4 teclas de atalho no máximo em todo o
website. Geralmente alt+1 para motor de busca; alt+2 para bookmark do
corpo da página
Os atalhos de teclado permitem, a quem utiliza o teclado para navegar,
aceder rapidamente aos elementos mais importantes da página. É
particularmente importante colocar uma tecla de atalho para acesso ao
campo de edição do motor de busca.
Defina teclas de atalho para links importantes (incluíndo os que se

encontram nos mapas de imagem "client-side"), controlos de formulário,

e grupos de controlos de formulários.

Deve-se proporcionar um meio para saltar os grupos de links para poder
chegar rapidamente ao conteúdo principal da página.
Agrupe links relacionados, identifique o grupo (em benefício dos
agentes do utilizador) e, até que os agentes do utilizador o façam,
forneça uma forma de saltar um grupo.
Aviso Utilizam-se 1 atributo(s) "tabindex" mas há 184 elementos
activos na página.
O atributo "tabindex" permite modificar a ordem de tabulação entre os
elementos. Normalmente, numa página estruturada logicamente não é
necessário usar "tabindex" mas, se se usa, deve-se definir para todos
os elementos activos.
Crie uma sequência lógica de "tabs" para percorrer os links, controlos
de formulários e objectos.
Há 1 tabela(s) e todas têm células de cabeçalhos. Verifique que se
tratam realmente de tabelas de dados.
As tabelas devem ter as células que contêm os cabeçalhos marcadas. Não
use tabelas se não for para apresentar dados tabulares nem marque como
cabeçalhos as células de dados.
Nas tabelas de dados, identifique as linhas e as colunas que
constituem os cabeçalhos.

Analise:
Segundo o examinator o youtube não passou na bateria de testes para a
prioridades 1, pois nao conseguiu atender a nenhum dos 3 pontos.
Tambem ficando muito abaixo nas prioridades 2 e 3, sendo que na
prioridade 2, atendeu a Declaração do tipo de documento/Sintaxe,
Utilização de CSS e com Elementos obsoletos, e na prioridade 3 so
atendeu a Identificação do idioma principal da página.
DaSilva:

Prioridade 1
Fornecer um equivalente textual a cada imagem (isso abrange:
representações gráficas do texto, incluindo símbolos, GIFs animados,
imagens utilizadas como sinalizadores de pontos de enumeração,
espaçadores e botões gráficos), para tanto, utiliza-se o atributo
"alt" ou "longdesc" em cada imagem. Obs.: Para scripts você deve
utilizar noscript.

Prioridade 2
Utilizar unidades relativas, e não absolutas, nos valores dos
atributos de tabelas, textos, etc. Em CSS não use valores absolutos
como "pt" ou "px" e sim valores relativos como o "em", "ex" ou em
porcentagem.
Usar o elemento "label" juntamente com o atributo "id" para associar
os rótulos aos respectivos controles dos formulários. Assim, os
leitores de tela associarão os elementos do formulário de forma
correta. Usando o comando "label" as pessoas que usam leitores de tela
não terão problemas ao ler o formulário. Caso haja grupos de
informação, controles, etc, a estes devem estar devidamente
diferenciados, seja por meio de espaçamento, localização ou elementos
gráficos.
Incluir caracteres pré-definidos de preenchimento nas caixas de edição
e nas áreas de texto, até que os navegadores tratem corretamente os
controles vazios.
Em programas interpretáveis, especificar respostas a eventos,
preferindo as rotinas dependentes de dispositivos (mouse, teclado,
etc).

Prioridade 3
Especificar por extenso cada abreviatura ou sigla, quando da sua
primeira ocorrência em um documento, utilizando os atributos "abbr" e
"acronym". Utilize o atributo "abbr" dentro de um elemento "th" quando
você tiver cabeçalhos muito longos, para que os leitores de tela lerem
apenas o seu conteúdo e não o texto do cabeçalho na íntegra.
Informar previamente ao usuário o destino e resultado da ação, quando
houver campos e elementos do formulário, como, por exemplo, caixas de
seleção, que submetem automaticamente o conteúdo ao se efetuar uma
determinada seleção. Nestes casos, ao invés da seleção submeter
automaticamente o formulário, é recomendável que se vincule ao
elemento um botão para efetuar a ação.
Identificar claramente o destino de cada link, botão ou elemento que
submeta uma ação. Prefira utilizar textos mais claros e objetivos,
mostrando o verdadeiro sentido e o destino do link. Evite usar frases
como "Clique aqui".
Complementar o texto com apresentações gráficas ou sonoras, sempre que
puderem facilitar a compreensão da página.
Sempre que possível, fornecer informações que possibilitem aos
usuários receber os documentos de acordo com as suas preferências (por
ex., por idioma ou por tipo de conteúdo).
Forneça metadados para acrescentar informações semânticas e
descritivas do sítio, que sejam úteis para os mecanismos de busca.
Fornecer atalhos por teclado que apontem para links importantes
(incluindo os contidos em mapas de imagem armazenados no cliente),
para início da área principal de conteúdo da página, controles de
formulários, e grupo de controles de formulários.
Se forem oferecidas funções de pesquisa, ativar diferentes tipos de
pesquisa de modo a corresponderem a diferentes níveis de competência e
às preferências dos usuários. Sendo possível, quando a pesquisa não
encontrar a palavra, sugerir palavras semelhantes.
Agrupar links relacionados entre si, identificando o grupo (em
benefício do navegador ou leitor de tela do usuário) e, até que o
navegador ou leitor de tela do usuário se encarregue de tal função,
fornecer um modo de contornar determinado grupo.
Fornecer barras de navegação para auxiliar os menus de navegação.
Utilizar elemento que contextualizem a localização do usuário, como
barras de caminho e "Sua Localização" nas páginas do documento.
Use palavras relevantes no início de cabeçalhos, parágrafos, e listas
para identificar o assunto tratado.
Fornecer informações sobre documentos compostos por várias páginas
(isto é, coleções de documentos). Caso seja necessário, utilize
ferramentas de compactação de arquivo, tais como ZIP, TAR, GZIP ou
ARJ. Informe o tamanho do arquivo e o tempo estimado para baixar por
meio de um modem comum. Forneça documentos em formatos alternativos,
passíveis de leitura pelos leitores de tela.

Analise:
Pelo DaSilva, a unica e repetitivo erro foi com relação ao fornecer um
equivalente textual a cada imagem, ocorrendo 66 vezes, e tambem com um
enorme numero de avisos. Com a prioridade 2 os erros foram maiores com
destaque para programas interpretáveis, especificar respostas a
eventos, preferindo as rotinas dependentes de dispositivos com uma
ocorrencia em 176 linhas. E com relação a prioridade 3, nenhum erro
foi analisado, mas 190 avisos foram notificado, com uma maior
relevancia para as 178 linhas de identificar claramente o destino de
cada link, botão ou elemento que submeta uma ação.

[Monique]

Dupla:Monique Marcelle
Jef Tompson
Site:www.soundsnap.com

Ao analisarmos os sites com base nos avaliadores podemos destacar que:
No avaliador do DaSilva por exemplo ele destacou na prioridade 1 que
são aquelas pre-requisitos maximos que desenvolvedores de site s tem q
seguir a risca ele destacou 1 erro entre que foi:
* A falta de fornecimento de um equivalente textual a cada imagem.
ja na prioridade 2 os erros foram:
*A utilização de valores absolutos nos valores de atributos de
tabelas, textos e etc.
*O não uso de mecanismos para as pessoas que usam leitores de tela,
que encontraram problemas ao ler formulários.
*O não uso de caracteres pre-definidos de preenchimento nas caixas de
edição e nas áreas de texto.
*Em programas interpretáveis, a não especificação de respostas a
eventos.
*A utilização de elementos de cabeçalho feita de forma errada.
Já pelo Examinator ele destaca os seguintes erros:
1.Há 27 imagem(ns) e 10 não têm legenda, ou seja não têm texto

alternativo, ou seja não fazem uso do atributo "alt". Deve também
verificar, nas imagens que fazem uso do atributo "alt", se estes se
encontram correctos.

2.Há 3 link(s) que são activados unicamente através de scripts.
3.Há 7 elemento(s) <script> no corpo da página e não se proporciona
nenhum conteúdo alternativo (não foi encontrado o elemento
<noscript>).
4.Usam-se manipuladores de eventos que apenas podem ser accionados com
o rato ou que, de qualquer forma, o emulam (ondblclick, onmouseover,
etcétera).
5.Usam-se medidas absolutas nas folhas de estilo.
6.Usam-se estilos mas também tabelas para controlar a apresentação da
página.
7.Usam-se 2 elementos HTML para controlar a apresentação da página
(por exemplo: <b>, <center> ou <font>).
8.O código das CSS tem erros.
9.Usam-se 13 atributos obsoletos em HTML 4.01 ("hspace", "bgcolor" ou
"nowrap", por exemplo).
10.Usam-se 13 atributos para controlar a apresentação da página (por

exemplo: "size", "color" ou "face").

11.Há 5 tabela(s) utilizadas para maquetar elementos diversos na
página.
12.O código tem 170 erros de validação
13.Há 1 control(os) de formulário e nenhuma etiqueta (<label>).
14.Há 56 link(s) e 1 são adjacentes a outros links mas não estão
separados entre si com caracteres imprimíveis.
15.Há 1 controlo(s) vazío(s) e 1 deles não tem um texto por omissão.

obs: bem na analise da dupla a interface do site deixa a desejar,
primeiro por não ter uma organização lógica os botões ficam todos
espalhados, falata um certa divisão entre eles, o usuário fica um
pouco perdido ao entrar na página.