The possibilities for using web services, including those provided by libraries, are becoming increasingly diverse. On the one hand, contents can be accessed via desktop PCs and a wide range of mobile terminal devices nowadays. On the other hand, the technical developments are increasingly taking people with a disability into account and turning the internet into a place of free access to information and digital participation for them.
In light of the digital product development, meeting the diverse requirements is an important matter for ETH-Bibliothek. In a web project conducted this year, we looked closely into how we might create a better user experience for all users of ETH-Bibliothek’s Knowledge Portal. The following post reveals some core elements of the optimisations carried out.
Under the banner of “responsiveness”, we have implemented many changes on the Knowledge Portal that realise the optimum display of the website across the full range of terminal devices. The following three aspects are particularly relevant here:
- Responsive layout
The pages all adapt flexibly to the screen width. The displaying of contents varies accordingly to guarantee the optimum presentation of information for every terminal device.
Figure 1: the Knowledge Portal on different screen sizes
- Responsive images
In many places on the Knowledge Portal, we use large images to illustrate our premises and services. The photographs used should look ideal on different screen sizes and technologies (e.g. high-resolution retina displays). However, large images mean loading greater volumes of data. In order to avoid affecting the loading times, the Knowledge Portal now loads different image sizes depending on the accessing device when displaying individual websites. This enables the Web Performance (WPO) – an important factor in ranking search engines – to be optimised.
Figure 2: the Knowledge Portal’s source code: on the browser side, it’s possible to load the optimum image size depending on the display size and screen resolution of the accessing terminal device.
- Responsive page elements
Within the scope of a responsive layout, the page adapts flexibly to the width of the screen. But what happens to elements within a page that structurally have a fixed width, such as tables? There are different approaches to a solution here: for instance, the Knowledge Portal can break up the columns into lines for tables. This means that every line becomes a sort of index card, where the column contents are presented below one another. The column heading appears on the left, in front of the contents. Alternatively, table contents can also remain unchanged and be moved from right to left via a scroll function. The web editor can then set this behaviour individually for every table. Other website elements, such as image maps, videos or slideshare frames, can also be adjusted to the screen size in this way.
Besides responsiveness, improved accessibility was also one of the goals of the new-look Knowledge Portal. The foundation “Access for all” supported us in this endeavour.
- Keypad use for megamenu
The Knowledge Portal’s megamenu was realised in such a way that it is comfortable to operate with the keypad. Apart from the tab key, cursor keys can also be used. An open menu area can be closed again with the ESC key.
- Library searches with tabs
Searching ETH-Bibliothek’s information resources takes places in the website’s search field. Tabs can be used to target different search results.
Figure 3: field for searching on the Knowledge Portal.HTML doesn’t know any semantics for the kind of tabs we use at this point. In order to render the contents accessible for people with a visual impairment, too, the contents also need to be recognisable for screen-reader applications. In order to guarantee this, there is now the WAI ARIA Standard, which describes language elements that facilitate additional semantic attributions for HTML – including attributes such as “role=tab” or “role=tabpanel”, for instance. This also enables screen-reader users to recognise where they are searching. Another challenge is the representation of the search field on the Knowledge Portal’s sub-pages. In order to reduce the complexity of the website, the tabs in the search field initially remain hidden (see figure below). They only open up via an animation by clicking in the search field.
Figure 4: reduced search field on the Knowledge Portal’s sub-pages.How does the screen-reader user now experience this? As soon as they select the search’s input field and thus activate the search field’s tab, the tabs are unusable because they are effectively “behind” it. The tabs for screen-reader applications therefore remain permanently visible. As a result, the user doesn’t notice that they have disappeared and the animation doesn’t hamper the readability.
All contrasts within the Knowledge Portal are set in accordance with the WCAG. This means that people who perceive contrasts less well are able to read texts and recognise elements in a differentiated way.
Despite the latest alterations, however, there is still plenty to be done. Our work on the Knowledge Portal is ongoing. As one of the next steps, we will be focusing on improving the presentation of search results within the Knowledge Portal.
Authors: Bernd Uttenweiler, Maximiliane Okonnek
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International Public License.
DOI Link: 10.16911/ethz-ib-1721-en