E5. Difficulty recognizing current status of a DL

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 (1), 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 (2). 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 (3).

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 appliedExample 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.

Accessible Progress Bar example which reads "This HTML5 progress bar has been implemented with aria-live= "polite" as the only ARIA in us. The separate announcements by screen readers for the progress bar and textual updates are achieved by putting them in separate live regions."

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.

<div role= “alertdialog” aria-labelledby= “alertHeading” aria-describedby= “alertText”>

<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.

Optimizing your browser page from ArtStor with menu for Supported Browsers, Set Artstor as a Trusted Site, Change Screen Settings, and Enable Cookies

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

See Also:

Help-seeking Situations > E. Difficulty identifying current status, path, or cursor mode