The purpose of this paper is to identify important principles which should be applied to electronic library websites to make them usable for all people.
The goal of this paper was to make the simplified user interface of Hungarian Electronic Library (VMEK) more accessible and usable by leveraging the latest technologies, standards and recommendations. Vision-impaired and motor-disabled people were also involved in brainstorming and collecting ideas during the design phase and in testing the implemented website.
This paper showed that the perspicuity of the Web page is greatly improved by semantically correct HTML codes, clearly defined links and alt attributes, hotkeys and typographic principles.
The paper presents the design principles of electronic library Web pages which can be applied by Web developers and content managers. The paper identifies design principles, which improve the perspicuity of user interfaces to a great extent (especially in the case of blind users); draws attention to the typographic principles, which promote reading and understanding documents; and recommends guidelines for developing electronic library home pages and managing the content of these home pages.
This paper bridges the gap between the information and library science field and the Web accessibility and usability field. Based on brainstorming results where people with various kinds of disabilities were involved, the paper gives 11 recommendations which should be taken into account while designing and developing electronic library websites to ensure equal access to their services and documents.
CitationDownload as .RIS
Emerald Publishing Limited
Copyright © 2018, Emerald Publishing Limited
Need for the study
Libraries and librarians play an important role in the preservation of cultural heritage, and this now routinely entails digitizing and converting documents into several formats (Kosztyánné Mátrai, 2016). The original aim of digitization was to save costs and protect paper documents, especially rare and valuable books (Jephcott, 1998). Electronic libraries must ensure that these materials are safely stored, are convertible into other formats and are able to adapt to new technologies and data carriers. Pant (2015, p. 897) argues that:
in the web environment, the challenge for libraries is to provide access to quality content in electronic form, promoting better visibility for their print resources, and offering various value-added electronic services.
One major advantage of electronic documents is that they are non-stationary and people can therefore access them from any location. A well-designed, accessible electronic library provides an excellent opportunity to ensure equal access to these documents, browse according to themes and seek information based on specific criteria. However, as Jaeger et al. (2013) note, the literature on accessibility in the library and information science field is rarely presented in the context of diversity.
Navigation and information seeking for people with special needs can be promoted by many kinds of assistive technologies. Screen readers are indispensable for the blind and legally blind, as well as for every communication with the computer. They contain more than 100 keyboard shortcuts, and some of them make navigation easier on home pages. For example, screen readers make it possible to find the main parts of home pages such as the menu, body, form fields, headings and so forth. However, screen readers are also useful for people with different kinds of cognitive impairments which cause difficulties in reading, such as dyslexia. People with low vision use screen magnifiers which zoom in on the content of the whole screen and contain speech support too. For people with motor disabilities, several kinds of input devices are available.
Although assistive technologies have been continuously evolving for many years, and “there are many efforts, projects, and implementations on international level” (Iqbal and Ullah, 2016, p. 8), people with disabilities often have problems using Web pages, even electronic library Web pages. Unfortunately, in many cases, the main focus is on the appearance of the page during the development phase, without paying enough attention to the semantically correct codes. Therefore, assistive technologies are unable to promote users’ ability to do their tasks. Sheikh (2017, p. 123) emphasizes that “the overall information architecture of a library website should facilitate easy access to its resources by the users.” It is important to note that the accessibility and usability of home pages affects us all.
Purpose of the study
The purpose of this study is to identify important principles which should be applied to all electronic library websites to make them usable for all people. This article begins by introducing the most important Web design guidelines which would eliminate the greatest obstacles experienced by all users and by explaining how HyperText Markup Language (HTML) codes should be used to apply these guidelines. The article then presents its recommendations. Crucially, most of these recommendations do not require any specialized coding knowledge and are therefore useful for content managers as well.
What does accessibility and usability really mean?
A home page is accessible if it is able to ensure equal access to all content for all users (Caldwell et al., 2008). The user should be able to access all information even if the user is blind (and therefore uses a screen reader program), if the user has low vision (therefore uses screen zooming that renders part of the screen visible) or if the user is not able to use the mouse – for example, because of motor impairment – and only the keyboard. Moreover, few people consider that users with color vision disorders can also encounter special obstacles on Web pages. Required fields on a form that are signed only with red frames or graphics with insufficient contrast are two well-known examples of such obstacles (Sik-Lányi et al., 2007).
It is important to note that accessibility is useful for all users and not only for disabled people. Any person can be in a situation where the advantages of an accessible user interface can promote the ease of their work. An old screen has a lower contrast ratio, and in such cases, even a well-sighted user would see the home page as if he or she had a vision impairment. Contrast ratios are also lower on smart phones or tablets when the user uses it outside (e.g. while travelling) because of obstructive light. According to a survey conducted among informatic students in 2011, 53 per cent of students learn online during non-ideal conditions (e.g. travelling), and this ratio is presumably increased (Abonyi-Tóth, 2015). Users may also experience temporary motor impairment because of broken limbs or tenosynovitis. Even a faulty touchpad can pose significant challenges for user navigation.
Web accessibility evaluation tools are able to identify some of the mistakes. These tools allow researchers to analyze large number of home pages and summarize different kind of errors, as was done by Ismail and Kuppusamy (2016) who evaluated 40 websites from the North East Region of India and provided a list of the errors, accessibility component metrics and suggestions for enhancing the accessibility of these sites.
A home page is usable if it is easy to use and closely matches the user’s needs and requirements. A usable home page is effective when users can reach their goals, is efficient which means that they do not need much cognitive effort to complete their tasks and can be learned easily where there are several functions and it satisfies user needs, and thus users think it is easy to use. Therefore, an investigation of not only accessibility but also usability is important. In an electronic library, typical tasks are the use of the database to find books and articles. Such a usability investigation was carried out by Iqbal and Ullah (2016) on the National Digital Library Website in Pakistan where focus group members made recommendation to improve the home page usability.
Standards and guidelines
The accessibility of home pages largely depends on semantically correct HTML tags. The World Wide Web Consortium (W3C) is responsible for developing standards and guidelines in order to making the Web accessible for everybody. The W3C published Web Content Accessibility Guidelines (WCAG) 2.0 in 2008 and submitted them to the International Organization for Standardization (ISO). The ISO and the International Electrotechnical Commission (IEC) have published the finalized standard, ISO/IEC 40500:2012 (2012). Another notable group of recommendations is the Accessibility of Rich Internet Applications (WAI-ARIA), which specifies how to increase the accessibility of dynamic content elements. The 1.0 version of WAI-ARIA was published in 2014.
WCAG specifies – among other things – text alternatives for non-text content, the sufficient contrast between foreground information and background, keyboard accessibility for all functions, available mechanisms to bypass repeating content blocks and how to maximize compatibility with current and future user agents, including assistive technologies.
ARIA elements do not influence home page design and functionality; these elements give information to assistive technologies. There are forms (in many cases with only one input field) on many home pages – especially on library home pages – where users can search on the home page by inputting some data. The role of these forms can be defined as search forms by giving an ARIA element. This ARIA element defines a landmark which will be recognized by screen readers, so that blind users are able to find them easy.
In terms of accessibility, HTML5 is advisable to use because it supports accessibility to a far great extent than previous versions, and it has made coding Web pages much easier.
Navigation on Web pages with assistive technologies
Assistive technologies – such as screen readers, screen magnifiers and special input/output devices – are constantly developing and use the newest HTML5 standard and WAI-ARIA elements to greatly promote the accessibility and usability of home pages. This is because much information on the page can only be accessed using assistive technologies (Hickson et al., 2014; Craig and Cooper, 2014).
Blind people encounter the most often obstacles when navigating the web, and most of the recommendations were created to assist them. Petrie et al. (2004) show that only 53 per cent of the blind can do their tasks on the Web. This compares with 73 per cent among low vision people, 83 per cent among people with dyslexia and 85 per cent among people with motor disabilities or hearing impairment.
One frequent problem with websites is that much content is unavailable through the use of a keyboard, despite the fact that it is a required standard. However, keyboard accessibility does not necessarily mean that the page is usable for users who navigate with a keyboard. Schrepp and Jani (2005) and Schrepp (2006) investigated how many keystrokes and mouse clicks are needed on popular online magazines, Web shops and government portals to reach a predetermined Web page. Participants who used a mouse reached these sites with two to three mouse clicks, but those who used a keyboard pressed the tab key more than 100 times in many cases. They needed at least four times more time to solve the task, but in some cases more than ten times more time. All websites in this research passed WCAG 2.0.
Normal-sighted people scan home pages fast and are able to quickly recognize their main components, such as headings, menus, search fields, links and so on (Kosztyánné Mátrai, 2016). For blind users, screen reader programs can collect this information, but only if the HTML code is semantically correct.
HTML5 introduced landmarks with which the main parts of home pages – for example, headers, footers and menus – can be marked (Hickson et al., 2014). Landmarks themselves do not affect the home page layout; they are visible only in the source code. Today, screen readers are able to recognize these landmarks, making it possible for blind users to quickly jump to these parts of the home pages. Many blind users do not know about landmarks yet because they are relatively new. However, in the latest WebAIM survey, almost 40 per cent of 2,515 responders reported that they always use or usually use landmarks if they exist on the page (WebAIM, 2015). WebAIM (Web Accessibility in Mind) is an organization in America whose mission is to empower organizations to make their Web content accessible for people with disabilities. They have been doing this survey nearly every year since 2008. In Hungary, the Web accessibility expert Károly Szántai has conducted a similar survey since 2014 (Szántai, 2015b). In the most recent, almost half of the 122 respondents reported that they always or usually use landmarks (Szántai, 2016). These surveys illustrate how landmarks make information seeking easier for blind people.
In the future, landmarks can also be used to promote navigation for people with motor disabilities who can barely use their arms or not use them at all. For these users, a browser is needed that supports navigation between landmarks (Szántai, 2015a).
In addition to landmarks, headings are also helpful for blind users. Users with sight are able to recognize headings very fast thanks to bold or enlarged text. Blind users, however, are able to “see” headings if they are marked up systematically with <h1>, <h2>, <h3>, … <h6> tags in the source code (Yoon et al., 2016). Screen readers are able to collect these tags in a separate window and list all headings as a “table of contents” of the page. In the WebAIM survey, 76 per cent of respondents, and in the Hungarian survey, 42 per cent of respondents reported that they always navigate or usually navigate among primary headings if they would like to find information on the home page (WebAIM, 2015; Szántai, 2015b, 2016). Perspicuity of the home page for people with normal sight can also be improved by using headings; visual search and navigation can be promoted if the main part of home pages can be easily distinguished visually (Kosztyánné Mátrai, 2011; Mátrai and Kosztyán, 2012).
These studies demonstrate that not only accessibility but also usability is a very important factor. There are methods for analyzing accessibility and usability, but many problems can be eliminated without any prior knowledge if testers – especially disabled testers – are involved during website development. Testers with disabilities were also involved in the development of the user interface for VMEK.
Specialities of the Hungarian Electronic Library
History of MEK and VMEK.
The Hungarian Electronic Library (MEK) was created by some enthusiastic Hungarian librarians. It launched as a voluntary initiative, with technical support provided by the National Information and Infrastructure Developing Program (NIIF). More than 100 volunteers have worked on the project, and their efforts to digitize and convert documents continue to this day. The MEK began in 1994 and has played a pioneering and exemplary role in digitizing and disseminating the national cultural heritage. Since 1999, the MEK has operated in the National Széchényi Library (OSZK) in a separate department.
The first Web page of the MEK (mek.iif.hu) was usable for the blind. It has since been replaced by the current interface accessible at mek.oszk.hu, and content is continuously updated each day (Kosztyánné Mátrai, 2016). The user interface of the new Web page was developed by an outside company.
Unfortunately, the new page does not provide equal access to its content because in Hungary at that time there was still hardly anyone who dealt with Web page accessibility and Web pages were usually based on their visibility. Vision-impaired users have reported that the new interface is very challenging to use. It was also challenging for users with motor impairments who are unable to use a mouse, as they could only use a keyboard. To make matters worse, when the outside company responsible for the new user interface ceased operations, it was impossible to send new work orders to them. Limited financial and human resources also limited the possibility of making the whole Web page more accessible.
Therefore another, alternative Web page was developed (VMEK) which featured all important functions and information. It began operations beginning in Autumn 2004 at http://vmek.oszk.hu. There were several improvements. The user interface was much easier to use for users with not only visual impairments and motor impairments but also slow internet connections.
In 2014, MEK won support for updating this alternative Web page. The main goal was to implement all important functions which are available on the non-accessible page and make the user interface more useable according to the latest standards and technologies. I joined this project at this point as a volunteer and was responsible for writing the semantically correct HTML code and the typographical settings.
This represented only the first step; in the near future, the plan is to make accessible the whole Web page of the Hungarian Electronic Library.
Introduction of VMEK.
The most important function in an electronic library is searching for information among the available documents. In the VMEK, these functions are available from the main page. In a single-line search field, users can search by author, title or topic. Users can browse among latest documents, subjects and formats because they can be listed separately.
The menu also offers an advanced search option where the user can search using terms such as author, title, subject and document format. There is also the option to search the document text.
In the settings menu, foreground and background colors, font size, font type and number of results per page can be set. Here, users can also allow or deny keyboard short cuts and reset all settings.
Corrected documents with various formats for meeting specific needs.
Many libraries in the world provide only pdfs where the optical character recognition (OCR) text is hidden or they may put the OCR text into a separate TXT (text file), HTML or EPUB (an e-book file) format without any correction. The Hungarian Electronic Library Association also corrects digitized literary works. The popular literature has five to six formats, which offer alternatives for different forms of use and reader devices.
Another important feature of the MEK is the availability of a substantial number of audio books from the Hungarian Association of Blind and Visually Impaired. The MEK Association has also produced such audio books, and now through the “Everyone has a voice! Read about you too!” program, volunteers are well-sighted. They read works by classical authors, as well as works by contemporary authors who are vision impaired.
The first step was testing the old website and collecting ideas for the new one. During testing, participants could freely search in the collections of the Hungarian Electronic Library and in the information available on the VMEK website. Any ideas and comments from participants were collected via email from October to December in 2014. During this period, I summarized all ideas, comments and suggestions for improvement and sent them to all participants several times. Based on the collected remarks, the structure and the layout of the new website were designed. It was then implemented and tested again. Finally, mistakes were found and corrected.
The research questions were as follows:
What new functions should be implemented to promote the search process?
What new functions should be implemented to make users’ tasks easier?
What HTML5 and ARIA elements should be included in the source code to promote navigation for disabled users?
How can suggested HTML5 and ARIA elements promote navigation for users with disabilities?
In total, 24 people with disabilities were involved in brainstorming and testing the Web page: 17 blind, 2 legally blind, 3 low vision, 1 with motor disability and 1 blind and with motor disability. Among them were two programmers, one blind, the other legally blind; both deal with developing accessible Web pages. As well as the testers with disabilities, some participants without disabilities took part in the brainstorming: three founding members of the Hungarian Electronic Library, the programmer who implemented the user interface and the whole database and search functions, two Web developers and myself. A total of 31 people participated in the testing.
Experiences of the brain-storming session
Most blind and legally blind users criticized the lack of headings. Headings were written with bigger and bold letters, but in the source code they were not defined as headings; therefore, screen readers were unable to recognize them. Without headings it was more time-consuming to reach information in different parts of the home page. Four of them and one Web developer and myself suggested using landmarks, too, because it enables them to recognize and jump right to the main parts of the home page such as the menu, the body of the page or the search form. Blind users may not have known about this relatively new opportunity before. Ten blind and legally blind users suggested some skip links after the header because it enables the user to jump straight to the desired content. Five sighted participants suggested the inclusion of a site map.
On the main page, there are lists below each heading, and it was noticed that these lists were not defined as lists; they were only rows of one item under another, so blind users neither got the information that these rows were list items nor did they know about the length of these lists. Blind users found mistakes in some form fields on the advanced search page where the screen reader did not read the label of the field; therefore, they did not know what they should type into these fields. Blind users also remarked that the alternative text “VMEK logo” of the VMEK logo is not informative. This logo is a hyperlink which leads to the main page of VMEK; therefore, alternative text should be “main page of VMEK”. Alternative text of OSZK logo should be similarly rewritten. For some other hyperlinks, the text was not informative, mainly in the “News” page, for example, “click here”. Screen readers are able to collect all hyperlinks in a separate window, which allows users to search information faster. Therefore, it is essential to formulate hyperlink texts to be understandable dependently of the context.
The previous version of VMEK contained hot keys to the most important functions to make navigation easier and quicker for every user. The participants with motor disabilities and a blind participant usually used these hot keys. Several blind participants did not understand why they are unable to use them. The problem was that screen readers also contain many keyboard shortcuts, and the computer takes these keyboard shortcuts into account. This option may be less known among screen reader users. After it was explained which keyboard shortcut they should press before these hot keys, the participants liked these options.
Web developers noticed that the language of the home page was not defined, although it is very important because screen readers are able to read several languages. Screen readers should get information about the language of the home page. Otherwise, the screen reader will use the language of the operating system. The Hungarian language was probably already set in the operating system used by all the blind participant; therefore, they did not experience any problem arising from this failure.
Founding members of the Hungarian Electronic Library suggested making it possible to share documents on social media sites and to send documents to Kindle book reader devices, which have been implemented on the other website of the library, but these are unavailable for users with disabilities.
Although none of the participants had reading difficulties, some typographical changes were also planned based on the “Dyslexia Style Guide” from the British Dyslexia Association (2014), such as closed-left alignment text and light background, and avoiding text written in capital letters or italics which makes reading easier.
Our findings resulted in two sets of ideas. The first focused on new functions, while the second was concerned with user interface design. The participants agreed with these suggestions.
Suggested new functions:
A site map. This would make it possible to have all menus, submenus and headings on one page.
The possibility to share documents on social media sites.
The possibility to send documents to Kindle book reader devices.
User interface design
The user interface was divided into three main parts which can be distinguished visually and audibly. The first part is the header which contains the VMEK logo and the logo of the National Széchényi Library; the main menu with Search, Settings, Help, Contact and News items; and one single search field. The second part is where the main content of the current menu item can be seen. The third part is the footer which contains another menu with Guest book, e-mail, Site map, Impress and Statistics items.
In several menu items, table of contents was incorporated which contains hyperlinks to each heading. This makes keyboard navigation easier because users who are unable to use a mouse (e.g. people with an upper limb injury) can jump straight to the desired section. On the main page, if users wish to jump to the last heading, the hyperlink in the table of contents saves them 24 keystrokes. Navigation time therefore becomes shorter and users do not tire as much.
Promoting navigation: visually and audibly distinguishable structure elements
The main parts of the page were marked up with <header>, <main> and <footer> tags, and the menus with a <nav> tag. The main menu was named “main menu,” with an ARIA element listed as follows: <nav aria-label=”Main menu”>. The other menu was named “Further menu items” for blind users to be able to distinguish audibly between these two menus. ARIA labels do not appear visually, but screen readers are able to read them. Search fields were signed with a “search” landmark by giving the “search” role (defined in the WAI-ARIA standard) to the field: <form role=”search”>. Screen readers nowadays can recognize these landmarks and list them on a separate window where the blind are able to choose among them and jump directly to each part.
The content of each page was created with headings which were marked up in the source code with <h1>, <h2>, <h3> tags. Screen reader users are able to look through these headings as the “table of contents” of the page and jump straight to each section.
On the main page, the contents below the headings are lists. In the previous version of VMEK, these were not defined as lists. They were only rows under each other. Now they were defined as so-called unordered lists with tags and list items with <li> tags. List bullets were hidden so sighted users do not notice this change, but screen readers are now able to inform users how many items are contained in each list and users can easily navigate through these list items and through these lists as well using specific keyboard shortcuts associated with the screen reader.
In the case of forms, labels were defined with tags where the value of the “for” attribute should be the same as the “id” attribute of the <input> field. In the form of the main page, it was coded as follows: <label for=”author_title_subject”>Search:<input id=”author_title_subject”>. It is very important to switch <label> and <input> elements because if the screen reader encounters a form it switches to a so-called “form mode” (or “focus mode”) and leads users through the form fields; it does not read texts next to the fields. If these attributes are not given correctly, screen readers will only read: “edit.” As a result, the form becomes unusable for the blind – especially if it contains more fields – because they only hear: “edit,” “edit,” “edit,” but they do not know what they should write into the fields. But, if the labels are switched to the input fields, then it will read to them, for example: “search edit.” It therefore becomes clear for them what they should write into the field.
The third principle of WCAG 2.0 is understandability (Caldwell et al., 2008). Of course, grammatically correct and understandable wording is a basic requirement, but many other aspects are included here. For example, this includes making sure that those who can only listen to the website can also understand what it is about.
The first important step is to set the language of the page. It can be set in the initial <html> tag with the “lang” attribute. This will inform screen readers in what language they should read the page. In VMEK, it was set to Hungarian: <html lang=”hu”>. This ensures that screen readers read the document with correct pronunciation. Otherwise, screen reader users will be confused if a Hungarian text is read, for example, with English pronunciation. It often occurs that a website includes some foreign words, phrases and sentences. VMEK contains more than just Hungarian documents. Fortunately, it is possible to set another language for a specific part of the website; for example, with a <span> tag along with the “lang” attribute.
The text of stand-alone links should be understandable as well. It makes the site more usable for sighted and blind users. Links are usually highlighted in the text; therefore, sighted users are able to find the information they seek more easily if link texts are informative and not meaningless such as “click here”. Blind users are also able to read only the links in sequence because screen readers are able to collect these links in a separate window. In this case, blind users do not see the context, only the stand-alone links. Special attention was paid to the text of the links on each menu items.
A widely known accessibility option is the alternative text for images setting which can be set in “alt” attribute of <img> tag (Szántai, 2012). Alternative text will appear on the screen if a technical problem occurs while downloading the image or if the browser is text-based. Search engines get information about the image through alternative text as well; it is therefore important for search engine optimization too. But, if the image is a hyperlink, a description of the image is not important. In such cases, the alternative text should refer to the goal of the link or what happens if we click on the image. In the header of VMEK pages, two logos can be seen, which are also hyperlinks: the logo of OSZK which leads to the main page of the OSZK and the VMEK logo which leads to the main page of VMEK. Therefore, the alternative text was changed to “National Széchényi Library” and “main page of simplified user interface of MEK” which are more informative than “OSZK logo” and “VMEK logo” in the previous version.
The typography not only has an esthetic role but also influences text readability.
In the previous version of VMEK, text was justified. This made reading more difficult, especially for dyslexic users (British Dyslexia Association, 2014). The current version now uses left alignment. Fonts can be set individually according to user preferences. Text written in capital letters should be avoided because they make reading slower. In the previous version of VMEK, only headings were written in capital letters; now lower-case letters are used to increase readability. Italic text is also difficult to read; VMEK uses bold text for highlighting. Foreground and background colors also influence readability and, by extension, the efficiency of seeking information. light-colored backgrounds should therefore be used by default. If the background is dark, the pupil expands, the resolution of the eye drops and reading thus becomes more difficult. In cases where dark backgrounds are used, the time of information seeking can decrease by 15 per cent, even for sighted users (Kosztyánné Mátrai, 2011).
Quick navigation is supported by several hotkeys built into the VMEK interface to promote navigation for all users, especially those who are unable to use the mouse – only the keyboard. The main page, search form, settings and help menu are all available by pressing its hotkey. The multi-page hit list can also be scrolled through using hot keys. All available hot keys are listed in the Help menu. However, these hot keys can be disabled in the Settings menu. In the Settings menu, the foreground and background color, font type and font size can also be set; this makes it possible for VMEK users to make the interface more comfortable depending on their individual preferences. The number of records appearing on one page can also be set here. These settings allow users to customize the user interface according to their individual needs, which increases user satisfaction.
The article identified important principles which should be applied to all electronic library websites to enhance usability for all people. Website accessibility is based on semantically correct HTML code and ARIA elements; these give further information to assistive technologies and therefore increase the usability of the site for people with disabilities.
Keyboard accessibility is a basic requirement for a website. Items that can only be accessed with a mouse should never be used. Every function should be available via the keyboard. On an accessible home page, one can “walk along” to every menu item, link, form element and so on by pressing the tab key. Users should be able to test whether everything is available by using the tab key.
The accessibility and usability of electronic library home pages can be improved if the following recommendations below are followed.
R1. Use landmarks. The first finding of the paper concerns the design of the website and how its content is divided into logical parts. Navigation for blind people can be promoted by using landmarks defined in HTML5 to indicate specific parts of the Web page: the header part with <header> element, menu with <nav> element (if we have more than one menu, then we have more <nav> elements), the main part of content with <main> element and footer part with <footer> element. To help blind users distinguish the menus, ARIA labels should be included in the <nav> element which do not influence the website visually, but screen readers will be able to find and read them.
R2. Create headings carefully. The second finding is that headings should be created very carefully. A person with good eye sight is able to scan the page very easily or find information that he/she needs. Blind people cannot do this. Screen readers can help by collecting headings in a separate window and marking the level of the headings as well. But they are most effective when the headings of a Web page are organized like the table of contents of a book. The first heading level should be the title of the Web page. The second heading level should be used to identify the parts of the page – for example, the title of the articles. The third heading level may be used to signal the chapters of each part of the page (e.g. the subtitles of the articles). There can be a maximum of six heading levels. Internet search engines are based on headings as well. The proper usage of headings is also important for increasing search engine optimization.
R3. Define lists as lists. Lists should be marked in the HTML code as lists. This makes navigation for screen reader users easier. The menu should also be organized into lists with the element, and menu items with <li> elements, preferably in order of importance.
R4. Write understandable link texts. Link texts should be understandable even if they are standing alone. This helps not only sighted users to find information quickly while scanning the page but also blind users because screen readers are able to collect all links in a separate window.
R5. Refer to the goal of the link in alt text in the case of images with interactive functions. If the image is a link, then the alternative text should refer to the goal of the link or what happens if the user clicks on the image. Alternative text should not include commands like “click here” or “link to”. Screen readers will read automatically that it is a link; it is therefore unnecessary to refer to the fact that the object is clickable. For example, if the logo leads to the main page as in case of VMEK, then the alternative text should be the name of the library (possibly “main page of” and the name of the library).
R6. Set the language. The language of the website should be given at the beginning of the <html> element with the “lang” attribute. Otherwise, screen readers will read the website in the default language which was set by the user previously. If it is not the same as the language of the website, then the text would not be understandable for screen reader users because of incorrect pronunciation.
R7. Define the search role for search forms. Website usability can be increased by using ARIA elements. With ARIA, there is the possibility to define roles that are not available in HTML. Library websites usually contain search forms. For this, the role “search” should be given as follows: <form role=”search”>. This defines a landmark to which blind users are able to immediately jump.
R8. Use skip links. If the website contains a large number of links, skip links should be placed at the beginning of the content which lead to the headings. This gives the possibility for users who navigate with a keyboard to jump to many parts of the website and reach the information they need with just a few key presses.
R9. Create hotkeys. It is appropriate to assign hotkeys for the most important pages and functions, such as the Main page, Search form, Help and Settings. This improves navigation for all, especially those who are unable to use a mouse, only the keyboard.
R10. Choose typographic options carefully. According to the Guide of the British Dyslexia Association, to increase text readability, closed-left text alignment and light background colors should be used whenever possible. Text written in capital letters or italics should be avoided.
Summary and conclusion
Laws designed to ensure equal access have been passed in a number of countries. While Web accessibility is now increasingly recognized as an important aspect of equal access, domestic and international experience shows that much still needs to be done in this area.
The abundant information available on the Web can transform the lives of disabled users, but only if they can easily access it. For electronic libraries, it is particularly important that users with any kind of disability have equal opportunity to access documents and services. Moreover, few realize that ensuring equal access would also benefit mobile device users, especially if they use their device in inadequate lighting conditions or surrounded by annoying background noise. Individuals who temporarily experience hearing or sight loss also stand to benefit. In short, many categories of people stand to gain when Web pages are well-designed and accessible.
This paper investigated the accessibility and usability issues that arose from the use of the simplified user interface of the Hungarian Electronic Library, with the involvement of people with disabilities. Based on this experience, general recommendations were drawn up to make electronic library websites accessible for everyone.
Abonyi-Tóth, A. (2015), “Methods and tools to analyse the web-based user interface usability, and the appearance of the topic in education”, Education Technology Computer Science, Vol. 6 No. 1, pp. 304-309.
British Dyslexia Association (2014), “Dyslexia style guide”, available at: www.bdadyslexia.org.uk/common/ckeditor/filemanager/userfiles/About_Us/policies/Dyslexia_Style_Guide.pdf (accessed 2 October 2017).
Caldwell, B., Cooper, M., Reid, L.G. and Vanderheiden, G. (Eds) (2008), Web Content Accessibility Guidelines (WCAG) 2.0, W3C Recommendation, available at: www.w3.org/TR/WCAG20/ (accessed 2 October 2017).
Craig, J. and Cooper, M. (Eds) (2014), Accessible Rich Internet Applications (WAI-ARIA) 1.0, W3C Recommendation, available at: www.w3.org/TR/2014/REC-wai-aria-20140320/ (accessed 2 October 2017).
Hickson, I., Berjon, R., Faulkner, S., Leithead, T., Navara, E.D., O’Connor, E. and Pfeiffer, S. (Eds) (2014), HTML5. A Vocabulary and Associated APIs for HTML and XHTML, W3C Recommendation, available at: www.w3.org/TR/html5/ (accessed 2 October 2017).
Iqbal, M. and Ullah, A. (2016), “Qualitative usability evaluation of databases: a case study”, Library Hi Tech News, Vol. 33 No. 3, pp. 8-10, available at: https://doi.org/10.1108/LHTN-09-2015-0064
Ismail, A. and Kuppusamy, K.S. (2016), “Accessibility analysis of North Eastern India region websites for persons with disabilities”, 2016 International Conference on Accessibility to Digital World (ICADW), IEEE, pp. 145-148.
ISO: ISO/IEC 40500:2012 (2012), “Information technology - W3C web content accessibility guidelines (WCAG) 2.0”, available at: www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=58625 (accessed 2 October 2017).
Jaeger, P.T., Bertot, J.C. and Subramaniam, M. (2013), “Introduction to the special issue on diversity and library and information science education”, The Library Quarterly, Vol. 83 No. 3, pp. 201-203.
Jephcott, S. (1998), “Why digitise? Principles in planning and managing a successful digitisation project”, New Review of Academic Librarianship, Vol. 4 No. 1, pp. 39-52.
Kosztyánné Mátrai, R. (2011), The Role of Objects Properties and Layout in User Interface Design, PhD thesis, University of Pannonia, Information Science and Technology PhD School, Veszprém, P. 200.
Kosztyánné Mátrai, R. (2016), “Making accessible the simplified user interface of Hungarian electronic library”, Tudományos És Műszaki Tájékoztatás, Vol. 63 No. 8, pp. 292-304.
Mátrai, R. and Kosztyán, Z.T. (2012), “A new method for the characterization of the perspicuity of user interfaces”, Acta Polytechnica Hungarica, Vol. 9 No. 1, pp. 139-156.
Pant, A. (2015), “Usability evaluation of an academic library website: experience with the central science library, university of Delhi”, The Electronic Library, Vol. 33 No. 5, pp. 896-915.
Petrie, H., Hamilton, F. and King, N. (2004), “Tension, what tension? Website accessibility and visual design”, Proceedings of the, 2004 international cross-disciplinary workshop on Web accessibility (W4A), New York, NY, pp. 13-18.
Schrepp, M. (2006), “On the efficiency of keyboard navigation in web sites”, Universal Access in the Information Society, Vol. 5 No. 2, pp. 180-188.
Schrepp, M. and Jani, R. (2005), “Efficient keyboard support in web-pages”, 8th European Conference for the Advancement of Assistive Technology, pp. 504-508.
Sheikh, A. (2017), “Evaluating the usability of COMSATS institute of information technology library web site: a case study”, The Electronic Library, Vol. 35 No. 1, pp. 121-136.
Sik-Lányi, C., Kosztyán, Z., Kránicz, B., Schanda, J. and Navvab, M. (2007), “Using multimedia interactive e-teaching in color science”, Leukos, Vol. 4 No. 1, pp. 71-82.
Szántai, K. (2012), “What should be the text of the alt attribute? 2. Part”, available at: www.akadalymentesweb.hu/2012/10/mi-legyen-az-alt-attributum-szovege-2-resz/ (accessed 2 October 2017).
Szántai, K. (2015a), “Accessible searching the search field”, available at: www.akadalymentesweb.hu/2015/09/a-keresomezo-akadalymentes-keresese/ (accessed 2 October 2017).
Szántai, K. (2015b), “Hungarian screen reader user survey – 2014”, available at: www.akadalymentesweb.hu/2015/02/magyarorszagi-kepernyoolvaso-felhasznalok-felmerese-2014/ (accessed 2 October 2017).
Szántai, K. (2016), “Hungarian screen reader user survey – 2015”, available at: www.akadalymentesweb.hu/2016/02/magyarorszagi-kepernyoolvaso-felhasznalok-felmerese-2015/ (accessed 2 October 2017).
WebAIM (2015), “Screen reader user survey #6 results”, available at: http://webaim.org/projects/screenreadersurvey6/ (accessed 2 October 2017).
Yoon, K., Dols, R., Hulscher, L. and Newberry, T. (2016), “An exploratory study of library website accessibility for visually impaired users”, Library and Information Science Research, Vol. 38 No. 3, pp. 250-258.
Mátrai, R., Kosztyán, Z.T. and Sikné Lányi, C. (2008), “Navigation methods of special needs users in multimedia systems”, Computers in Human Behavior, Vol. 24 No. 4, pp. 1418-1433.
About the author
Rita Kosztyánné Mátrai is an Assistant Professor in the Faculty of Humanities, Institute of Library and Information Science at Eötvös Loránd University. She earned a master’s degree of engineering in information technology in 2004 and her PhD in 2011. Her research focuses on user interface, design, the accessibility and usability of Web pages and accessible electronic documents. She has also worked as a volunteer for the Hungarian Electronic Library Association since 2013.