INT1. Difficulty interacting with multi-layered windows

Definition

A situation that arises from difficulty staying within the active DL window due to the poor design of pop-ups.

Factors Leading to the Situation

• Complex information presentation: illogical focus order
• Inadequate feedback: insufficient dynamic applications/features/content
• Incompatibility: ineffective HTML for multi-layered page

Guidelines

1. Ensure that screen reader (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface.  focus is confined within an active pop-up window until an exit action is detected.
2. Provide feedback when the screen reader focus moves between windows, informing users of context changes.

Rationale for Suggesting the above Guidelines

DLs (text with tooltip) The acronym for digital library (DL) often contain intricate content structures with multiple layers of information. While some DLs work seamlessly with screen reader (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface.  software, others may have difficulties. These guidelines recommend providing navigation aids (text with tooltip) A feature that offers essential support for screen-reader users to understand the structure of a web document. to help users understand DL interfaces, defining the structure of webpages and modal dialogs to limit interaction to the current layer. This can prevent confusion for the BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs).  user.

Techniques and Methods to Comply with a Specific Design Guideline

1.1. Utilize proper ARIA (text with tooltip) The acronym for Accessible Rich Internet Applications. It is a set of attributes that define ways to make web content and user interface more accessible to people with disabilities.  roles and associated attributes to restrict interactions to an active window.
1.2. Make a pop-up window a standalone window (text with tooltip) A feature that ensures the screen reader reads only the content visible on the current window.  when activated.
2.1. Integrate sounds that guide BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs).  users through the interface when the focus shifts to another window.
2.2 Alert users with vibration or haptic feedback when users move between windows

Features Suggested for Users

1.1.1. Active window (See example 1.1.1.a.)
1.2.1. Standalone window (text with tooltip) A feature that ensures the screen reader reads only the content visible on the current window.  (See example 1.2.1.a.)
2.1.1. Non-verbal sound cues (text with tooltip) A sound that assists BVI users in navigating the interface when focus transitions to a different window.
2.2.1. Alerts or haptic feedback

Examples of Best Practice

1.1.1.a. ARIA and Modal dialog to recognize pop-up windows

The HTML (text with tooltip) The acronym for Hyper Text Markup Language – the language in which many web pages are written. example in INT1 Figure a1 creates a webpage with a hidden modal dialog that can be opened and closed with buttons. The ARIA (text with tooltip) The acronym for Accessible Rich Internet Applications. It is a set of attributes that define ways to make web content and user interface more accessible to people with disabilities.  attributes are used to enhance accessibility for users of assistive technologies by providing semantic information about the page structure and modal content.

<header role="banner">
  <h1>Accessible Webpage</h1>
</header>
 
<main role="main">
  <h2>Welcome to Our Website</h2>
  <p>This is the main content of the webpage.</p>
  <button onclick="openModal()">Open Modal</button>
</main>
 
<div id="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
  <h2 id="modalTitle">Modal Dialog</h2>
  <p id="modalDescription">This is a modal dialog with additional information or options.</p>
  <button onclick="closeModal()">Close Modal</button>
</div>

INT1 Figure a1. An example code for using ARIA attributes

1.2.1.a. Making the advanced search a standalone window

This feature ensures that the screen reader (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface. reads only what is accessible on the shown window. From the INT1 Figure a2, basic search and advanced search have separate standalone windows (text with tooltip) A feature that ensures the screen reader reads only the content visible on the current window. .

INT1 Figure a2. An example of advanced search feature

Examples of Poor Practice

1.1.1.b. Difficulty interacting with multi-layered windows

While interacting with the advanced search feature, which appeared as a pop-up, the screen reader (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface.  focus shifted away from the active window to the grayed area without notifying the participant (INT1 Figure b1). As a result, when executing a search, the participant clicked the general search button instead of the advanced search button. “Search for words or phrases. OK, let me double clicking that. No. OK, I’m fine with that. Ohh I not page view Yeah, I had the advanced search. I like click and search words and phrases. It’s kind of bringing me back to the overview. It’s bringing me back to the party page view.” (AP8-AL)

INT1 Figure b1. Screenshot of difficulty interacting with multi-layered windows

Resources

• Snell, S. (2009). Clear and Effective Communication in Web Design.
• W3C (2018). WCAG 2.1 Guideline 3.1 Readable.
• Oud, J. (2016). Accessibility of vendor-created database tutorials for people with disabilities. Information Technology and Libraries, 35(4), 7–18.
• Xie, I., Babu, R., Lee, T. H., Castillo, M. D., You, S., & Hanlon, A. M. (2020). Enhancing usability of digital libraries: Designing help features to support blind and visually impaired users. Information Processing & Management, 57(3), 102110.

See also:

• INT Difficulty interacting