Automatic Adaptation Techniques to Increase the Web Accessibility for Blind Users
- 1.6k Downloads
Despite the available guidelines and tools to build accessible websites, many still fail to be accessible and usable by the blind users. Web content adaptation has been used as an approach to enhance website accessibility by applying automatic transformation techniques. We describe here a system that automatically increases webpage accessibility by applying three different techniques: link enrichment, image enrichment, and navigation enrichment. Preliminary evaluation of these techniques reveals that the prototype successfully eliminates half of the accessibility errors identified by validating tools and it performs equally well regardless of the accessibility compliance level of the website.
KeywordsWeb accessibility Blind users Content adaptation Client-side
1 Introduction and Background
The Internet is becoming an increasingly important resource for education, employment, commerce, health care, and recreation. To ensure easy access and equal opportunity to disabled people, web content should be accessible by being compliant with the requirements of the Web Content Accessibility Guidelines (WCAG). Most websites, however, do not fulfill the WCAG requirements, which causes blind users to suffer when accessing and navigating digital content . This often causes blind users to rely on help from others instead of having the ability to independently complete their tasks, which limits their active participation in the society .
Being aware of the difficulties blind users face when accessing the Web, inspired from this study , we have built a middleware solution that automatically increases website accessibility by implementing certain adaptation techniques. Previous studies have shown that webpage adaptation can be conducted on the server, intermediary or client-side level . We adopt the later approach by developing an extension that will be installed on a web browser to automatically transform the webpages into more accessible version. The extension will initially check the website for accessibility errors, and then depending on the errors found, it applies one or more of the following techniques: link enrichment, image enrichment, and navigation enrichment technique.
Preliminary evaluation of these techniques reveals that the prototype successfully eliminates half of the accessibility errors identified by validating tools and it performs equally well regardless of the accessibility compliance level of the website.
2 Adaptation Approach
In order to increase the accessibility of websites, we implemented three techniques that automatically adapt the web content to improve navigation and access to information. These techniques provide adaptation of three entities: links, images, and skipping to the main content.
2.1 Link Enrichment
This technique begins by checking all hyperlinks on the page whether they lack any text or use a generic description such as ‘read more’, ‘learn more’ or ‘click here’. If such hyperlink is found, then it checks whether it leads within that same page or to another page. In cases when the link leads within the page, the heading text of that part is included as an alternate text. If the link leads to another page, the text from the title or the heading of that page is used.
This approach provides an ARIA7 label to enable links to be visible by screen readers . This will automatically add an aria-labelledby attribute inside an ‘a’ tag with brief content taken from the section where the link is pointing, as described above. This will help blind users get more information of the page or section and help them make a decision whether to visit before engaging the link. Moreover, this will display the same text in the links list, which is useful when screen reader users browse by links.
2.2 Image Enrichment
Providing an alternative text to images constitutes the first principles of web accessibility comprised in Guideline 1.1 Text Alternatives from WCAG 2.0 . Despite this guideline requirement, only 39.6 % of images found on the homepages of the 500 most high-traffic websites, were assigned alternative text .
To achieve this, we need to find similar images on Google and then use their description as a text for the alternative text. Since the Google Image Search API  is deprecated, we follow a work around by using the Imgur API . The image lacking the alternative text is uploaded on imgur.com from where we obtain a unique URL. This URL then is sent as a parameter to look for similar images on Google Images. Once such image is found, its description then is used as a text for the alternative tag of the image. Figure 2 on the left side shows two images found without an alternate text, while on the right side those two errors are eliminated after the adaptation is applied.
2.3 Navigation Enrichment
2.4 Architecture and Implementation Details
The evaluation of the adaptation techniques was conducted by two accessibility experts using three websites: hioa.no, seeu.edu.mk and bbc.com. The first two websites were chosen only because the authors come from those academic institutions and the last one is a popular news website. For each website, five random webpages were independently selected and evaluated by the evaluators.
Initially the extension was installed into the Chrome browser and the webpage being evaluated was opened on it. For easy comparison, the same webpage was also opened on Firefox browser, which showed the original, not adapted version. Using the aXe tool , which is a library that does automated accessibility testing inside the browser, evaluators noted the number of accessibility errors found and fixed by the extension.
3.1 Findings and Discussion
Our extension was successful in fixing 19 % (78 out of 421) of total errors found by the aXe tool. This tool, however, by default also identifies errors concerning the level of color contrast on the webpages (257 errors). Since color contrast affects only partially sighted and not the blind (our target users), disregarding this type of error, increases the percentage of fixed errors to 48 % (78 out of 164). In addition, considering that the lack of skip links is not identified as an error by the aXe tool, but our extension adds it when missing, the percentage of fixed errors raises to over 50 %. Hence, we could claim that our techniques successfully eliminate half of all the blind user related accessibility errors found on websites. Some of the errors not addressed by our extension include: frames must have unique title attribute, documents must have title element to aid in navigation, and form elements must have labels.
4 Conclusion, Limitations and Future Work
In this paper, we presented a browser extension that automatically increases website accessibility using three adaptive techniques: link enrichment, image enrichment, and navigation enrichment. The link enrichment technique fixes links found on a website that lack or provide only generic description. The image enrichment technique locates images that lack alternative text and adds a description. Navigation enrichment technique adds a skip to main content link to every page lacking such feature.
Preliminary evaluation of these techniques with three websites showed that the implemented adaptation techniques successfully eliminate half of all accessibility errors identified by validating tools that relate to blind users. The prototype works well for all types of websites, regardless of their compliance level of accessibility, although it performs significantly slower the more images the webpage contains. For the majority of webpages we tested, it usually took between 5 and 15 s.
In the future, we aim to improve our tool initially to identify reasons why some of the errors identified were not fixed. Additionally, we will work on optimizing the algorithm to decrease the time requires the webpage adaptation to be performed. Finally, a more thorough and rigorous evaluation will be conducted with both experts and blind users to measure the level of appropriateness of the fixes performed.
- 1.ARIA7 Techniques for WCAG 2.0. https://www.w3.org/WAI/GL/2015/WD-WCAG20-TECHS-20150106/ARIA7. Accessed 05 April 2016
- 3.Bigham, J.P., Kaminsky, R.S., Ladner, R.E., Danielsson, O.M., Hempton, G.L.: WebInSight: making web images accessible. In: Proceedings of the 8th International ACM SIGACCESS, pp. 181–188 (2006)Google Scholar
- 4.Di Blas, N., Paolini, P., Speroni, M.: Usable accessibility to the Web for blind users. In: Proceedings of 8th ERCIM Workshop: User Interfaces for All, Vienna (2004)Google Scholar
- 5.Hollier, S.E.: The disability divide: a study into the impact of computing and internet-related technologies on people who are blind or vision impaired. GLADNET Collection (2007)Google Scholar
- 6.Mbipom, G., Harper, S.: The transition from web content accessibility guidelines 1.0 to 2.0: what this means for evaluation and repair. In: Proceedings of the 27th ACM SIGDOC, pp. 37–44 (2009)Google Scholar
- 7.Extension source code. https://github.com/lirimsulejmani/adaptivetechnology
- 8.Text Alternatives, Understanding Guideline 1.1, WCAG 2.0. https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html. Accessed 05 April 2016
- 9.Extract text from pictures using OCR in OneNote. https://support.office.com/en-us/article/Extract-text-from-pictures-and-file-printouts-by-using-OCR-in-OneNote-93a70a2f-ebcd-42dc-9f0b-19b09fd775b4. Accessed 05 April 2016
- 10.Google Image Search API. http://developers.google.com/image-search. Accessed 05 April 2016
- 11.Imgur API. https://api.imgur.com/. Accessed 05 April 2016
- 12.aXe: the Accessibility Engine. http://www.deque.com/products/axe/. Accessed 05 April 2016
- 13.Techniques for WCAG 2.0, G1: Adding a link at the top of each page that goes directly to the main content area. https://www.w3.org/TR/WCAG20-TECHS/G1. Accessed 07 April 2016