E5. Difficulty recognizing current status of a DL – Digital Library Accessibility and Usability Guidelines (DLAUG)

Situation Definition:

A situation that arises from difficulty detecting if a DL page is in the process of loading, or has loaded, or whether a page has refreshed.

Factor(s) Leading to the Situation:

- Inadequate feedback:
- Inadequate support:

Guideline or Design Recommendation:

1. Ensure that page loading status or page update status is recognizable
2. Reduce page loading time
3. Explain how to detect a change or update in the status of a DL

Rationale and Objective:

Because DLs contain a variety of heterogeneous content and an array of file formats within digital collections ⁽¹⁾, DLs would have a risk of presenting content that may extend page-loading time. Applying a short sound to indicate page-loading status allows

users to know if the webpage has completely loaded on a real-time basis and alleviates the need for the user to repeatedly check the status bar ⁽²⁾. Avoiding complex elements and large-size objects in the webpage can be helpful for decreasing the loading time. Audible progress indicators may be helpful when users need to wait until the page load is complete. Alternatively, using a

, which includes displaying “mockups” of content elements that utilize minimal textual messages rather than images, allows users to access information more quickly as the items are displayed, even though some contents are not yet completely loaded ⁽³⁾.

Techniques and Methods:

1.1. Provide clear, unique, and meaningful page title in its title element to indicate that a user has activated a new page
1.2. Provide sound and text indicators to alert users of the page loading status (in progress, completed, and ready for interaction). This could possibly be an array of sounds, including different pitches related to corresponding percentages.
1.3. Add a sound, preferably including text read aloud, indicating loaded webpage completion
1.4. Alert users about the unavailability of a DL due to network or server connection failures using a simple dialogue box
2.1. Minimize large-size objects (such as embedded video and slideshow widgets) and unoptimized back-end code/sublet/applets that increase page loading time
2.2. Use tools such as PageSpeed Insights to help determine the causes of slow loading time (https://developers.google.com/speed/pagespeed/insights/)
3.1. Offer help tips and instructions to enable/disable auto-refresh of DL pages within web browser settings

Recommended Features:

1.1. Unique page title (See example 1.1)
1.2/1.3.a. Sound/text indicator (See example 1.2/1.3.a)
1.2/1.3b. ARIA-live= “assertive” or “polite” (See example 1.3/1.4.b)
1.4. Simple dialogue box (See example 1.4)
3.1. Help tips and instruction (See example 3.1)

Examples:

1.1. Unique page title: How-to example and bad design

No title tag or use default title name such as “page” or numbering meaningless to users.

Meaningless title: <title>page 1</title>

Users can not know what the page is about. According to WCAG, a title must have the most important identifying information first and have uniqueness.

<title>The World Wide Web Consortium</title>

1.2/1.3.a. Sound/text indicator: Bad design

Using a loading spinner or similar visual clues without any sound/text indicator does not provide any indication of progress to BVI users.

Example of loading spinner with no sound or text indicators applied

Example of visual cue featuring colored circled to indicate loading process with no sound or text indicators

1.3/1.4.b. ARIA-live= “assertive” or “polite”: How-to example

The lack of indication of page status can be eliminated by using ARIA-live= “assertive” or “polite” on the page load/percentage indicator. It would be helpful to use ARIA live region to speak “loaded” or similar by reacting to an event that indicates a page is loaded.

https://labs.levelaccess.com/index.php/Progress_Bar_with_ARIA_Live_Regions

1.4. Simple dialogue box: How-to example

Use alertdialog to identify errors. You can find more information in ARIA18: Using aria-alertdialog to identify errors at WCAG.

<h1 id= “alertHeading”>Error</h1>

<div id= “alertText”>Employee’s Birth Date is after their hire date. Please verify the birth date and hire date.</div>

<button>Save and Continue</button>

<button>Return to page and correct error</button>

</div>

3.1. Help tips and instruction: Good design

Artstor provides instructions for browser optimization and settings.

Related Resources:

1. Xie, I., Babu, R., Joo, S., & Fuller, P. (2015). Using digital libraries non-visually: understanding the help-seeking situations of blind users. Information Research: An International Electronic Journal, 20(2), n2. Retrieved from http://informationr.net/ir/20-2/paper673.html#.XnkVkNNKhTY
2. Leporini, B., & Paternò, F. (2004). Increasing usability when interacting through screen readers. Universal access in the information society, 3(1), 57-70.
3. Bock, M. (2017). Building Skeleton Screens with CSS Custom Properties. Retrieved from https://css-tricks.com/building-skeleton-screens-css-custom-properties/
4. Shakir, S. (2017). Stop Using Loading Spinner, There’s Something Better. Retrieved from https://blog.iamsuleiman.com/stop-using-loading-spinner-theres-something-better/
5. W3C. (2018). WCAG 2.1 Guideline 1.4.2 Audio Control. Retrieved from https://www.w3.org/TR/WCAG21/#audio-control
6. W3C. (2018). WCAG 2.1 3.2.5 Change on Request. Retrieved from
  https://www.w3.org/WAI/WCAG21/Understanding/change-on-request.html