evoluÇÃo da acessibilidade na web: um levantamento da...

UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ CÂMPUS CORNÉLIO PROCÓPIO

DIRETORIA DE GRADUAÇÃO E EDUCAÇÃO PROFISSIONAL CURSO DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

ALLAN ASLLEY KREPSKY

EVOLUÇÃO DA ACESSIBILIDADE NA WEB: um levantamento da implementação de requisitos de acessibilidade em aplicações web

TRABALHO DE CONCLUSÃO DE CURSO

CORNÉLIO PROCÓPIO

2015

ALLAN ASLLEY KREPSKY

EVOLUÇÃO DA ACESSIBILIDADE NA WEB: um levantamento da implementação de requisitos de acessibilidade em aplicações Web

Trabalho de Conclusão de Curso de graduação, apresentado à disciplina de Trabalho de Conclusão de Curso II, do curso de Tecnologia e Análise e Desenvolvimento de Sistemas da Coordenação de Informática – COINF - da Universidade Tecnológica Federal do Paraná – UTFPR, como requisito parcial para a obtenção do título de Tecnólogo. Orientador: Prof. Dr. Willian Massami Watanabe

CORNÉLIO PROCÓPIO

2015

Dedico este trabalho a todos que de forma indireta ou direta contribuíram para a execução do mesmo.

AGRADECIMENTOS

Certamente estes parágrafos não irão atender a todas as pessoas que fizeram parte dessa importante fase da minha vida. Portanto, desde já peço desculpas àqueles que não estão presentes entre essas palavras, mas elas podem estar certas que fazem parte do meu pensamento e da minha gratidão.

Reverencio o Prof. Dr. Willian Massami Watanabe, pela sua dedicação, paciência e pela orientação, e por meio dele, eu me reporto a toda a comunidade da Universidade Tecnológica Federal do Paraná (UTFPR) pelo apoio incondicional.

Aos meus colegas de sala gostaria de externar minha satisfação de poder conviver com eles durante a realização deste estudo.

A Secretaria do Curso, pela cooperação. Agradeço aos especialistas e professores da banca examinadora pela

atenção e contribuição dedicadas a este estudo. Gostaria de deixar registrado também, o meu reconhecimento à minha família,

pois acredito que sem o apoio deles seria muito difícil vencer esse desafio. Enfim, a todos os que por algum motivo contribuíram para a realização desta

pesquisa.

“Só se pode alcançar um grande êxito quando nos mantemos fiéis a nós mesmos”. (NIETZSCHE, Friedrich).

RESUMO KREPSKY, Allan. EVOLUÇÃO DA ACESSIBILIDADE NA WEB: um levantamento da implementação de requisitos de acessibilidade em aplicações web. 2015. 79 f. Trabalho de Conclusão de Curso (Graduação) – Tecnologia em Análise e Desenvolvimento de Sistemas. Universidade Tecnológica Federal do Paraná. Cornélio Procópio, 2015.

A comunidade Web tem se esforçado cada vez mais para permitir o acesso de informações a pessoas portadoras de deficiência. Contudo, a implementação de tecnologias que promovem a acessibilidade da forma correta requer o conhecimento de uma série de diretrizes e especificações elaboradas pelo W3C (World Wide Web Consortium). Essas informações em conjunto com a conscientização de acessibilidade na Web encontram como obstáculo a ausência de interesse de desenvolvedores sobre o tema. Esse fato é agravado quando levado em consideração aplicações ricas de Internet, as chamadas RIAs (Rich Internet Applications), que possibilitam a implementação de mecanismos sofisticados de interação do usuário com a interface. Buscando auxiliar o desenvolvimento de conteúdo Web acessível para RIAs, a WAI (Web Accessibility Initiative) elaborou a especificação ARIA (Accessible Rich Internet Applications). Este trabalho tem por objetivo investigar a evolução da disponibilidade de conteúdo acessível, segundo a especificação ARIA. Para tal, foi desenvolvido um script de monitoramento da evolução da utilização de alguns elementos e atributos HTML (HyperText Markup Language), de acordo com as especificações ARIA e WCAG 2.0 (Web Content Accessibility Guidelines). Assim, foi realizado o monitoramento em uma amostra de websites, durante um determinado período de tempo. De acordo com os dados obtidos, foi observado que, apesar da disponibilidade dos documentos ARIA e WCAG 2.0, notou-se um avanço pequeno, porém significativo de sua utilização.

Palavras-chave: Inclusão digital, Acessibilidade Web. ARIA. RIA, WCAG.

ABSTRACT

KREPSKY, Allan. EVOLUTION OF ACCESSIBILITY IN THE WEB: a survey of the implementation of accessibility requirements in web applications. 2015. 79 f. Trabalho de Conclusão de Curso (Graduação) – Tecnologia em Análise e Desenvolvimento de Sistemas. Universidade Tecnológica Federal do Paraná. Cornélio Procópio, 2015.

The Web community has struggled more and more to allow the access for digital information to people with disabilities. However, the correct implementation of technologies that promote accessibility requires that Web developers have the knowledge of a serie of guidelines and specifications elaborated by the W3C (World Wide Web Consortium). This information, together with the Web Accessibility culture, encounter as an obstacle the lack of interest from developers on the subject. This fact is compounded when taken into account the rich Internet applications, RIAs (Rich Internet Applications), which enable user interaction with the interface. In order to assist the implementation of accessible Web content in RIAs, the WAI (Web Accessibility Initiative) elaborated the specification ARIA (Accessible Rich Internet Applications). This study has the objective of investigating the evolution of the Web accessibility, according to the ARIA specification. To this end, a script was developed to monitor the evolution of the use of some elements and attributes HTML (HyperText Markup Language), according to the ARIA specifications and WCAG 2.0 (Web Content Accessibility Guidelines). The script was executed to monitor a sample websites for a certain period of time. According to the data obtained, it was observed that, despite the availability of ARIA and WCAG 2.0 documents, there were small improvements in accessibility requirements in Web applications Keywords: Digital inclusion. Web accessibility. ARIA. RIA.

LISTA DE FIGURAS

FIGURA 1 – REPRESENTAÇÃO DO MODELO DA WAI................................. 21

FIGURA 2 – INTERAÇÃO DE AMBIENTES ATRAVÉS DO MÉTODO EVALUATE........................................................................................................

32

LISTA DE GRÁFICOS

GRÁFICO 1 – ELEMENTOS DE CABEÇALHO DO GOOGLE........................... 48

GRÁFICO 2 – ELEMENTOS DE CABEÇALHO DO FACEBOOK....................... 48

GRÁFICO 3 – ELEMENTOS DE CABEÇALHO DO YOUTUBE......................... 49

GRÁFICO 4 – ELEMENTOS DE CABEÇALHO DO YAHOO.............................. 49

GRÁFICO 5 – ELEMENTOS DE CABEÇALHO DO WIKIPÉDIA........................ 50

GRÁFICO 6 – ELEMENTOS DE CABEÇALHO DO TWITTER........................... 50

GRÁFICO 7 – ELEMENTOS DE CABEÇALHO DO LIVE................................... 51

GRÁFICO 8 – ELEMENTOS DE CABEÇALHO DO SINA.................................. 51

GRÁFICO 9 – ELEMENTOS DE CABEÇALHO DO EBAY................................. 52

GRÁFICO 10 – ELEMENTOS DE CABEÇALHO DO YANDEX.......................... 52

GRÁFICO 11 – ELEMENTOS DE IMAGEM DO GOOGLE................................. 54

GRÁFICO 12 – ELEMENTOS DE IMAGEM DO FACEBOOK............................ 54

GRÁFICO 13 – ELEMENTOS DE IMAGEM DO YOUTUBE.............................. 55

GRÁFICO 14 – ELEMENTOS DE IMAGEM DO YAHOO................................... 55

GRÁFICO 15 – ELEMENTOS DE IMAGEM DO WIKIPÉDIA.............................. 56

GRÁFICO 16 – ELEMENTOS DE IMAGEM DO TWITTER................................ 56

GRÁFICO 17 – ELEMENTOS DE IMAGEM DO LIVE......................................... 57

GRÁFICO 18 – ELEMENTOS DE IMAGEM DO SINA........................................ 57

GRÁFICO 19 – ELEMENTOS DE IMAGEM DO EBAY....................................... 58

GRÁFICO 20 – ELEMENTOS DE IMAGEM DO YANDEX.................................. 58

GRÁFICO 21 – ELEMENTOS DE FORMULÁRIO DO GOOGLE....................... 60

GRÁFICO 22 – ELEMENTOS DE FORMULARIODO FACEBOOK.................... 60

GRÁFICO 23 – ELEMENTOS DE FORMULARIO DO YOUTUBE...................... 61

GRÁFICO 24 – ELEMENTOS DE FORMULARIO DO YAHOO.......................... 61

GRÁFICO 25 – ELEMENTOS DE FORMULARIO DO WIKIPEDIA.................... 62

GRÁFICO 26 – ELEMENTOS DE FORMULARIO DO TWITTER....................... 62

GRÁFICO 27 – ELEMENTOS DE FORMULARIO DO LIVE............................... 63

GRÁFICO 28 – ELEMENTOS DE FORMULARIO DO SINA............................... 63

GRÁFICO 29 – ELEMENTOS DE FORMULARIO DO EBAY............................. 64

GRÁFICO 30 – ELEMENTOS DE FORMULARIO DO YANDEX........................ 64

GRÁFICO 31 – ELEMENTOS SCRIPT DO 1º AO 5º TOPSITES....................... 66

GRÁFICO 32 – ELEMENTOS SCRIPT DO 6º AO 10º TOPSITES..................... 66

GRÁFICO 33 – ATRIBUTOS ARIA DO GOOGLE............................................... 68

GRÁFICO 34 – ATRIBUTOS ARIA DO FACEBOOK.......................................... 68

GRÁFICO 35 – ATRIBUTOS ARIA DO YOUTUBE............................................. 69

GRÁFICO 36 – ATRIBUTOS ARIA DO YAHOO................................................. 69

GRÁFICO 37 – ATRIBUTOS ARIA DO WIKIPÉDIA............................................ 70

GRÁFICO 38 – ATRIBUTOS ARIA DO TWITTER.............................................. 70

GRÁFICO 39 – ATRIBUTOS ARIA DO LIVE...................................................... 71

GRÁFICO 40 – ATRIBUTOS ARIA DO SINA...................................................... 71

GRÁFICO 41 – ATRIBUTOS ARIA DO EBAY..................................................... 72

GRÁFICO 42 – ATRIBUTOS ARIA DO YANDEX............................................... 72

GRÁFICO 43 – ATRIBUTOS ROLES DO GOOGLE........................................... 73

GRÁFICO 44 – ATRIBUTOS ROLES DO FACEBOOK...................................... 73

GRÁFICO 45 – ATRIBUTOS ROLES DO YOUTUBE......................................... 74

GRÁFICO 46 – ATRIBUTOS ROLES DO YAHOO............................................. 74

GRÁFICO 47 – ATRIBUTOS ROLES DO WIKIPÉDIA........................................ 75

GRÁFICO 48 – ATRIBUTOS ROLES DO TWITTER.......................................... 75

GRÁFICO 49 – ATRIBUTOS ROLES DO LIVE.................................................. 76

GRÁFICO 50 – ATRIBUTOS ROLES DO SINA.................................................. 76

GRÁFICO 51 – ATRIBUTOS ROLES DO EBAY................................................. 77

GRÁFICO 52 – ATRIBUTOS ROLES DO YANDEX............................................ 77

GRÁFICO 53 – ELEMENTOS DE TABELA E CSS DO GOOGLE...................... 79

GRÁFICO 54 – ELEMENTOS DE TABELA E CSS DO FACEBOOK................. 79

GRÁFICO 55 – ELEMENTOS DE TABELA E CSS DO YOUTUBE.................... 80

GRÁFICO 56 – ELEMENTOS DE TABELA E CSS DO YAHOO........................ 80

GRÁFICO 57 – ELEMENTOS DE TABELA E CSS DO WIKIPÉDIA................... 81

GRÁFICO 57 – ELEMENTOS DE TABELA E CSS DO TWITTER .................... 81

GRÁFICO 59 – ELEMENTOS DE TABELA E CSS DO LIVE.............................. 82

GRÁFICO 60 – ELEMENTOS DE TABELA E CSS DO SINA............................. 82

GRÁFICO 61 – ELEMENTOS DE TABELA E CSS DO EBAY............................ 83

GRÁFICO 62 – ELEMENTOS DE TABELA E CSS DO YANDEX....................... 83

LISTA DE TABELAS

TABELA 1 – QUADRO COMPARATIVO DE TRABALHOS CORRELATOS...... 27

TABELA 2 – LISTA DOS 10 TOPSITES.............................................................. 31

LISTA DE SIGLAS

API Interface de Programação de Aplicativo (do original Application Programming Interface)

CSS Folhas de Estilo em Cascata (do original Cascading Style Sheets)

HTML Linguagem de Marcação de Hipertexto (do original HyperText Markup Language)

IBGE Instituto Brasileiro de Geografia e Estatística

TA Tecnologia Assistiva

UAAG Diretrizes de Acessibilidade de Agente de Usuário (do original User Agent Acessibility Guidelines)

UTFPR Universidade Tecnológica Federal do Paraná

XHTML Linguagem de Marcação de Hipertexto Extensível (do original Extensible Hypertext Markup Language)

WCAG Diretrizes de Acessibilidade de Conteúdo Web (do original Web Content Accessibility Guidelines)

LISTA DE ACRÔNIMOS

AJAX JavaScript e XHTML Assíncronos (do original Asynchronous JavaScript and XML)

ATAG Diretrizes de Acessibilidade de Ferramentas de Autoria (do original Authoring Tool Accessbility Guidelines)

ARIA Aplicações Ricas de Internet Acessíveis (do original Accessible Rich Internet Applications)

DOM Modelo de Objetos do Documento (do original Document Object Model)

WAI Iniciativa de Acessibilidade Web (do orginal Web Accessibility Initiative)

WEB Rede Mundial de Computadores (do original World Wide Web)

W3C Consórcio da Rede Mundial de computadores (do original World Wide Web Consortium)

SUMÁRIO

1 INTRODUÇÃO.................................................................................................. 15

1.1 PROBLEMAS E PREMISSAS......................................................................... 16

1.2 JUSTIFICATIVA............................................................................................... 16

1.3 OBJETIVOS..................................................................................................... 17

1.3.1 Objetivo geral................................................................................................ 17

1.3.2 Objetivos específicos.................................................................................... 17

1.4 ORGANIZAÇÃO DO TEXTO........................................................................... 18

2 FUNDAMENTAÇÃO TEÓRICA.......................................................................... 19

2.1 CONCEITOS DE ACESSIBILIDADE NA WEB................................................ 19

2.2 TECNOLOGIAS ASSISTIVAS......................................................................... 19

2.3 MODELO DA WAI............................................................................................ 20

2.4 WCAG 2.0..................................................................................................... 22

2.5 RIAs e ARIA..................................................................................................... 23

2.6 TRABALHOS CORRELATOS.......................................................................... 24

3 DESENVOLVIMENTO DO PROJETO................................................................ 29

3.1 RECURSOS UTILIZADOS............................................................................... 29

3.2 MATERIAIS E MÉTODOS............................................................................... 30

3.3 ANÁLISE E IMPLEMENTAÇÃO...................................................................... 32

3.4 ANÁLISE DOS DADOS................................................................................... 33

3.4.1 Elementos de Cabeçalho.............................................................................. 33

3.4.2 Elementos de Imagem.................................................................................. 34

3.4.3 Elementos de Formulário.............................................................................. 35

3.4.4 Elementos Script........................................................................................... 37

3.4.5 Atributos Aria e Roles................................................................................... 37

3.4.6 Elementos de Tabela e CSS......................................................................... 39

4 CONSIDERAÇÕES FINAIS................................................................................ 41

4.1 LIMITAÇÕES E RESTRIÇÕES........................................................................ 41

4.2 TRABALHOS FUTUROS................................................................................. 42

REFERÊNCIAS...................................................................................................... 43

APÊNDICE A – Gráficos dos Elementos de Cabeçalho................................... 47

APÊNDICE B – Gráficos de Elementos de Imagem.......................................... 53

APÊNDICE C – Gráficos dos Elementos de Formulários................................. 59

APÊNDICE D – Gráficos dos Elementos Script................................................. 65

APÊNDICE E – Gráficos dos Atributos ARIAs e Roles..................................... 67

APÊNDICE F – Gráficos do Elementos de Tabela e CSS................................. 78

15

1 INTRODUÇÃO

A inclusão social propõe a integração de indivíduos excluídos da sociedade,

seja por possuir alguma deficiência, provir de uma classe social inferior, por sua raça,

cor ou religião, impossibilitando que esses indivíduos possam usufruir de serviços e

acessos ofertados a sociedade.

Segundo o Senso Demográfico do Instituto Brasileiro de Geografia e

Estatística (IBGE, 2010), 23,9% da população brasileira se declara portadora de

alguma deficiência, seja ela visual, motora ou mental. O que corresponde a mais de

40 milhões de brasileiros privados do acesso a serviços oferecidos a comunidade.

Dentre as deficiências pesquisadas a deficiência visual é a que mais afeta os

brasileiros. Pelo estudo 18,8% dos entrevistados alegam ter dificuldade em enxergar,

mesmo com óculos ou lentes.

O governo brasileiro constituiu leis almejando permitir o acesso desse grupo

de indivíduos a seus direitos, como por exemplo, a lei das calçadas, rebaixadas em

São Paulo pelo Decreto municipal 45.904/2005, onde o padrão arquitetônico dos

passeios ou praças públicas deve assegurar a acessibilidade a pessoas com

deficiência ou mobilidade reduzida. Entre as exigências do decreto, está a

necessidade de instalação de piso tátil de alerta ou direcional, que “devem ter cor

contrastante com o resto do pavimento” (ROSALI FIGUEIREDO, 2011).

Assim como a lei das calçadas, que fornece um conjunto de exigências para

a padronização da instalação de piso tátil, a Web possui documentos para auxiliar

desenvolvedores a implementar conteúdo acessível, como por exemplo, as

especificações Accessible Rich internet Applications (ARIA) e Web Content

Accessibility Guidelines (WCAG) desenvolvidas pela World Wide Web Consortium

(W3C)1. Todos os padrões desenvolvidos pelo W3C são gratuitos e abertos, visando

garantir a evolução da Web e o crescimento de interfaces de aplicações Web

garantindo interoperabilidade das mesmas (W3C, 2013).

Tim Berners-Lee, inventor da Web e um dos fundadores da W3C, tem como

missão conduzir a Web para que a mesma atinja todo seu potencial, desenvolvendo

protocolos e diretrizes que garantam seu crescimento a longo prazo (W3C, 2013).

1 World Wide Web Consortium (W3C) é um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web.

http://www.w3c.br/Consortium/Member/List

16

Visando potencializar o acesso à Web para portadores de deficiências, a W3C

desenvolveu as diretrizes e especificações internacionais WCAG e ARIA para tornar

a Web acessível.

1.1 PROBLEMAS E PREMISSAS

O rápido crescimento de páginas web presentes na Internet, atualmente

superior a 45 bilhões de páginas2, traz como efeito colateral a ausência da

implementação dos critérios de acessibilidade. No estudo apresentado a seguir, que

investigou websites governamentais, nota-se esse efeito.

Em Spelta et al. (2010) foi realizado um estudo de acessibilidade dos websites

de 3 candidatos a presidente do Brasil com uma metodologia própria quantitativa e

qualitativa. As conclusões da pesquisa foram: as barreiras identificadas são graves e

não são exclusividade de um ou outro website de candidato, mas sim de todos os três.

Pela análise, pode-se garantir que não houve preocupação com acessibilidade na

concepção e construção dos websites e, se houve alguma, certamente não foi

implementada.

Todos os websites apresentam barreiras primárias de acessibilidade, ou

seja, nem mesmo o mínimo necessário de acessibilidade para ofertar a facilidade de

uso aos grupos de usuários que possuem algum tipo de limitação física ou mental foi

implementado.

1.2 JUSTIFICATIVA

Assim a inclusão social tem o objetivo de proporcionar a integração de

indivíduos a sociedade, a inclusão digital busca democratizar o acesso a informação

a todos. Para que esta democratização ocorra, o governo instaura leis e decretos,

visando possibilitar a integração do maior número de pessoas.

2 http://www.worldwidewebsize.com/

17

Desde 2004, um Decreto Federal (nº 5.296) torna obrigatório que todos os

portais e websites dos órgãos da administração pública atendam aos padrões de

acessibilidade digital. Além do Decreto Federal (nº 5.296), o governo vem

institucionalizando outras formas de auxiliar na inclusão digital. Em 2007, o governo

brasileiro, por meio da Portaria nº 3, de 7 de maio, institucionalizou o Modelo de

Acessibilidade em Governo Eletrônico (eMAG), tornando sua observância obrigatória

nos sítios e portais do governo brasileiro.

Além dos decretos, portarias e até uma lei, a Lei de Acesso à Informação Nº

12.527, de novembro de 2011, que trataram do tema, abrangendo todos os websites

e não apenas os governamentais. Essas iniciativas não foram suficientes para garantir

que a situação tenha sido resolvida, pois falta fiscalização na construção dos websites

para verificar se as normas estão sendo cumpridas.

1.3 OBJETIVOS

1.3.1 Objetivo Geral

Este trabalho tem como objetivo realizar o monitoramento da evolução da

implementação de um grupo de elementos e atributos HTML, para avaliar a

implementação de requisitos associados as especificações ARIA e WCAG 2.0 em

uma amostra do disponível pelo websites Alexa.com contendo os 10 topsites: Google,

Facebook, Youtube, Yahoo, Wikipédia, Twitter, Live, Sina, Ebay e Yandex.

1.3.2 Objetivos Específicos

http://legis.senado.gov.br/legislacao/ListaPublicacoes.action?id=240147

http://legis.senado.gov.br/legislacao/ListaPublicacoes.action?id=240147

18

Desenvolver uma ferramenta capaz de monitorar e identificar elementos e

atributos do HTML em uma página Web.

Investigar a implementação de elementos HTML5 em um conjunto de

websites.

Investigar a implementação semântica dos elementos de acordo com as

especificações ARIA.

Investigar a implementação dos elementos de acordo com as diretrizes da

WCAG 2.0.

Automatizar o processo de quantificação de elementos e atributos que

implementem as especificações ARIA e WCAG 2.0.

1.4 ORGANIZAÇÃO DO TEXTO

Este texto está organizado em 4 capítulos, distribuídos da seguinte maneira:

este capítulo apresenta uma breve introdução do trabalho a ser desenvolvido, seguido

da motivação e objetivos.

No Capítulo 2 é apresentada a revisão bibliográfica sobre todo o

embasamento deste trabalho. São apresentados conceitos relacionados a

acessibilidade Web, tecnologia assistiva, o modelo da Web Accessibility Initiative

(WAI), Rich Internet Applications (RIAs) e ARIA, seguida de especificações técnicas

de avalição de acessibilidade do documento WCAG 2.0, além de trabalhos correlatos

com o tema aqui abordado.

No Capítulo 3, é apresentada a definição da proposta do trabalho, além de

algumas tecnologias e ferramentas utilizadas para o seu desenvolvimento. Além

disso, é apresentada uma revisão sobre as figuras utilizadas para simplificar o

entendimento da construção do sistema.

No Capítulo 4 são apresentadas as considerações finais, seguidas das

limitações encontradas durante o seu desenvolvimento e, finalizando o capitulo, os

trabalhos futuros.

19

2 FUNDAMENTAÇÃO TEÓRICA

2.1 CONCEITOS DE ACESSIBILIDADE NA WEB

A World Wide Web (ou simplesmente Web) foi concebida com o intuído de

promover o acesso de todos a seus conteúdos. Para isso ocorrer é necessário que

haja uma padronização de inserção de informações, para essa finalidade foi utilizado

o Hyper Text Markup Language (HTML) (W3C, 1999).

A Web, além de ser uma tecnologia de disponibilização de conteúdo é também

uma tecnologia auxiliadora na universalização do acesso a informação. A essa outra

vertente denomina-se acessibilidade, que consiste em promover o acesso a todos

independe de suas limitações.

A acessibilidade na Web tem como objetivo possibilitar a todos a sua

utilização. Especificamente, pessoas com necessidades especiais, permitindo a elas

compreender, entender, navegar, interagir e contribuir com a Web. A acessibilidade

na Web permite, entre outros benefícios, a inclusão de idosos e indivíduos não

familiarizados com tecnologia, os chamados analfabetos digitais (HENRY, 2005).

Considerando uma Web colaborativa, é essencial conscientizar usuários e

desenvolvedores de conteúdo Web sobre a importância da acessibilidade. A W3C

estima que 90% dos websites presentes na Web são inacessíveis a portadores de

deficiência, porém, com as novas tecnologias é bem provável que esse problema

diminua ao longo do tempo (BOLDYREFF, 2002).

2.2 TECNOLOGIAS ASSISTIVAS

O termo Tecnologia Assistiva é traduzido do inglês Assistive Technology, que

nada mais é do que recursos que auxiliam pessoas com deficiência no acesso a

informação. Estes recursos podem ser apresentados na forma de serviços,

equipamento, estratégias e práticas, se adequando de acordo com a necessidade do

deficiente (COOK ; HUSSEY, 1995).

20

Na Internet, os sistemas são os responsáveis por ampliar as habilidades

funcionais de pessoas com necessidades especiais, promovendo a disseminação da

inclusão social e digital.

Para cada deficiência é utilizada uma TA (tecnologia assistiva) diferente.

Portadores de deficiência visual utilizam-se da tecnologia como os leitores de tela,

navegador textual e navegador com voz. A seguir, são apresentadas algumas

características de tecnologias utilizadas por deficientes visuais:

Leitor de tela: é um sistema que navega através da estrutura HTML dos

websites “lendo” para os usuários as informações neles contidos. O

conteúdo também pode ser apresentado em braile, para isso é

necessário que o usuário utilize de um dispositivo que realize a

conversão de texto para braile (FORTES et al., 2005)

Navegador Textual: esse browser exibe somente texto, diferente dos

navegadores convencionais que apresentam mídias temporais.

Geralmente, pessoas com deficiência visual utilizam o navegador textual

com o leitor de tela (FORTES et al., 2005).

Navegador com voz: é um navegador que possibilita a navegação

através da fala, ele interpreta um comando e executa (FORTES et al.,

2005).

Ampliador de tela: tecnologia essa que permite o aumento do tamanho

do conteúdo de acordo com o nível de dificuldade de visualização do

usuário

Além das tecnologias utilizadas por deficientes visuais acima apresentada, há

outros métodos que possibilitam a acessibilidade de portadores de outras limitações,

por exemplo, deficientes físicos utilizam da tecnologia de teclado alternativo, seja

através de software ou hardware, que fornece um método alternativo de disposição

das teclas ou travas que permita somente pressionar uma tecla por vez.

2.3 MODELO DA WAI

O modelo da WAI consiste em três conjuntos de diretrizes agregadas, sendo

elas: Web Content Accessibility Guidelines (WCAG), User Agent Accessibility

21

Guidelines (UAAG) e Authoring Tool Accessibility Guidelines (ATAG), onde cada

documento é direcionado a um determinado público alvo. A seguir é apresentada uma

breve descrição de cada documento:

ATAG: Essa especificação fornece diretrizes para desenvolvedores de

ferramentas de autoria Web. Seu objetivo é duplo: para ajudar os profissionais na

criação de ferramentas que produzem conteúdo Web acessível e para auxiliar os

desenvolvedores na criação de interfaces de autoria acessíveis (W3C, 2010).

UAAG: Esse documento fornece diretrizes para a implementação de agentes

de usuário para pessoas com deficiência (visual, auditiva, física, cognitiva e

neurológica). Os agentes de usuário incluem navegadores HTML e outros tipos de

softwares que renderizam conteúdo (W3C, 2002).

WCAG 1.0: Essas diretrizes explicam como implementar conteúdo acessível

a pessoas com deficiência, independente do agente de usuário que esteja sendo

utilizado ou dos ambientes em que estão, sejam eles barulhentos, sub ou super

iluminados, entre outras (W3C, 1999).

Na Figura 1, é apresentada a representação do Modelo da WAI associados

aos documentos acima referidos.

Figura 1 - Modelo da WAI

Fonte: W3C, 2015

http://www.w3.org/TR/UAAG10/glossary.html#def-user-agent

http://www.w3.org/TR/UAAG10/glossary.html#def-user-agent

http://www.w3.org/TR/WAI-WEBCONTENT/#content-structure

22

A representação da Figura 1 dispõe o conteúdo na cor azul e na cor laranja.

Os conteúdos presentes na cor laranja da imagem representam o documento UAAG,

que contém as diretrizes para o desenvolvimento de Tecnologias Assistivas (TA),

como navegadores e players de mídia. Para sua concepção são utilizadas algumas

especificações técnicas como SVG, SMIL, entre outras. Estas tecnologias assistivas

tem como público alvo usuários com de alguma deficiência.

Os conteúdos presentes do lado azul da representação são destinados a

desenvolvedores. Para os desenvolvedores de conteúdos Web acessível as diretrizes

de acessibilidade WCAG são disponibilizadas e para desenvolvedores de ferramentas

de autoria, como ferramentas de aperfeiçoamento e ferramentas de criação, o

documento ATAG é disponibilizado. Para a construção destas ferramentas e

conteúdos algumas especificações técnicas devem ser empregadas, como por

exemplo, as especificações HTML, Extensible Markup Language (XML) e Cascading

Style Sheets (CSS).

2.4 A WCAG 2.0

As diretrizes presentes no documento WCAG 2.0 são uma nova versão das

diretrizes da WCAG 1.0. Suas diretrizes são divididas em quatro princípios, que

servem como características necessárias ao conteúdo Web, para que o mesmo seja

apresentado ao usuário de forma rápida e eficaz (W3C, 2013a).

1) Perceptível – A informação e os componentes de interface devem ser

apresentados de forma que aos usuários possam perceber (W3C, 2008). Suas

diretrizes são citadas abaixo:

a) Alternativas textuais: disponibilizar alternativas textuais para conteúdo não

textuais como imagens.

b) Mídias temporais: disponibilizar alternativas para mídias temporais (vídeos,

áudios, animações).

c) Adaptabilidade: criar conteúdo que possa ser disponibilizado de diferentes

maneiras sem perder a informação ou estrutura.

d) Distinguíveis: facilitar aos usuários ver e ouvir o conteúdo, apresentando

foco ao conteúdo principal sendo disponibilizado.

23

2) Operáveis – Componentes de interface do usuário e navegação tem de ser

operáveis (W3C, 2008). Diretrizes operáveis:

a) Acessível pelo teclado: tornar todas as funcionalidades acessíveis pelo

teclado.

b) Tempo suficiente: disponibilizar tempo suficiente para leitura e utilização do

conteúdo.

c) Apreensibilidade: não estruturar o website com conteúdo que possam

causar apreensão nos usuários, como por exemplo: flash de frequência

superior a três vezes por segundo.

d) Navegabilidade: disponibilizar meios que auxiliem a navegação do usuário,

busca por conteúdo e localização.

3) Compreensível – A informação e a operação de interface deve ser

compreensível (W3C, 2008). Diretrizes compreensíveis:

a) Legível e compreensível: disponibilizar o conteúdo de forma legível e

compreensível aos usuários.

b) Previsibilidade: os websites devem aparecer e operar por meios previsíveis.

c) Assistência de entrada: auxiliar os usuários, evitar e corrigir erros.

4) Robusto – O conteúdo tem de ser robusto o suficiente para ser interpretado de

forma confiável por uma ampla variedade de agentes de utilizador, incluindo

tecnologias de apoio (W3C, 2008). Diretriz de robustez:

a) Compatibilidade: maximizar a compatibilidade com agentes de usuário e

tecnologias disponibilizadas atualmente ou no futuro.

Além da evolução no desenvolvimento de disponibilização de conteúdo Web

acessível, houve também uma evolução no desenvolvimento de componentes de

interface (Widgets), que possibilitam melhor interatividade do usuário com sua

interface gráfica, nas denominadas RIAs.

2.5 RIAs e ARIA

O aumento das complexidades das interações nas aplicações Web 2.0 fez

com que as interfaces do usuário se tornassem mais ricas e interativas (GIBSON,

2007), em outras palavras, tornou a aplicação Web uma Rich Internet Application

24

(RIA), aplicações essas que possuem algumas características e funcionalidades das

aplicações tradicionais desktop.

As RIAs tipicamente proporcionam um visual onde não há necessidade de

atualizar (no-refresh) a página Web como um todo, proporcionando algo que

atualmente é chamado de (HduX - High Definition User eXperience) alta definição da

experiência do usuário.

Aplicações ricas implicam em maiores complexidades de acessibilidade.

Tradicionalmente, as tecnologias assistivas, como leitores de telas, apresentam

informações considerando que a página Web possui uma estrutura linearizada de

conteúdo, porém RIAs muitas vezes não possuem tal estrutura, sendo possível que a

mesma seja modificada durante a interação, dificultando as TA a apresentação de

seus conteúdos (WATANABE et al., 2014).

Para lidar com o aumento de complexidade das interfaces de usuário na Web

introduzidas pelas RIAs, a WAI, organização criada pela W3C que tem como missão

definir princípios e regras de design e desenvolvimento de websites que sejam

acessíveis a pessoas com deficiência, elaborou as diretrizes ARIA (LUCCA et al.,

2005).

ARIA é um conjunto de especificações técnicas que fornece conhecimento

para melhorar a acessibilidade e interoperabilidade dos conteúdos Web e

aplicações. Esse documento é usado principalmente por desenvolvedores de Widgets

personalizados e outros componentes de aplicação Web (W3C, 2014).

O objetivo da especificação ARIA é incluir dados semânticos nos elementos

HTML para informar aos mecanismos de tecnologias assistivas sobre como cada

componente de interface deve ser apresentado, considerando possíveis mudanças e

atualizações da sua estrutura HTML (GIBSON, 2007).

No capítulo a seguir são apresentados os trabalhos relacionados.

2.6 TRABALHOS CORRELATOS

Neste capítulo será apresentado todos os trabalhos que possuem

características semelhantes a esse trabalho. Todas as informações resumidas

25

referentes aos trabalhos correlatos se encontram na Tabela 1 ao final desse

capítulo.

Watanabe et al. (2014) realizaram um estudo relacionado a acessibilidade de

websites. O estudo consistiu em analisar 32 websites de maior fluxo na internet,

segundo o Ranking da Alexa. No estudo foram avaliados os mecanismos de

navegação por teclado por meio de Tab Widgets. Dos 32 websites analisados, 9 foram

classificados como não acessíveis e apenas 1 website seguia parcialmente as

recomendações ARIA, sendo nulo o número de websites em totalmente conformidade

com as especificações ARIA.

O que difere este trabalho do estudo acima apresentado é a codificação de

uma ferramenta que automaticamente monitore a evolução dos 10 websites com

maior fluxo de acesso segundo o Ranking Alexa’s. Ao invés de avaliar a navegação

por Tab Widgets, foi avaliado a evolução da codificação da especificação ARIA nestes

websites durante os últimos 10 anos.

Em Fernandes et al., (2013), utiliza-se a avaliação automática de

acessibilidade realizada no navegador, para analisar a estrutura Document Object

Model (DOM) de uma página Web, dadas as interações dos usuários. Foram

consideradas as diretrizes presentes nas especificações da WCAG 2.0 para avaliar o

comportamento dinâmico de páginas Web. Ressaltando que não foram utilizadas as

especificações ARIA.

O estudo conduzido por Fernandes et al. 2013 é o que mais se aproxima deste

trabalho. O que difere este trabalho é que foi levado em consideração algumas

diretrizes da WCAG 2.0, além de considerar as especificações ARIA, o que não foi

realizado no estudo anterior.

Tangarife et al., (2005) apresentam a questão da acessibilidade Web para o

Governo Eletrônico Brasileiro e uma ferramenta brasileira de validação de

acessibilidade. Foi realizada uma pesquisa exploratória, tomando por base a

homepage de um website governamental, mostrando que existe uma diferença nos

resultados obtidos seguindo as recomendações da W3C e do Governo Eletrônico.

Mostra-se a necessidade de ter uma harmonização dos padrões de acessibilidade

Web para criar uma demanda unificada do mercado para softwares que suportem

acessibilidade.

O trabalho anteriormente apresentado avaliou as diferenças entre a W3C e o

Governo Brasileiro, almejando promover a homogeneização da definição dos padrões

26

de acessibilidade. Apesar deste trabalho avaliar a acessibilidade, não foi levado em

consideração as especificações de acessibilidade do governo brasileiro, somente os

da W3C disponibilizadas no documento ARIA e WCAG 2.0.

Santana et al., 2013 conduziram um estudo comparando os snapshots3 de

dois grupos de websites, sendo o primeiro grupo composto com os 1.000 websites

mais populares segundo Alexa.com e o segundo grupo de 1.000 websites

selecionados aleatoriamente. Essa pesquisa foi baseada na WCAG 2.0. O nível de

conformidade analisado foi Nível A, que é o mínimo que uma página Web deve possui

de conformidade. No trabalho foram considerados somente os relatórios de problemas

conhecidos, fornecidos pela ferramenta AChecker4, ou seja, barreiras primárias de

acessibilidade que devem ser corrigidas pelos seus desenvolvedores. Os resultados

do estudo mostram que a quantidade de problemas conhecidos de acessibilidades

nos websites mais populares é maior do que a quantidade encontrada nos websites

aleatórios. Isto pode ocorrer devido a vários fatores, por exemplo, os websites mais

populares possuírem mais conteúdo, consequentemente eles possuem mais

componentes de interface. Outro fator é que essas páginas são constantemente

atualizadas, o que pode resultar em problemas de codificação, entre outros.

Há algumas similaridades entre o estudo conduzido por Santana et al., (2013)

com este trabalho. Por exemplo, a utilização de snapshots de uma determinada

amostra de websites para avaliar a implementação da acessibilidade destes,

baseando-se nas especificações WCAG 2.0. Porém, este trabalho se diferencia

baseando-se também no documento ARIA.

Hanson et al., 2013 conduziram um estudo realizando a comparação de dois

grupos de websites, sendo o primeiro grupo de websites governamentais e o segundo

de grupo de websites mais acessados dos Estados Unidos e do Reino Unido. O intuito

do trabalho foi examinar alterações nos indicadores de acessibilidade durante os

últimos 12 anos desses grupos, segundo os critérios de Sucesso Nível A da WCAG

2.0. Os resultados obtidos mostram que esses websites exibiram melhorias durante

os anos em uma série de indicadores, sendo estas mais perceptíveis em websites

governamentais que em websites com maior tráfego de acessos. Estas mudanças

podem ser atribuídas às tecnologias para o desenvolvimento de websites e a práticas

de codificação com foco na acessibilidade.

3 Snapshot é uma expressão em inglês que significa "foto instantânea" ou "registro instantâneo". 4 Ferramenta de avaliação de marcação disponível na Web

27

Apesar da semelhança entre o último trabalho apresentado com este, alguns

fatores os diferenciam, por exemplo, no estudo levou-se em consideração somente

websites governamentais e não governamentais dos Estados Unidos e do Reino

Unido, enquanto neste foi analisado todas as áreas de websites, e-commerce,

notícias, redes sociais entre outros. Outro fator que os deferem é a utilização dos

critérios de Sucesso Nível A presentes na WCAG 2.0 no último trabalho, enquanto

neste, algumas diretrizes foram selecionadas alternadas entre os documentos WCAG

2.0 e ARIA.

Segue abaixo a Tabela 1, contendo de forma resumida das características dos

trabalhos correlatos.

Tabela 1 – Quadro comparativo de Trabalhos Correlatos

Título Autor(es) Características Diferenças

Keyboard

Navigation

Mechanisms in

Tab Widgets: na

27nvestigation on

ARIA’s

Conformace

Willian

Massami

Watanabe,

Rafael José

Geraldo e

Renata Pontin

de M. Fortes

Avaliação da

navegação por

teclado por meio de

Tab Widgets dos 32

sites com maior fluxo

de acesso segundo

Alexa.com

Avaliação da

evolução da

implementação de

requisitos de

acessibilidade na

web em

conformidade com

as especificações

ARIA e WCAG

Three Web

Accessibility

Evaluation

Perspectives for

RIA

Nádia

Fernandes,

Ana Sofia

Batista, Daniel

Costa, Carlos

Duarte, Luís

Carriço

Avaliação automática

da estrutura DOM

HTML de acordo com

as especificações

WCAG 2.0

Além das diretrizes

da WCAG 2.0 este

trabalho analisa a

implementação de

algumas

especificações

ARIA

Estudo

Comparativo

Utilizando uma

Ferramenta de

Avaliação de

Timóteo

Tangarife e

Cláudio

Mont’Alvão

Avaliação da

acessibilidade da

página inicial de

portais

governamentais

através de uma

Avaliação de

acessibilidade de

uma amostra de

páginas iniciais dos

10 websites com

maior fluxo de

28

Acessibilidade

para Web

ferramenta, com a

finalidade de comprar

as recomendações do

modelo do Governo

Eletrônico com as da

W3C

acesso através de

um script verificando

a implementação

das diretrizes

WCAG 2.0 e ARIA.

Web Accessibility

Snapshot: Na

Effort to Reveal

Coding

Guidelines

Conformance

Vagner

Figueiredo de

Santana e

Rogério Abreu

de Paula

Comparação da

implementação de

acessibilidade dos

snapshots de dois

grupos de websites:

os 1.000 topsites com

1.000 sites aleatórios.

Monitoramento da

evolução da

implementação de

acessibilidade dos

10 topsites durante

o período de 10

anos.

Progress on

Websites Acess?

Vicki L. Hanson

e John T.

Richards

Estudo comparativo

entre a evolução da

implementação de

acessibilidade entre

sites governamentais

e os sites de maior

fluxo de acesso do

Reino Unido e nos

Estados Unidos

Avaliação e

comparação da

implementação de

acessibilidade dos

websites independe

de sua área de

mercado: compra,

venda, jornalístico,

governamental

entre outros.

Fonte: Autoria Própria

29

3 DESENVOLVIMENTO DO PROJETO

Pretende-se, neste trabalho, realizar o monitoramento da implementação de

requisitos de acessibilidade em aplicações Web, buscando promover o

desenvolvimento de conteúdo acessível e redução do tempo gasto para análise de

acessibilidade em websites.

No próximo capítulo serão apresentadas as tecnologias e ferramentas

utilizadas na construção deste trabalho.

3.1 RECURSOS UTILIZADOS

Para tornar possível o desenvolvimento da proposta, algumas tecnologias e

ferramentas foram utilizadas. A seguir serão apresentadas as características de cada

tecnologia:

GitHub: É uma ferramenta de gerenciamento de código em aplicações open

source. É um serviço que permite controlar um projeto a partir de

repositórios criados na Web. Funciona como uma “rede social” para

desenvolvedores, onde é possível compartilhar os repositórios criados para

os projetos, promovendo a participação de outros interessados, seja no

desenvolvimento do código ou no aperfeiçoamento de códigos já existentes.

PhantomJS: Ferramenta para automatizar testes para sistemas Web, que

fornece uma API completa que permite interagir com uma instância de

browser apontada para a aplicação, ou seja, acessar e manipular a estrutura

DOM da página.

CasperJS: é um utilitário de linha de comando que executa o código

JavaScript no ambiente de execução PhantomJS, também fornece a

capacidade de executar JavaScript no contexto WebKit headless, além de

fornecer um conjunto de funções para realização de tarefas comuns, como

por exemplo, preenchimento e entrega de formulários, download de

recursos, captação de imagens da página entre outras.

30

No capítulo a seguir, será apresentada a metodologia do desenvolvimento do

trabalho.

3.2 MATERIAIS E MÉTODOS

Na primeira etapa, para a seleção da lista de websites, foi utilizado o recurso

presente no website Alexa.com desenvolvido pela companhia Alexa Internet Inc. Este

serviço mede por amostragem e aproximação quantos usuários de Internet visitam um

determinado websites. Após a análise dos dados, o website fornece a ranking mundial

de websites com maior quantidade de acessos. Para este trabalho foi utilizado apenas

os 20 primeiros Topsites.

Após a definição da lista com os 20 Topsites, foi utilizado o serviço de Internet

Wayback Machine para acessar a Homepage de cada website presente na lista.

A máquina Wayback é um acervo digital desenvolvido pela organização

Internet Archive que emprega Web crawlers5 para captação de seus dados,

fornecendo acesso a coleções de materiais digitalizados, incluído websites,

aplicações, jogos, filmes entre outros. Através da máquina Wayback foi realizada a

tentativa de acesso a Homepage de cada website semestralmente entre os anos de

2005 a 2015.

A seguir, na Tabela 2 é apresentada a lista contendo os 10 Topsites em

ordem decrescente de acesso, segundo Alexa Internet Inc. acesso na data de 16 de

julho de 2015. Está presente também, o período de tempo (mês/ano) de início e

término de análise das páginas, além da classificação ou desclassificação do website,

de acordo com os critérios mencionados.

5 Crawler é um robô usado pelos buscadores para encontrar e indexar páginas de um website. Ele captura informações das páginas e cadastra os links encontrados, possibilitando encontrar outras páginas e mantendo sua base de dados atualizada.

31

Tabela 2 – Lista dos 10 Topsites

Posição no

Ranking

Websites Mês/Ano de início -

Mês/Ano de término

01º Google.com Jun/2005 – Jun/2015

02º Facebook.com Ago/2005 – Fev/2015

03º Youtube.com Jun/2005 – Jun-2015

05º Yahoo.com Jun/2005 – Jun/2015

07º Wikipedia.org Jun/2005 – Jun/2015

09º Twitter.com Nov/2006 – Mar/2015

12º Live.com Dez/2006 – Abr/2015

13º Sina.com.cn Jun/2005 – Jun/2015

17º Ebay.com Jun/2005 – Jun/2015

19º Yandex.ru Jun/2005 – Jun/105


Dentre os websites contidos na lista, apenas 10 estavam totalmente

habilitados e poderiam ser utilizados na ferramenta. Entre os critérios de

desclassificação dos websites encontram-se:

1º Critério: Não disponibilização da página (Page cannot be crawled or

displayed due to bots.txt). Este problema ocorre quando o crawler do

Internet Archive tenta processar ou digitalizar áreas da página que estão

sendo protegidas por um bots.txt6.

2º Critério: Redirecionamento a outro website que não possui relação

com a página Web informada.

3º Critério: Possuir a estruturação dos conteúdos idênticos ou bastante

similar a outro website contido na lista.

4º Critério: Carregamento parcial ou incompleto dos conteúdos da

página.

5º Critério: Atualização automática da página de tempo em tempo,

impedindo ao script realizar a captura dos dados.

Para o acesso ás Homepages de cada website especificado na Tabela 2 foi

utilizado um computador contendo o Sistema Operacional Windows 8.

6 Bots.txt é um padrão utilizado para comunicação com o crawlers e outros robôs Web. Este padrão informa quais áreas do website não devem ser processadas e digitalizadas.

32

Para codificação da ferramenta foi utilizado o editor de código fonte Sublime

Text 2 (versão 2.0.2), que possui uma interface agradável e de fácil uso, além de seus

recursos de edição e flexibilidade.

Para criar o ambiente que irá simular automaticamente as ações do usuário e

os testes, foram utilizadas as tecnologias PhantomJS (versão 1.9.8) e o CaperJS

(versão 1.1-beta3).

O método evaluate do CasperJS foi utilizado e funciona como uma ponte entre

o ambiente PhantomJS e CasperJS e o ambiente DOM da página a ser acessada, isto

equivale a executar uma instrução de código dentro do console de um navegador Web

convencional. Na Figura 2 é apresentado o esquema de interação do ambiente

PhantomJS e CasperJS com o ambiente DOM da página.

Figura 2 - Interação dos ambientes através do método evaluate().

(Fonte: CasperJS, 2011)

Simplificando, o script desenvolvido em JavaScript será executado pelo

CasperJS que irá interagir através do método evaluate com o ambiente DOM de uma

página Web simulando interações do usuário de forma automática através do

PhantomJS, para os 10 websites selecionados.

3.3 ANÁLISE E IMPLEMENTAÇÃO

33

Dentro do script foi criado um vetor que recebeu todos os links da Homepage

de cada um dos websites da lista. Para cada link o método evaluate foi invocado,

permitindo acessar a estrutura DOM do website, como parâmetro do método foi

passada uma função.

Essa função realiza uma busca na estrutura HTML do website e recebe o

nome de um elemento como parâmetro. Os seguintes elementos foram passados

como parâmetros para a função: div, (h1 – h6), img, form, fieldset, legend, label, input,

script, table, caption, style e link. Por outro lado, para a captação dos atributos foi

utilizada uma função que recebe como parâmetros o nome do elemento e o nome do

atributo a ser procurado. A esta função foi passada como parâmetro os seguintes

atributos: alt do elemento img e o role de todos os elementos. Para a captura dos

atributos aria-label, aria-labelledby e aria-describedby foi utilizada uma função sem

passagem de parâmetros.

Foi declarado um objeto que armazenou todo os objetos JavaScript Object

Notation (JSON) retornados pelas funções. Para cada link compilado foi criado uma

nova linha em arquivo de extensão Comma-Separated Values (CSV) que armazenou

os dados presentes no objeto.

3.4 ANÁLISE DOS DADOS

Para cada um dos 10 websites classificados na Tabela 2 foi executado o

script, possibilitando a extração dos resultados descritos nas seções a seguir.

3.4.1 Elementos de Cabeçalho

São elementos de cabeçalho: os elementos h1 até h6, que são títulos para as

seções com as quais estão associados (W3C, 2013). Esses elementos têm uma

classificação dada pelo número em seu nome. O elemento h1 possui o posto mais

alto, o elemento h6 tem o menor grau, e dois elementos com o mesmo nome têm o

mesmo valor de relevância (W3C, 2011).

34

De acordo com a WCAG 2.0 a Técnica H42: Utilizar h1 – h6 para identificar

cabeçalhos tem como objetivo a marcação de cabeçalhos HTML e XHTML para

transmitir a estrutura do conteúdo (W3C, 2008).

A implementação de cabeçalhos simplesmente para alterar o aspecto do texto

não transmite a organização do conteúdo e pode confundir os usuários que utilizam

cabeçalhos para compreender a estrutura ou que se baseiam nos mesmos para a

navegação. Contrariamente, enquanto aplicar o formato negrito, ou mesmo

"categoria=cabeçalho", pode resultar na apresentação visual de um header, as

tecnologias de apoio não irão reconhecer esses textos como cabeçalhos (W3C, 2008).

Essa técnica tem como objetivo satisfazer o Critério de Sucesso 1.3.1

Informações e relações. Informação, estrutura e relações transmitidas através de

apresentação pode ser determinada de forma pragmática ou estão disponíveis no

texto. (Nível A) (W3C, 2015).

O Gráfico 3, Gráfico 4, Gráfico 6 e Gráfico 9 (apêndice A) apresentaram a

maior concentração de elementos de cabeçalho em sua Homepage, apontando um

grande interesse dos desenvolvedores na estruturação dos conteúdos em suas

páginas. Diferente do Gráfico 2, Gráfico 3 e Gráfico 10 (apêndice A) que expuseram

uma menor importância na execução da Técnica H42, que possibilita a melhor

navegação de portadores de deficiência em seus conteúdos. O Gráfico 1, Gráfico 7 e

Gráfico 8 (apêndice A) representam não serem aderentes na codificação de

elementos headers na construção de sua página inicial, denotando a falta de

acessibilidade presente nos conteúdos Web.

3.4.2 Elementos de Imagem

Para inserir uma imagem em websites é necessário a declaração do elemento

img do HTML. Através dela é possível inserir informações acerca da imagem a ser

exibida. Para isso é necessário adicionar atributos ao elemento.

A Técnica H37: Utilizar atributos alt em elementos img presente na

documentação WCAG 2.0 especifica: ao utilizar o elemento img, especifique uma

alternativa em texto abreviado com o atributo alt (W3C, 2008).

35

Quando uma imagem inclui palavras importantes para compreender o

conteúdo, o texto alt deve incluir essas palavras. Isto irá permitir que o texto alt tenha

a mesma função na página que a imagem. O atributo alt não descreve

necessariamente as características visuais da própria imagem, mas tem de transmitir

o mesmo significado (W3C, 2008).

A utilização adequada da Técnica H37 atende ao Critério de Sucesso 1.1.1

Conteúdo Não Textual: Todo o conteúdo não textual que é apresentado ao utilizador

tem uma alternativa em texto que serve ao propósito equivalente (Nível A) (W3C,

2008).

O cumprimento das orientações acima possibilita as tecnologias assistivas

apresente as informações de conteúdo não textual (imagem) ao usuário em forma de

texto.

Nota-se a maior utilização de elementos de imagem e atributos alt nos Gráfico

13, Gráfico 14, Gráfico 16, Gráfico 18 e Gráfico 19 (apêndice B). O Gráfico 11, Gráfico

12, Gráfico 15, Gráfico 17 e Gráfico 20 (apêndice B) empregam em menor quantidade

o uso do elemento img na concepção de sua página Home (inicial). A parte desta

análise mais relevante foi a observação de que todos os websites possuem seus

elementos img associados a um atributo alt. Denotando assim um maior conhecimento

técnico por parte dos desenvolvedores na exibição dos conteúdos não textuais de

seus websites.

3.4.3 Elementos de Formulário

Em HTML é utilizado o elemento form para indicar que um formulário está

sendo construído. Há diversos elementos que podem ser especificados dentro de um

formulário, como o campo de entrada de dados input, label que fornece uma etiqueta

ao elemento, fieldset para agrupamento de campos, elemento legend, que fornece um

título para o grupo de campos dentro de um fieldset entre outros elementos.

A Técnica H44: Utilizar elementos label para associar etiquetas de texto a

elementos de formulário. Tem como objetivo utilizar o elemento label para associar

explicitamente uma etiqueta a um campo de formulário. O elemento label é associado

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#non-text-contentdef

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-altdef

36

a outro elemento de formulários através do atributo for que recebe como valor do

atributo o id do elemento de formulário (W3C, 2008).

O cumprimento da Técnica H44 atende aos seguintes critérios de sucesso:

1.1.1 Conteúdo Não Textual: Todo o conteúdo não textual que é

apresentado ao utilizador deve ter uma alternativa em texto equivalente

(W3C, 2008).

1.3.1 Informações e Relações: Informação, estrutura e relações

transmitidas através de apresentação pode ser determinada de forma

programática ou estão disponíveis no texto (W3C, 2008).

3.3.2 Etiquetas ou Instruções: As etiquetas ou instruções são fornecidas

quando o conteúdo exigir a entrada do usuário (W3C, 2008).

4.1.2 Nome, Função Valor: Este critério de sucesso é principalmente

para autores da Web que desenvolvem ou criam os seus próprios

componentes da Interface de usuário. Geralmente, os controles HTML

normais já cumprem este critério de sucesso quando utilizados de

acordo com a especificação (W3C, 2008).

A Técnica H71: Fornece uma descrição para grupos de controle de formulário

utilizando elementos fieldset e legend. O objetivo desta técnica é fornecer um

agrupamento semântico para controles de formulário relacionados. Isto permite aos

utilizadores compreender a relação dos controles e interagir com o formulário de forma

mais rápida e eficaz (W3C, 2008).

Os elementos form do Gráfico 21, Gráfico 22, Gráfico 23, Gráfico 24, Gráfico

25, Gráfico 26, Gráfico 27, Gráfico 28, Gráfico 29 e Gráfico 30 (apêndice C) oscilaram

pouco, além de não estarem declarados em grande quantidade na Homepage (página

inicial) dos seus websites.

Todos os gráficos apresentaram baixa concentração do elemento fieldset, isso

caracteriza maior dificuldade dos utilizadores em compreender e interagir com os

controles de formulário.

Em consequência do pouco uso do elemento fieldset, todos os websites

apresentaram baixa presença da tag legend, uma vez que declarado um fieldset em

seguida deve ser declarado um legend.

Os websites Google.com, Youtube.com, Wikipedia.org, Twitter.com,

Live.com, Ebay.com e Yandex.ru apresentaram baixa presença do elemento input em

suas páginas, dos websites mencionados apenas o Google.com, Wikipedia.com e

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#non-text-contentdef

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-altdef

37

Live.com mantem baixa a taxa de oscilação na utilização da tag os outros websites

utilizam cada vez menos o elemento. Em contrapartida os websites Facebook.com,

Yahoo.com e Sina.cn concentram grandes quantidades de inputs em sua estrutura

HTML.

Quando analisado o elemento label, apenas o website Facebook.com

apresentou grande número de declarações. Todos os outros websites continham

pequenas quantidades do elemento declarada.

O ápice da análise deste grupo de gráficos está nas observações obtidas a

respeito da associação entre os elementos input e label. Os gráficos que continham

maior incidência de associação entre os elementos foi o Gráfico 22, Gráfico 24 e

Gráfico 26 (apêndice C), apontando maior interesse em permitir ao usuário a rápida

compreensão do campo de formulário que irá interagir. O oposto pode ser observado

no Gráfico 21, Gráfico 23, Gráfico 25, Gráfico 27, Gráfico 28, Gráfico 29 e Gráfico 30

(apêndice C), que se possuem algum interesse na acessibilidade de sua página não

foi concebida.

3.4.4 Elementos Script

O elemento script é utilizada para definir uma ligação á um script externo ou

limita um script interno. A linguagem de programação JavaScript é empregada no

desenvolvimento de scripts, que geralmente contém as funções e métodos que o

website irá executar.

Pode-se observar que Gráfico 39 (apêndice D) exibe o decremento da

utilização dos elementos script em seu website. Inversamente o website Ebay.com o

Gráfico 31, Gráfico 32, Gráfico 33, Gráfico 34, Gráfico 35, Gráfico 36, Gráfico 37,

Gráfico 38 e Gráfico 40 (apêndice D) apresentam um crescimento ascende e baixa

oscilação do uso do elemento. Este fenômeno pode ser ocasionado devido ao

Movimento AJAX permitindo aos desenvolvedores importarem arquivos contendo

códigos JavaScript contendo uma série de métodos e funções já prontos para serem

empregados em seu website.

38

3.4.5 Atributos ARIA e Roles

Os atributos aria-label, aria-labelledby e aria-describedby são rotuladores de

elementos que funcionam como uma etiqueta. De acordo com a seção 6.6 ARIA, o

atributo aria-label deve ser empregado em elementos não visíveis na tela pelo usuário,

caso contrário deve ser utilizado o aria-labelledby. O atributo aria-describedby é

utilizado para identificar o elemento que descreve o objeto.

Conforme o Gráfico 41 e Gráfico 48 (apêndice E) a implementação dos

atributos em sua estrutura HTML não se fez presente, sendo nulo a quantidade de

qualquer elemento aria mencionados no início deste capítulo. Este comportamento

denota desinteresse ou falta de conhecimento técnico dos desenvolvedores dos

websites em fornecer acessibilidade a aplicações ricas de Internet. Em via contraria,

o Gráfico 41, Gráfico 42, Gráfico 43, Gráfico 44, Gráfico 45, Gráfico 46, Gráfico 47,

Gráfico 49 e Gráfico 50 (apêndice E), exibiram uma pequena, porém significativa

implementação dos atributos a fim de fornecer melhor acessibilidade a sua

Homepage.

Os atributos roles são responsáveis por definir que tipo de elemento o usuário

está interagindo. A cada tipo de role é atribuída a responsabilidade de definir o gênero

do elemento. A seguir é apresentada a classificação dos roles segundo a seção 5.3

do documento WAI-ARIA:

5.3.1 Roles Abstract são utilizados para definição de conceitos gerais.

Não deve ser utilizado para marcar conteúdo.

5.3.2 Roles Widgets determinam elementos de interface soltos, como

caixas de alerta, botões, checkbox, links, entre outros. Este role possui

uma extensão, os Act Roles que atuam como um complemento de

alguns roles Widgets declarados.

5.3.3 Roles Document Structure definem organizações da estrutura da

página. Estruturas que não são interativas, como header, footer, sidebar

entre outros.

5.3.4 Roles Landmarks devem ser adicionados para regiões importantes

da página, para auxiliar na navegação do usuário, por exemplo,

conteúdo principal, busca, formulários entre outros.

39

A pequena quantidade de atributos roles presentes no Gráfico 51, Gráfico 55,

Gráfico 60 (apêndice e), indica que estão pouco preocupados com a acessibilidade

de sua página, visto que o emprego destes atributos ocasiona a acessibilidade a RIAs.

Este fato se torna mais evidente no Gráfico 57 e Gráfico 58 (apêndice e) que não

implementaram nenhum role em seu website. Inversamente a estes resultados

negativos o Gráfico 52, Gráfico 53, Gráfico 54, Gráfico 56 e Gráfico 59 (apêndice e)

que concentram um aumento significativo da utilização dos atributos.

3.4.6 Elementos de Tabela e CSS

A tag table é utilizada para declarar a criação de tabela em website.

Durante o período de abertura até o fechamento da tag é definida uma série de outros

elementos para a estruturação da tabela. Para realizar a divisão de conteúdo é

utilizado o elemento div sem adicionar qualquer significado especial aos dados no

elemento contido.

Os elementos style são utilizados para escrever CSS dentro do código

HTML. São eles que possibilitam a alteração da cor do fundo da tela, ou dimensionar

uma imagem, mudar o tamanho da fonte do texto entre outras funcionalidades.

Usado para ligar arquivos JavaScript e CSS externo ao documento HTML, a

tag link, possibilita a utilização de códigos já existentes para definir um estilo a um

elemento ou utilizar uma função já desenvolvida.

Em concordância com o Gráfico 61, Gráfico 62, Gráfico 63, Gráfico 64, Gráfico

65, Gráfico 66, Gráfico 67, Gráfico 68, Gráfico 69 e Gráfico 70 (apêndice F) cujo o

crescimento ascendente de elementos div é notório, denotando melhor divisão dos

seus conteúdos.

Os websites Google.com, Facebook.com, Wikipedia.org, Twitter.com e

Yandex.ru, apresentaram pequenas oscilações de implementação do elemento table.

Em aversão a estes os websites Youtube.com, Yahoo.com, Live.com, Sina.cn e

Ebay.com exibiram uma queda brusca da utilização da etiqueta table, este fenômeno

deve ter sido ocasionado pelo Movimento Tableless, movimento este que não se

utiliza do elemento table para definir o layout de página e sim os novos recursos

disponíveis como o elemento style.

40

A quantia de elemento de estilo é bem próxima em todos os websites e quase

não oscilaram em sua estrutura, com exceção do website Sina.cn (apêndice F), que

fez uso maior do elemento style, provavelmente devido o layout de sua página ser

mais complexo.

Os websites Google.com, Live.com e Sina.cn (apêndice F) foram os que

menos empregaram o elemento link, diferentemente dos websites Facebook.com,

Youtube.com, Yahoo.com, Wikipedia.com, Twitter.com, Ebay.com e Yandex.ru

(apêndice F) que apresentaram maior índices de incidência de elementos link em sua

estrutura HTML. A maior utilização deste elemento caracteriza que os websites estão

cada vez mais importando arquivos para dentro de suas estruturas, sejam estes para

alterar o layout existente da página ou disponibilizar uma interação ao usuário.

41

4 CONSIDERAÇÕES FINAIS

Neste trabalho foi apresentada uma abordagem para monitorar a evolução da

implementação de acessibilidade em aplicações web de acordo com uma lista

contendo os 10 sites com maior tráfego de acessos na Internet. A utilização de eventos

associados a interação dos usuários com as RIAs de forma automática tem potencial

para obter resultados para reduzir o esforço do avaliador e o tempo de duração do

processo.

A abordagem proposta neste trabalho foi o desenvolvimento de um script, que

simulou a interação do usuário com a página DOM do HTML capturando dados

referentes a acessibilidade durante o período de 2005 a 2015 dos websites da lista.

Os indicadores obtidos na avaliação automática foram transformados em

gráficos para comparação de implementação de acessibilidade entre cada um dos

websites. Foram observados os problemas primários de acessibilidade de cada um

dos websites, como elementos img associados aos atributos alt, implementação dos

atributos roles e aria, elementos input associados aos elementos label, entre outros

obstáculos de acessibilidade.

Os resultados permitiram avaliar que todos os websites possuem limitações

de acessibilidade em sua Homepage. Apesar das barreiras de acessibilidade

encontradas, através dos gráficos notou-se o crescimento pequeno, porém

significativo na elaboração de acessibilidade nos websites. Esta preocupação na

construção de websites acessíveis, possibilita a inclusão digital de pessoas

deficientes.

4.1 LIMITAÇÕES E RESTRIÇÕES

As principais limitações e restrições deste trabalho podem ser destacadas de

acordo com os seguintes itens:

A ferramenta ficou limitada a uma amostra dos elementos da

documentação ARIA.

42

Restrição de elementos HTML que estão presentes nas especiações

WCAG 2.0.

Alguns websites presentes no acervo do Internet Archive encontravam-

se indisponíveis ou com problemas no carregamento do seu conteúdo,

além da restrição dos bots.txt na data da elaboração do trabalho.

4.2 TRABALHOS FUTUROS

Alguns dos trabalhos futuros que podem dar continuidade às contribuições

apresentadas são resumidos a seguir:

Realizar o aprimoramento da ferramenta no intuído de reduzir o tempo

consumido para coleta dos dados.

Após a coleta dos dados desenvolver um método para que seja

realizado automaticamente a geração dos gráficos.

Aprimorar as funcionalidades da ferramenta, para que o monitoramento

possa se estender a outros elementos que não foram levados em

consideração nesta pesquisa.

A comparação dos indicadores obtidos antes e após alterações na

Homepage de cada website. Assim, seria possível verificar se

realmente houve melhoria depois da execução do script.

43

REFERÊNCIAS

BOLDYREFF, C. Determination and Evaluation of Web Accessibility. In: PROCEEDINGS OF THE 11TH IEEE INTERNATIONAL WORKSHOPS ON ENABLING TECHNOLOGIES: Infrastructure for Collaborative Enterprises. Washington: IEEE, jun. 2002. p. 35–40. BRASIL. Decreto nº 5.296, de 2 de dezembro de 2004. Casa Civil, Brasília, DF, 2 dez.2004. Disponível em: <http://www.planalto.gov.br/ccivil_03/_ato2004-2006/2004/decreto/d5296.htm>. Acesso em: 3 de out. 2014. BRASIL. Modelo de Acessibilidade em Governo Eletrônico. Departamento de Governo Eletrônico. Brasília, DF, v. 3.1, abr. 2014. COOK, A. M.; HUSSEY, S. M. Assistive Technologies: Principles and Practice. St. Loius: Mosby Inc, 1995. 571 p. 3 v FERNANDES, N. et al. Three Web Accessibility Evaluation Perspectives for RIA. In: PROCEEDINGS OF THE 10TH INTERNATIONAL CROSS-DISCIPLINARY CONFERENCE ON WEB ACCESSIBILITY (W4A '13). New York: ACM, mai. 2013. p. 9. FERNANDES, N. et al. Evaluating the accessibility of Rich Internet Applications. In: PROCEEDINGS OF THE INTERNATIONAL CROSS-DISCIPLINARY

CONFERENCE ON WEB ACCESSIBILITY (W4A '12). New York: ACM, abr. 2012. p. 4. FIGUEIREDO, R. Acessibilidade: Dever social, legal e moral. In: Revista Direcional Condomínios, São Paulo, ed.161. p. 46-53. set. 2011. FORTES, R. P. et al. Acessibilidade no Projeto de Aplicações Web. In: Web e Multimídia: Desafios e Soluções. 1.ed. Poços de Caldas: PUC-Minas, 2005. cap. 7, p. 197-225. GIBSON, B.; SCHWERDTFEGER, R. DHTML accessbility: solving the javascript accessibility problem. In: PROCEEDINGS OF THE 7TH INTERNACONAL ACM SIGACCESS CONFERENCE ON COMPUTERS AND ACCESSIBILITY (ASSETS

'05). New York: ACM, out. 2005. p. 202-203.

http://www.planalto.gov.br/ccivil_03/_ato2004-2006/2004/decreto/d5296.htm

http://www.planalto.gov.br/ccivil_03/_ato2004-2006/2004/decreto/d5296.htm

44

GIBSON, B. Enabling an Acessible Web 2.0. In: PROCEEDINGS OF THE 2007 INTERNATIONAL CROSS-DISCIPLINARY CONFERENCE ON WEB ACCESSIBILITY (W4A). New York: ACM, maio 2007. p. 1-6. HANSON, V. L.; RICHARDS J. T. Progress on Websites Accessibility?. In: ACM TRANSACTIONS ON THE WEB (TWEB). New York: ACM, marc. 2013. p. 30. HENRY, S. L. et al. Introduction to Web Accessibility, 2005. Disponivél em: <http://www.w3.org/WAI/intro/accessibility.php>. Acesso em: 24 out. 2014. IBGE, Pessoas portadoras de deficiência, 2010. Disponível em: <http://7a12.ibge.gov.br/vamos-conhecer-o-brasil/nosso-povo/caracteristicas-da-populacao.html >. Acesso em: 24 out. 2014. FIGUEIREDO, Rosali. Acessibilidade: Dever social, legal e moral, 2011. Disponível em: <http://www.direcionalcondominios.com.br/sindicos/materias/item/1509-acessibilidade-dever-social-legal-e-moral.html>. Acesso em: 24 set. 2014. SANTANA, V. F.; PAULA R. A. Web Accessibility Snapshot: An Effort to Reveal Coding Guidelines Conformance. In: PROCEEDINGS OF THE 10TH INTERNATIONAL CROSS-DISCIPLINARY CONFERENCE ON WEB

ACCESSIBILITY (W4A '13). New York: ACM, maio 2013. p. 4. SPELTA, L.; SOARES, H. Análise de Acessibilidade dos Websites Oficiais dos Três Principais Candidatos à Presidência do Brasil, 2010. Disponível em: <http://acessodigital.net/art_analises-websites-candidatos.html>. Acesso em: 30 nov. 2014. TANGARIFE, T.; MONT’ALVÃO, C. Estudo Comparativo utilizando uma ferramenta de avaliação de acessibilidade para web. In: PROCEEDINGS OF THE 2005 LATIN

AMERICAN CONFERENCE ON HUMAN-COMPUTER INTERACTION (CLIHC '05). New York: ACM, out. 2005. p. 313-318. WATANABE, W. M.. Auxílio à leitura de textos em português: questões de acessibilidade. 2010. 86 f. Dissertação (Mestrado em Ciências de Computação e Matemática Computacional) – Instituto de Ciências Matemáticas e de Computação. Universidade de São Paulo, São Carlos, 2010. WATANABE, W. M. et al. Keybord Navigation Mechanisms in Tab Widgets: on investigation on ARIA’s Conformance. In: PROCEEDINGS OF THE 29TH ANNUAL

ACM SYMPOSIUM ON APPLIED COMPUTING (SAC '14). New York: ACM, mar. 2014. p. 721-726.

45

WATANABE, W. M. Avaliação automática de acessibilidade em RIA, 2014. 151 f. Tese (Doutorado em Ciências de Computação e Matemática Computacional) – Instituto de Ciências Matemáticas e de Computação. Universidade de São Paulo, São Carlos, 2014. W3C. Accessible Rich Internet Applications (WAI-ARIA) 1.0, 2014. Disponível em: <http://www.w3.org/TR/wai-aria/>. Acesso em: 29 set. 2014. W3C. Accessible Rich Internet Applications (WAI-ARIA) 1.1, 2014. Disponível em: <http://www.w3.org/TR/wai-aria-1.1/>. Acesso em: 29 set. 2014. W3C. Accessibility Features of CSS, 1999. Disponível em: <http://www.w3.org/1999/08/NOTE-CSS-access-19990804>. Acesso em: 29 set. 2014. W3C. Authoring Tool Accessibility Guidelines 1.0, 2000. Disponível em: <http://www.w3.org/TR/WAI-AUTOOLS/>. Acesso em: 29 set. 2014. W3C. Cartilha de Acessibilidade na Web, 2013. Disponível em: <http://acessibilidade.w3c.br/cartilha/fasciculo1/#capitulo2>. Acesso em: 01 out. 2015. W3C. HTML: The Markup Language, 2013. Disponível em: <http://www.w3.org/TR/html-markup/Overview.html#toc>. Acesso em: 01 out. 2015. W3C. HTML 4.01 Specification, 1999. Disponível em: <http://www.w3.org/TR/html4/>. em: 01 out. 2015. W3C. HTML/ Elements/h1,h2,h3,h4,h5 and h6, 2011. Disponível em: <https://www.w3.org/wiki/HTML/Elements/h1,_h2,_h3,_h4,_h5,_and_h6>. Acesso em: 01 out. 2015. W3C. Técnicas para as WCAG 2.0: Técnicas e Falhas para as Diretrizes de Acessibilidade para o Conteúdo da Web 2.0, 2008. Disponível em: <http://www.acessibilidade.gov.pt/w3/TR/WCAG20-TECHS/>. Acesso em: 01 out. 2015. W3C. User Agent Accessibility Guidlines 1.0, 2002. Disponível em: <http://www.w3.org/TR/UAAG10/>. Acesso em: 29 set. 2014.

http://www.w3.org/TR/wai-aria-1.1/

http://www.w3.org/1999/08/NOTE-CSS-access-19990804

http://www.w3.org/TR/WAI-AUTOOLS/

http://acessibilidade.w3c.br/cartilha/fasciculo1/#capitulo2>. Acesso

http://www.w3.org/TR/html-markup/Overview.html#toc

https://www.w3.org/wiki/HTML/Elements/h1,_h2,_h3,_h4,_h5,_and_h6

http://www.acessibilidade.gov.pt/w3/TR/WCAG20-TECHS/

http://www.w3.org/TR/UAAG10/

46

W3C. WAI Guidelines and Tecnhiques, 2015. Disponível em: <http://www.w3.org/WAI/guid-tech.html>. Acesso em: 01 out. 2015. W3C. Web Content Acessibility Guidelines 1.0, 1999. Disponível em: <http://www.w3.org/TR/WAI-WEBCONTENT/>. Acesso em: 29 set. 2014.

http://www.w3.org/WAI/guid-tech.html

http://www.w3.org/TR/WAI-WEBCONTENT/

47

APÊNDICE A – Gráficos dos Elementos de Cabeçalho

48

Gráfico 1 - Elementos de cabeçalho do Google.

Fonte: Autoria própria

Gráfico 2 - Elementos de cabeçalho do Facebook.


0

0.5

1

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

1

0

0 0 0 0 0 0 0 0 0 0 0 0 0

1 1 1 1 1 1 1 1

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de Cabeçalho do Google

h1 h2 h3 h4 h5 h6

012

3

4

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

01

0

2

0

2

0

2

00 00 00 00 00 00 00 0 0 00 00 00 0

1

0

2

0

2

0

2

1

2

0

1

0 01

00 01

01

00 00 0

4

0

2

0

1

0

1

0

1 1

0 0

1 11 11 1

2

1

2

1

2

1

2

1

2

11

000 00 00 00 00 00 0

1

00 00 00 00 0 0 00 00 00 00 00 00 00 00 00

000 00 00 0

2

00 00 00 00 00 00 00 0 0 00 00 00 00 00 00 00 00 00

000 00 00 00 00 00 00 00 00 00 00 0 0 00 00 00 00 00 00 00 00 00

000 00 00 00 00 00 00 00 00 00 00 0 0 00 00 00 00 00 00 00 00 00

0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Facebook

h1 h2 h3 h4 h5 h6

49

Gráfico 3 – Elementos de cabeçalho do Youtube.


Gráfico 4 - Elementos de cabeçalho do Yahoo


050

100

150

200

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 3 0 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 2 0 0 1 0 11 3 3 17 175 10 16 8

0 0 1 0 1 0 0 0 0 0 2 4 533

3 3 246 52

178

77

0 0 1 0 0 0 0 0 0 0 0 0 029 22

0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Youtube

h1 h2 h3 h4 h5 h6

0

20

40

60

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1

0 0 0 0 0 0 0 0 0 013 14 15 19 19 18

9 10 11 11 11

0 0 0 0 0 0 0 0 0 0 6 4 3 3 3 3

39 4047 44 44

0 0 0 0 0 0 0 0 0 0 3 1 1 7 7 8 10 9 7 9 6

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Yahoo

h1 h2 h3 h4 h5 h6

50

Gráfico 5 – Elementos de cabeçalho do Wikipédia


Gráfico 6 – Elementos de cabeçalho do Twitter


0

5

10

15

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

0 0

8 8 8 8 8 8 8 8 8 8 8 8 9 9 109 9 9 10

7 7

1 1 1 1 1 1 1 1 10 0 0 0

12 12 12 1211 11

0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 0 0 0 0 0

5 5 5 6 7 7 7 7 7 711 11 11 11 11

0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Wikipédia

h1 h2 h3 h4 h5 h6

h1

h4

0

10

20

30

No

v-0

6A

pr-

07

Sep

-07

Feb

-08

Jul-

08

Dec

-08

May

-09

Oct

-09

Mar

-10

Au

g-1

0

Jan

-11

Jun

-11

No

v-1

1

Ap

r-1

2

Sep

-12

Feb

-13

Jul-

13

Dec

-13

May

-14

Oct

-14

Mar

-15

11 1 1 1 1 0 1 0 0 1 1 1 1 1 1 1 1 0

11 1 1 1 1 1 3 4 51 1 1 4 5 4 3 3 3

33 3 1 1 1 1 2 4 42 1 0

1317 18

15 1824

00 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1

00 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

00 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Twitter

h1 h2 h3 h4 h5 h6

51

Gráfico 7 – Elementos de cabeçalho do Live


Gráfico 8 – Elementos de cabeçalho do Sina


0

1

2

3

Dec

-06

May

-07

Oct

-07

Mar

-08

Au

g-0

8

Jan

-09

Jun

-09

No

v-0

9

Ap

r-1

0

Sep

-10

Feb

-11

Jul-

11

Dec

-11

May

-12

Oct

-12

Mar

-13

Au

g-1

3

Jan

-14

Jun

-14

No

v-1

4

Ap

r-1

5

0

1

0 0 0 0 0 0 0

1

0 0 0 0 0 0 0 0

0 0 0 0 0

1 1

0 0 0 0 0 0 0 0 0 0 0

0 0

1

0 0

3 3

0 0

1

0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Live

h1 h2 h3 h4 h5 h6

0

50

100

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 3 1 1 1 1 1 1 1 1 1 0 0 0 0 0

0 0 0 0 0 0

99

23 23 21 23 22 25 25 25 27

0 0 0 0 0

0 0 0 0 1 1 7 0 0 0 0 0 0 0 0 016 14 14 14 18

0 0 0 0 0 030

1 1 1 1 1 1 2 1 1 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Sina

h1 h2 h3 h4 h5 h6

52

Gráfico 9 – Elementos de cabeçalho do Ebay


Gráfico 10 - Elementos de cabeçalho do Yandex


0

20

40

60

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1

0 0 0 0 0 0 0 0 0 0 1

24 22 25 2515

0

22

58

40

4

0 0 0 0 0 0 0 0 0 0

37

0 1 2 2 2 2

21

57

38

56

0 0 0 0 0 0 0 0 0 0 0 0 0 0 09 10

0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Ebay

h1 h2 h3 h4 h5 h6

0

10

20

30

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 1

0 0 0 0 0

18 2117 15 17

8 7 75 6 5

1 2 1 1

10

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de cabeçalho do Yandex

h1 h2 h3 h4 h5 h6

53

APÊNDICE B – Gráficos de Elementos de Imagem

54

Gráfico 11- Elementos Img do Google


Gráfico 12 – Elementos Img do Facebook


02

4

6

8

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

56 6 6

5 5 5 5 5 5 5 5 5 5 5 54

5 5

76

56 6 6

5 5 5 5 5 5 5 5 5 5 5 54

5 5

760 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Google

img alt img sem alt

0

5

10

15

Au

g-0

5

Feb

-06

Au

g-0

6

Feb

-07

Au

g-0

7

Feb

-08

Au

g-0

8

Feb

-09

Au

g-0

9

Feb

-10

Au

g-1

0

Feb

-11

Au

g-1

1

Feb

-12

Au

g-1

2

Feb

-13

Au

g-1

3

Feb

-14

Au

g-1

4

Feb

-15

4 4 4 46 6 6

58 9 9 9 10

98 9

1110 10 10

8

4 4 4 46 6 6 5

8 9 9 9 109

8 911

10 10 108

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Facebook

img alt img sem alt

55

Gráfico 13 – Elementos Img do Youtube


Gráfico 14 - Elementos Img do Yahoo


0

100

200

300

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

27

149

67 102124123

55 6833 40

93 128179

223

150 144 157208

249205

96

27

149

67 102124123

55 6833 40

93 128179

223

150 144 157208

249205

96

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Youtube

img alt img sem alt

020

40

60

80

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

22 24 226 6 6 6 6 6 6 16 16 18

35

70 6760

70 7767

6322 24 22

6 6 6 6 6 6 6 16 16 1835

70 6760

70 7767

630 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Yahoo

img alt img sem alt

56

Gráfico 15 – Elementos Img do Wikipédia


Gráfico 16 – Elementos Img do Twitter


0

10

20

30

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

19 18 19 20 20 20 20 20 21 2220 21 20 21 22

2025 24 23 23 24

19 18 19 20 20 20 20 20 21 2220 21 20 21 22

2025 24 23 23 24

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Wikipédia

img alt img sem alt

0204060

80

No

v-0

6

Ap

r-0

7

Sep

-07

Feb

-08

Jul-

08

Dec

-08

May

-09

Oct

-09

Mar

-10

Au

g-1

0

Jan

-11

Jun

-11

No

v-1

1

Ap

r-1

2

Sep

-12

Feb

-13

Jul-

13

Dec

-13

May

-14

Oct

-14

Mar

-15

1313 247 7 7 7 8

50 4734

4 4 9 8 6 8 8

651313 247 7 7 7 8

50 4734

4 4 9 8 6 8 8

6500 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Twitter

img alt img sem alt

57

17 – Elementos Img do Live


Gráfico 18 – Elementos Img do Sina


0

5

10

Dec

-06

May

-07

Oct

-07

Mar

-08

Au

g-0

8

Jan

-09

Jun

-09

No

v-0

9

Ap

r-1

0

Sep

-10

Feb

-11

Jul-

11

Dec

-11

May

-12

Oct

-12

Mar

-13

Au

g-1

3

Jan

-14

Jun

-14

No

v-1

4

Ap

r-1

5

79

5 54

0

46

9 9 9 9

5 5 5 5 5 5

79

5 54

0

46

9 9 9 9

5 5 5 5 5 5

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Live

img alt img sem alt

0

100

200

300

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

52 49 63125131135

225

61 61 74 78 67 60 73 84 90 111 115 123 127 159

52 49 63125131135

225

61 61 74 78 67 60 73 84 90 111 115 123 127 1590 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Sina

img alt img sem alt

58

Gráfico 19 – Elementos Img do Ebay


Gráfico 20 – Elementos Img do Yandex


0

100

200

300

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

98 132127132105

15 13 14 13 10 10 4023 49 43 32 62

188 203173

154

98 132127132105

15 13 14 13 10 10 4023 49 43 32 62

188 203173

1540 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Ebay

img alt img sem alt

0

10

20

30

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

29

20 2117 15

913

11 10 916

10 118

139

6 9

18

8 8

29

20 2117 15

913 11 10 9

16

10 118

139

6 9

18

8 8

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos Img do Yandex

img alt img sem alt

59

APÊNDICE C – Gráficos dos Elementos de Formulários

60

Gráfico 21- Elementos de Formulário do Google


Gráfico 22 – Elementos de formulário do Facebook


0

5

10

15

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

9 9 8 9 8 9 8 8 8 9 10 9 9 10 10 10 10 10 108

120 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Google

form fieldset legend input label labelsAssociados

0102030

40

Au

g-0

5

Feb

-06

Au

g-0

6

Feb

-07

Au

g-0

7

Feb

-08

Au

g-0

8

Feb

-09

Au

g-0

9

Feb

-10

Au

g-1

0

Feb

-11

Au

g-1

1

Feb

-12

Au

g-1

2

Feb

-13

Au

g-1

3

Feb

-14

Au

g-1

4

Feb

-15

2 2 2 2 2 3 4 3 4 4 4 4 3 3 3 3 3 3 3 3 4

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

1111 13 10 10 1424 24

31 33 3339

3338 37 38 36 36 35 34 37

2 2 2 2 2 3 4 2 2 2 7 7 12 12 128 8 7 7 7 7

2 2 2 2 2 3 4 2 2 2 7 7 12 12 128 8 7 7 7 7Q

uan

tid

ade

Período de tempo

Elementos de Formulário do Facebook


61

Gráfico 23 – Elementos de formulário do Youtube


Gráfico 24 – Elementos de formulário do Yahoo


0

5

10

15

20

25

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

2 2 3 5 5 64 4 4 4 3 4 4

3 3 3 3 3 3 3 3

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

6 7 7

13 12

23

16

23

12 129 11

17

13 129 9

7 7 7 7

0 0 0 0 04

0 0 0 0 0 0 1 2 2 2 2 1 1 1 0

0 0 0 0 04

0 0 0 0 0 0 1 1 1 1 1 1 1 1 0

Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Youtube


05

10

15

20

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

3 3 42 2 2 2 2 2 2 3 3 4

7 6 5 5 5 5 5 5

0 0 0 0 0 0 0 0 0 0 1 1 1 2 2 2 1 1 1 1 1

0 0 0 0 0 0 0 0 0 0 1 1 1 2 2 2 1 1 1 1 1

9 9 119 9 9 9 9 9 9 11 11 13

2017 16 17 17 17 18 18

2 2 20 0 0 0 0 0 0 1 2 3

7 6 64 4 4 4 4

1 1 1 0 0 0 0 0 0 0 1 2 37 6 6

4 4 4 4 4Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Yahoo


62

Gráfico 25 – Elementos de formulário do Wikipédia


Gráfico 26 – Elementos de formulário do Twitter


0246

8

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

7 7 7 7 7 7 7 78 8

6 6 6 6 6 6 6 6

8 8 8

1 1 1 1 1 1 1 1 1 1 21 1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1 1 21 1 1 1 1 1 1 1 1 1

Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Wikipédia


0

20

40

60

No

v-0

6A

pr-

07

Sep

-07

Feb

-08

Jul-

08

Dec

-08

May

-09

Oct

-09

Mar

-10

Au

g-1

0

Jan

-11

Jun

-11

No

v-1

1

Ap

r-1

2

Sep

-12

Feb

-13

Jul-

13

Dec

-13

May

-14

Oct

-14

Mar

-15

22 2 2 3 3 3 4 4 4 8 5 6 10 11 118 9 7

11 1 1 1 1 1 1 1 0 4 4 2 4 4 51 2 1

00 0 1 1 1 1 0 0 0 0 0 0 0 0 2 1 2 1

88 8 8 9 9 10 14 16 17 2520 27

50 51 5141 48

3133 3 3 3 3 3 5 4 3 4 4 4

17 1914

7 11 9

11 1 3 3 3 3 5 4 3 4 4 413 15

10 6 10 8Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Twitter


63

Gráfico 27 – Elementos de formulário do Live


Gráfico 28 – Elementos de formulário do Sina


0

5

10

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

2 2 2 2 21 2 2 2 2 2 2 2 2 2 2 2 2

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

8 8 97 7

3

7

1010 109 9

8 8 8 8 8 82 2

0 0 0 0 0

5 5 54 4

1 1 1 1 1 1

2 20 0 0 0 0

5 5 54 4

1 1 1 1 1 1Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Live


02040

60

80

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

3 3 4 13 15 151011 12 11 11

6 7 6 5 5 11 11 11 11 13

0 0 0 0 0 0 2 6 6 6 61 1 1 1 1 0 0 0 0 0

0 0 0 0 0 0 2 1 1 1 1 1 1 1 1 1 0 0 0 0 0

19 21 26

506263

3643 41 38 4437 40

33 28 29 36 35 33 36 410 0 0 0 1 1

50

2 2 2 2 2 2 2 2 2 1 1 1 1 1

0 0 0 0 1 1

50

2 2 2 2 2 2 2 2 2 1 1 1 1 1

Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Sina


64

Gráfico 29 – Elementos de formulário do Ebay


Gráfico 30 – Elementos de formulário do Yandex


0

5

10

15

20

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

6 5 4 4 3 3 2 2 2 2 2 2 3 3 3 3 32 2 2 2

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

1614 13 13

9 9 8 9 9 9 9 9 10 108 9 9 9 8 8 8

0 0 0 0 0 0 0 0 0 0 2 2 2 20 1 2 1 1 1 1

0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 1 1 1 1 1 1

Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Ebay


05

10

15

20

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 43 3 3

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

15 15 15 15 15

10 10 10 10 11 11 1311 13 12 12 12

20

1310 10

1 1 1 1 1 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

1 1 1 1 1 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

Qu

anti

dad

e

Período de tempo

Elementos de Formulário do Yandex


65

APÊNDICE D – Gráficos dos Elementos Script

66

Gráfico 31 - Elementos script do 1º ao 5º Topsites


Gráfico 32 – Elementos script do 6º ao 10º Topsites


0

20

40

60

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

8 7 9 9 9 8 8 10 12 12 12 12 13 1915 17 17 19 18 21 19

7 8 10 9 1427

15 15 16 13 13 14 18 15 18 17 17 17 17 17 20

10 12 1531 29

23 24 2823 22 22 24 27

20 27 27 2738

3326 29

3117

35

6 6 6 6 6 6 6

42

22 21 21 23 23 29 33 3120 23

9 10 11 12 13 18 15 17 17 21 22 22 21 17 17 18 17 16 16 17 18Qu

anti

dad

e

Periodo de tempo

Elementos Script 1º ao 5º Topsites

Google Facebook Youtube Yahoo Wikipedia

0

50

100

150

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 14 14 9 12 12 17 16 15 19 20 20 18 18 12 11 11 12 11 14

0 0 0 10 10 9 9 11 16 20 12 13 13 14 15 14 14 15 15 14 14

37 43 39

82 7398 109

89 97 93 103120 118 123 117 114 108

142122 126 12232 37 35 38 39

27 28 27 31 28 2817 18 22 20 20 13 18 12 15 16

9 10 11 13 12 12 13 14 15 19 16 17 20 17 20 18 12 16 15 20 20

Qu

anti

dad

e

Período de tempo

Elementos Script 6º ao 10º Topsites

Twitter Live Sina ebay Yandex

67

APÊNDICE E – Gráficos dos Atributos Aria e Roles

68

Gráfico 33 – Atributos ARIA do Google


Gráfico 34 – Atributos ARIA do Facebook


0

0.5

1

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Google

arialabel arialabelledby ariadescribedby

0

5

10

Au

g-0

5

Feb

-06

Au

g-0

6

Feb

-07

Au

g-0

7

Feb

-08

Au

g-0

8

Feb

-09

Au

g-0

9

Feb

-10

Au

g-1

0

Feb

-11

Au

g-1

1

Feb

-12

Au

g-1

2

Feb

-13

Au

g-1

3

Feb

-14

Au

g-1

4

Feb

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0

4

10

7 7 7 7

10

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Facebook


69

Gráfico 35 – Atributos ARIA do Youtube


Gráfico 36 – Atributos ARIA do Yahoo


0

50

100

150

200

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 11

6034

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

174

73

Qu

anti

dad

e

Período de tempo

Atributos Aria do Youtube


020

40

60

80

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 10 11 10 10

0 0 0 0 0 0 0 0 0 0

62

18 21 24 24 2521

1 1 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Yahoo


70

Gráfico 37 – Atributos ARIA do Wikipédia


Gráfico 38 – Atributos ARIA do Twitter


0

5

10

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

10 10 10 10

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Wikipédia


00.5

11.5

2

No

v-0

6

Ap

r-0

7

Sep

-07

Feb

-08

Jul-

08

Dec

-08

May

-09

Oct

-09

Mar

-10

Au

g-1

0

Jan

-11

Jun

-11

No

v-1

1

Ap

r-1

2

Sep

-12

Feb

-13

Jul-

13

Dec

-13

May

-14

Oct

-14

Mar

-15

00 0 0 0 0 0 0 0 0 0 0 0 0 0

1 1 1 1

00 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

2

00 0 0 0 0 0 0 0 0 0 0 0 0 0

2

1 1

2

Qu

anti

dad

e

Período de tempo

Atributos Aria do Twitter


71

Gráfico 39 – Atributos ARIA do Live


Gráfico 40 – Atributos ARIA do Sina


00.5

11.5

2

Dec

-06

May

-07

Oct

-07

Mar

-08

Au

g-0

8

Jan

-09

Jun

-09

No

v-0

9

Ap

r-1

0

Sep

-10

Feb

-11

Jul-

11

Dec

-11

May

-12

Oct

-12

Mar

-13

Au

g-1

3

Jan

-14

Jun

-14

No

v-1

4

Ap

r-1

5

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0

2 2 2 2 2

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

2

Qu

anti

dad

e

Período de tempo

Atributos Aria do Live


0

0.5

1

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Sina


72

Gráfico 41 – Atributos ARIA do Ebay


Gráfico 42 – Atributos Aria do Yandex


0

1

2

3

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

2

3

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

1 1 1

0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Ebay


05

10

15

20

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

19

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 03

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Aria do Yandex


73

Gráfico 43- Atributos Roles do Google


Gráfico 44 – Atributos Roles do Facebook


0

0.5

1

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

1

0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

1

0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Roles do Google

Landmark Roles Abstract Roles Act Roles Structure Roles

0

5

10

Au

g-0

5

Feb

-06

Au

g-0

6

Feb

-07

Au

g-0

7

Feb

-08

Au

g-0

8

Feb

-09

Au

g-0

9

Feb

-10

Au

g-1

0

Feb

-11

Au

g-1

1

Feb

-12

Au

g-1

2

Feb

-13

Au

g-1

3

Feb

-14

Au

g-1

4

Feb

-15

0 0 0 0 0 0 0 0 0 0 0 02 2 2

1 1 1 1 13

0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 2

9 9 9 9 10

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1

Qu

anti

dad

e

Período de tempo

Atributos Roles do Facebook


74

Gráfico 45 – Atributos Roles do Youtube


Gráfico 46 – Atributos Roles do Yahoo


050

100

150

200

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 3

0 0 0 0 0 0 0 0 0 0 0

65 8962

45 45 4570

5

175

76

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 4 4

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Roles do Youtube


05

10

15

20

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 04 4 4 4 6

5 5 5 5

0 0 0 0 0 0 0 0 0 03 3 5 6

17 17 17 16 16 15 150 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

8 9 10 10 10Qu

anti

dad

e

Periodo de tempo

Atributos Roles do Yahoo


75

Gráfico 47 – Atributos do Roles Wikipédia


Gráfico 48 – Atributos Roles do Twitter


0

5

10

15

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

14 14 14 14 14 14

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Periodo de tempo

Atributos Roles do Wikipédia


0

20

40

60

No

v-0

6

Ap

r-0

7

Sep

-07

Feb

-08

Jul-

08

Dec

-08

May

-09

Oct

-09

Mar

-10

Au

g-1

0

Jan

-11

Jun

-11

No

v-1

1

Ap

r-1

2

Sep

-12

Feb

-13

Jul-

13

Dec

-13

May

-14

Oct

-14

Mar

-15

00 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 2

00 0 0 0 0 0 0 0 0 0 0 0 0 0 09 9

23

00 0 0 0 0 0 0 0 0 0 0 0 0 0 2 1 1 3

00 0 0 0 0 0 0 0 0 0 0 0 0 0

24 21 22

50

Qu

anti

dad

e

Período de tempo

Atributos Roles do Twitter


76

Gráfico 49 – Atributos Roles do Live


Gráfico 50 – Atributos Roles do Sina


0

0.5

1

Dec

-06

May

-07

Oct

-07

Mar

-08

Au

g-0

8

Jan

-09

Jun

-09

No

v-0

9

Ap

r-1

0

Sep

-10

Feb

-11

Jul-

11

Dec

-11

May

-12

Oct

-12

Mar

-13

Au

g-1

3

Jan

-14

Jun

-14

No

v-1

4

Ap

r-1

5

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Roles do Live


0

0.5

1

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Qu

anti

dad

e

Período de tempo

Atributos Roles do Sina


77

Gráfico 51 – Atributos Roles do Ebay


Gráfico 52 – Atributos Roles do Yandex


0

50

100

150

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 0 0 0 3 6

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 5 4

0 0 0 0 0 0 0 0 0 0 0 15 8 8 8 9 9 90 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 12

111

Qu

anti

dad

e

Período de tempo

Atributos Roles do Ebay


0

5

10

15

Jun

-05

Dec

-05

Jun

-06

Dec

-06

Jun

-07

Dec

-07

Jun

-08

Dec

-08

Jun

-09

Dec

-09

Jun

-10

Dec

-10

Jun

-11

Dec

-11

Jun

-12

Dec

-12

Jun

-13

Dec

-13

Jun

-14

Dec

-14

Jun

-15

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

14

0 0 0 0 0 0 0 0 0 0 0 0 02 2 2

0 03 3

14

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 03

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1

Qu

anti

dad

e

Período de tempo

Atributos Roles do Yandex


78

APÊNDICE F – Gráficos dos Elementos de Tabela e CSS

79

Gráfico 53 – Elementos de Tabela e CSS do Google


Gráfico 54 – Elementos de Tabela e CSS do Facebook


7 7 7 8

31

1013

1618 19 20

26 2731 30 30

3331 31

54

34

5 6 6 5 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 35

2 2 2 2 2 2 2 2 2 2 2 2 2 3 3 3 3 3 37

41 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 10

10

20

30

40

50

60

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e Css do Google

div table style links

21 20 19 22

33 35

77 76

8981

7676 7682

89 88

98

8387 89 87

3 3 4 3 4 4 4 5 5 5 5 5 5 5 5 4 5 5 5 5 51 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 13 5 5 7 10

6 8 6 7 10 7 6 5 5 7 714 15

19

38 39

0

20

40

60

80

100

120

Au

g-0

5

Jan

-06

Jun

-06

No

v-0

6

Ap

r-0

7

Sep

-07

Feb

-08

Jul-

08

Dec

-08

May

-09

Oct

-09

Mar

-10

Au

g-1

0

Jan

-11

Jun

-11

No

v-1

1

Ap

r-1

2

Sep

-12

Feb

-13

Jul-

13

Dec

-13

May

-14

Oct

-14

Mar

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e Css do Facebook


80

Gráfico 55 – Elementos de Tabela e CSS do Youtube


Gráfico 56 – Elementos de Tabela e Css do Yahoo


30

153 112

240 268 282392

316366 405 446

362 365291 305

241 246334

476

1477

716

12 41 35 16 21 18 5 6 5 5 4 4 4 6 4 4 4 3 3 3 31 1 1 1 1 2 2 3 3 3 2 2 1 3 2 3 2 1 1 2 25 5 7 6 7 6 7 13 14 14 14 14 14 7 8 10 11 9 12 13 180

200

400

600

800

1000

1200

1400

1600

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Youtube


7 7 7 7 7 7 7 7 7 7

225 215234

319343 334 331 337

417 415 426

88101 103

31 29 29 29 29 29 293 3 3 3 3 3 3 3 3 3 32 2 4 3 3 3 3 3 3 3 7 4 4 5 5 4 3 4 5 5 51 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 5 5 5 10 110

50

100

150

200

250

300

350

400

450

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Yahoo


81

Gráfico 57 – Elementos de Tabela e CSS do Wikipédia


Gráfico 58 – Elementos de Tabela e CSS do Twitter


57

85

94

6966 66 67

87

75 7478

73 72 7175

71

8075 73 74

82

5 5

13 14 14 14 14 14 13 13 12 12 12 12 14 1215

12 12 12 14

3 3 3 3 3 3 3 5 3 4 3 14 2 3 3 3 3 3 2 2

5 5 5 6 7 8 914 16 18 16 17

11 912 13 12 14 15 16 17

0

10

20

30

40

50

60

70

80

90

100

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Wikipédia


1717 16 15 1533

1734

242219

5845 35

150

187 197184

214

379

44 4 3 3 3 3 3 3 3 3 3 4 6 6 6 5 5 411 2 2 4 2 2 1 5 5 1 1 2 1 1 1 1 1 144 3 3 4 6 6 6 6 6 3 10 7 0 6 0

46 49 54

0

50

100

150

200

250

300

350

400

No

v-0

6

Mar

-07

Jul-

07

No

v-0

7

Mar

-08

Jul-

08

No

v-0

8

Mar

-09

Jul-

09

No

v-0

9

Mar

-10

Jul-

10

No

v-1

0

Mar

-11

Jul-

11

No

v-1

1

Mar

-12

Jul-

12

No

v-1

2

Mar

-13

Jul-

13

No

v-1

3

Mar

-14

Jul-

14

No

v-1

4

Mar

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Twitter


82

Gráfico 59 – Elementos de Tabela e CSS do Sina


Gráfico 60 – Elementos de Tabela e CSS do Live


20 16 25

96 98 119

758

409 403 423 443401

455494

523566

622677

725 723

826

165 180 175

430 438 446

6 5 5 5 5 5 4 5 5 4 5 5 5 5 54 6 3 10 14 19 12 9 9 11 18 15 15 14 21 25 7 10 11 10 121 1 1 1 1 1 2 1 1 1 1 1 1 1 1 1 3 2 3 2 40

100

200

300

400

500

600

700

800

900

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Sina


21 22

13

30

35

47

66

16 16 17

22 22

4547

49 50 50 50

3 3 4 5 51

4

30 31 3129 29

6 6 6 5 5 51 1 1

3 2 2 3 3 3 3 3 3 4 4 4 4 4 43 3 3 2 2 2 3 2 3 3 41

4 4 4 4 4 40

10

20

30

40

50

60

70

Dec

-06

Ap

r-0

7

Au

g-0

7

Dec

-07

Ap

r-0

8

Au

g-0

8

Dec

-08

Ap

r-0

9

Au

g-0

9

Dec

-09

Ap

r-1

0

Au

g-1

0

Dec

-10

Ap

r-1

1

Au

g-1

1

Dec

-11

Ap

r-1

2

Au

g-1

2

Dec

-12

Ap

r-1

3

Au

g-1

3

Dec

-13

Ap

r-1

4

Au

g-1

4

Dec

-14

Ap

r-1

5

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Live


83

Gráfico 61 – Elementos de Tabela e CSS do Ebay


Gráfico 62 – Elementos de Tabela e CSS do Yandex


9 10 13 13 32

179 168 188 187 176203

393

133171

131105

273

496

690

533 550

21 27 25 26 27 17 16 16 16 17 11 20 7 9 8 9 7 8 9 9 92 2 3 3 4 4 3 4 3 2 3 7 5 5 1 2 1 2 2 2 33 3 3 3 4 3 3 3 4 4 4 5 5 6 5 6 5 5 4 327

0

100

200

300

400

500

600

700

800

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Ebay


2031

41 41 43 45 48 44 45 5367 62

109 114

139

117

162

242

191200 203

21 22 19 19 19 11 13 12 14 15 14 15 17 20 24 20 15 20 17 15 173 4 4 4 4 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 12 2 4 5 5 5 5 5 5 5 5 5 6 6 6 6 6 6 6 11 11

0

50

100

150

200

250

300

Jun

-05

No

v-0

5

Ap

r-0

6

Sep

-06

Feb

-07

Jul-

07

Dec

-07

May

-08

Oct

-08

Mar

-09

Au

g-0

9

Jan

-10

Jun

-10

No

v-1

0

Ap

r-1

1

Sep

-11

Feb

-12

Jul-

12

Dec

-12

May

-13

Oct

-13

Mar

-14

Au

g-1

4

Jan

-15

Jun

-15

Qu

anti

dad

e

Período de tempo

Elementos de Tabela e CSS do Yandex


evoluÇÃo da acessibilidade na web: um levantamento da...

Documents