Um auxílio à navegação acessível na web para usuários cegos

GERALDO, R. J.. Um auxílio à navegação acessível na web para usuários cegos. 2016. 144 f. Tese (Doutorado em Ciências – Ciências de Computação e Matemática Computacional) – Instituto de Ciências Matemáticas e de Computação (ICMC/USP), São Carlos – SP. Web Accessibility aims to enable that any individual may understand and interact with a Web page content, regardless of disabilities or other factors. Although there is a large number of research studies in this area, it can be noted individuals with some specific types of disabilities find it more difficulty browsing the Web, such as those who are blind. In order to minimize the problems faced by blind users when browsing the Web, the study reported in this thesis proposed an approach which consists in automatically extracting the navigation knowledge implicit in the visual presentation of a Web page and changing this navigation design to an optimized way to those users. For this purpose, the research started with a review of the papers related to the main problems faced by blind users when interacting to the Web, as well as the specific sets of accessibility and usability guidelines to minimize these problems, based on a systematic mapping study conducted on the topic. After identifying the problems and guidelines, the next step involved the development of a classifier based on the Naïve Bayes methods, considering three features commonly found in the design patterns of navigation menus, in order to automatically classify the links contained on each page into different classes relating to the navigation structures. After developed, the method was tested and assessed in governmental websites through an statistical analysis, showing a good success rate in its classifications. Based on the difficulties encountered during the first step of the research, the study proposed an interface model tailored to blind users who use the Web with the help of a screen reader. Based on the developed classifier, the study proposed an approach to automatically transform the browsing links classified by the method into an optimized navigation standard to screen readers. As a proof of concept, the following step involved a semi-automatic extraction of Web pages content, in order to transform this content to a new proposed interface model. In this context, was developed a prototype of the mechanism, named NavAux. This prototype was evaluated through a cognitive walkthrough. To this, were defined some tasks and the interface operation was performed with support of the JAWS screen reader. The results presented signs that the proposed approach can be considered a viable alternative to minimize the accessibility problems faced by blind users when browsing the Web. Key-words: Web Accessibility, Visually Impaired, Usability. LISTA DE ILUSTRAÇÕES Figura 1 – ARIA e a relação entre o Agente de Usuário, API de Acessibilidade e Tecnologia Assistiva. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Figura 2 – Quantidade de resultados encontrados e selecionados em cada base (entre 2008 e 2013). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Figura 3 – Quantidade de resultados encontrados e selecionados por ano (entre 2008 e 2013). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Figura 4 – Quantidade de resultados encontrados e selecionados em cada base (entre 2013 e 2016). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Figura 5 – Quantidade de resultados encontrados e selecionados por ano (entre 2013 e 2016). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Figura 6 – Quantidade de artigos agrupados em categorias de problema. . . . . . . . . 68 Figura 7 – Padrão de projeto para menu horizontal em páginas Web. . . . . . . . . . . 73 Figura 8 – Três padrões de projeto para menu vertical em páginas Web. (A) apresenta apenas um nível, (B) apresenta um nível mas expande um segundo nível quando selecionado e (C) apresenta dois níveis agrupados por um título não-clicável de um nível. . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Figura 9 – Padrão de projeto para menu L-invertido em páginas Web. . . . . . . . . . . 74 Figura 10 – Exemplos de links considerados como Menu Superior durante o treinamento no Portal do Governo do Estado de São Paulo. . . . . . . . . . . . . . . . . 81 Figura 11 – Exemplos de links considerados Menu Lateral Esquerdo durante o treinamento na página Cidadão.SP. . . . . . . . . . . . . . . . . . . . . . . . . . 81 Figura 12 – Exemplos de links considerados Menu Lateral Direito durante o treinamento no Portal do Governo do Estado de São Paulo. . . . . . . . . . . . . . . . . 82 Figura 13 – Exemplos de links considerados Rodapé durante o treinamento no Portal Brasil. 82 Figura 14 – Exemplos de links considerados pertencentes à classe Conteúdo durante o treinamento na página do Incra. . . . . . . . . . . . . . . . . . . . . . . . . 83 Figura 15 – Pop-up para treinamento das amostras referentes às características de posicionamento de um link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Figura 16 – Interface do OpenWebSpider. . . . . . . . . . . . . . . . . . . . . . . . . . 85 Figura 17 – Ajustes para cada distribuição resultantes do teste qui-quadrado para as amostras referentes ao posicionamento do link em relação a margem esquerda da página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Figura 18 – Ajustes para cada distribuição resultantes do teste qui-quadrado para as amostras referentes ao posicionamento do link em relação ao topo da página. 86 Figura 19 – Ajustes para cada distribuição resultantes do teste qui-quadrado para as amostras referentes a taxa de repetição do link no domínio. . . . . . . . . . 87 Figura 20 – Menus contidos no Rodapé do site Fundacentro. . . . . . . . . . . . . . . . 90 Figura 21 – Links considerados menus laterais no portal do Inmetro . . . . . . . . . . . 91 Figura 22 – Exemplos simplificados de estruturas comuns encontradas em páginas Web. 95 Figura 23 – Proposta para a estrutura da página Web voltada aos usuários cegos. . . . . 99 Figura 24 – Exemplo de agrupamento para os links do Portal Brasil. . . . . . . . . . . . 105 Figura 25 – Exemplo de novo modelo de navegação construído com base na abordagem proposta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 LISTA DE CÓDIGOS-FONTE Código-fonte 1 – Trecho de código HTML utilizado para representar ao cabeçalho da página Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Código-fonte 2 – Trecho de código HTML utilizado para representar a navegação em uma página Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Código-fonte 3 – Trecho de código HTML utilizado para representar o conteúdo principal em uma página Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Código-fonte 4 – Trecho de código HTML utilizado para representar o rodapé em uma página Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Código-fonte 5 – Trecho de código HTML utilizado para representar conteúdos complementares em uma página Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Código-fonte 6 – Trecho de código HTML utilizado para representar a região de pesquisa em uma página Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Código-fonte 7 – Exemplos de redundância na marcação ARIA e HTML5. . . . . . . . 97 Código-fonte 8 – Estrutura HTML5 básica do NavAux, com os respectivos atributos ARIA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98