Until a few years ago, most websites were designed to be operated via a mouse on a PC or notebook. Efforts to achieve accessibility for the blind, the visually impaired, the deaf or the motorically or cognitively disabled were deemed commendable, but not absolutely necessary. Even today, there are still decision-makers and developers who work according to this principle. Based on examples from our own experience in the context of developing ETH-Bibliothek’s Knowledge Portal and the Website of the Network of Libraries and Information Centres in Switzerland (NEBIS), we aim to illustrate that the reality on the web compels you to adopt a different approach. After all, accessibility – i.e. unhampered access to web contents – is tightly intertwined with aspects of the usability (user-friendliness) of the mobile web.
Figure 1: The Knowledge Portal of ETH-Bibliothek and the Website of NEBIS Network
Figure 2: the magnifying glass in the Knowledge Portal’s search field
The drawback with this approach is that it renders software programmes such as screen readers – i.e. reader applications for the blind and visually impaired – unusable as alternative user interfaces. Moreover, there are other implications. We are currently witnessing the success story of mobile terminal devices that work with touchscreens. We might encounter the magnifying glass again here, designed accordingly by the web designer. Touching the image might well leave marks on the display but the search is not launched, which baffles the user – an unnecessary nuisance that could have been avoided by implementing a button, especially since semantic buttons can also look like a magnifying glass.
Real buttons are also responsible for another kind of “magic” behaviour. Even die-hard mouse-users usually utilise a login form in such a way that they press the enter key directly after entering the password to register. Turning to our visually oriented web designer again, he has taken an attractive image of a button and embedded it in a link (<a>-Element). If you click on the image with the mouse, it works fine. The alternative use of the enter key after filling in the login form, however, remains off limits. This also has consequences for the user-friendliness of the display keypad on Smartphones or tablets. An entry field “Open” is integrated in their keypads, which users can select immediately after typing (e.g. the password). This function, too, can only be used if a real button has been utilised.
Figure 3: example of an iPhone Display keypad
For many, operating a page with a keypad might be an exception. For others, however, it’s a necessity. A wealth of assistive technologies for web users with motoric or visual disabilities are based on keypad controls. Besides, it is also apparent that, in light of the growing prevalence of mobile terminal devices, fingers are increasingly replacing the mouse as the control element for touchscreens. These devices also offer new digital participation possibilities for blind people with the screen reader VoiceOver.
The Knowledge Portal upgrade and the reconstruction of the NEBIS website have shown us that it is necessary to already define accessible web design as a requirement in the planning phase for web projects. Ideally, the interplay between the website structure, content, appearance and functionality will then be considered throughout the entire realisation process, which means extra effort and expense. Ultimately, however, this already provides the access aids that people with a disability need to understand the contents of and navigate around a website as soon as it “goes live”.At the same time, this enables certain usability problems involved in the mobile use of web applications to be ruled out from the start.
Author: Bernd Uttenweiler
Coauthor: Maximiliane Okonnek
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International Public License.
DOI Link: 10.16911/ethz-ib-1008-en