Definition
A situation that arises from difficulty navigating to a desired element of a paginated section (text with tooltip) A section of content that is divided into multiple pages based on a fixed amount of content per page. due to unclear structure and inappropriate labels of active elements (text with tooltip) An interactive HTML component that reacts to user actions such as input, textarea, and button and 'a' tags. .
Factors Leading to the Situation
- Complex information presentation: unclear structure
- Inappropriate labeling: uninformative active element (text with tooltip) An interactive HTML component that reacts to user actions such as input, textarea, button, and 'a' tags. or feature labels
Guidelines
- Ensure that the structure of the paginated section (text with tooltip) A section of content that is divided into multiple pages based on a fixed amount of content per page. is clearly presented.
- Ensure that labels for active elements indicate their content meaningfully.
- Ensure that the navigation within different pages of the section and items of the page is efficient.
Rationale for Suggesting the above Guidelines
Pagination is a way to organize, separate and display different items in an orderly manner on a website. There may be paginated sections that contain a series of items (e.g., a featured content section consisting of a slide show of multiple images) and associated tabs on a DL (text with tooltip) The acronym for digital library (DL) page. It is important to make sure that the active elements (text with tooltip) An interactive HTML component that reacts to user actions such as input, textarea, button, and 'a' tags. used for paginated sections (text with tooltip) A section of content that is divided into multiple pages based on a fixed amount of content per page. are well labeled to help screen readers (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface. to interact with digital libraries (DLs). 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 better understand their purposes for easy navigation. The proposed guidelines can help BVI users better navigate items on paginated sections of DLs.
Techniques and Methods to Comply with a Specific Design Guideline
1.1. Present
structure information
(text with tooltip)
An information structure that organizes page sections to define the total number of items in a set and the position of each item within the set.
(e.g., number of collections/items and their orders per section and per page) about a
paginated section
(text with tooltip)
A section of content that is divided into multiple pages based on a fixed amount of content per page.
using
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.
codes for pagination.
2.1. Use
aria-label
(text with tooltip)
An HTML attribute that provides a text label for an object, such as a button.
to provide a label for each
active element
(text with tooltip)
An interactive HTML component that reacts to user actions such as input, textarea, button, and 'a' tags.
(e.g., tab)
3.1. Offer “skip to” features to different pages and collections/items within a
paginated section
(text with tooltip)
A section of content that is divided into multiple pages based on a fixed amount of content per page.
.
Features Suggested for Users
1.1.1.
Structure information
(text with tooltip)
An information structure that organizes page sections to define the total number of items in a set and the position of each item within the set.
(See example 1.1.1.a.)
2.1.1. Tab labels
3.1.1. “Skip to” (See example 3.1.1.a.)
Examples of Best Practice
1.1.1.a. ARIA features helping with structure information
Using 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. features helps to define different sections of a page, to indicate the currently active page within a set of pagination links, to define the total number of items in a set, and to define the position of an item within a set. In NAV2 Figure a1, this coding example enables 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. to navigate through paginated contents more accurately.
View and Copy code
<nav aria-label="Pagination">
<ul role="list" aria-labelledby="pagination-heading">
<li role="listitem" aria-current="page" aria-posinset="1" aria-setsize="5">
<a href="#page1">1</a>
</li>
<li role="listitem" aria-posinset="2" aria-setsize="5">
<a href="#page2">2</a>
</li>
<li role="listitem" aria-posinset="3" aria-setsize="5">
<a href="#page3">3</a>
</li>
<li role="listitem" aria-posinset="4" aria-setsize="5">
<a href="#page4">4</a>
</li>
<li role="listitem" aria-posinset="5" aria-setsize="5">
<a href="#page5">5</a>
</li>
</ul>
</nav>
NAV2 Figure a1. An example code for ARIA features
3.1.1.a. “Skip-to”
“Skip-to” feature enables
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 to skip to different pages of search results within a paginated section. As shown in NAV2 Figure a2, users can decide and click tabs associated with search result pages they want to skip to.
NAV2 Figure a2. An example of “Skip-to” within a paginated section
Examples of Poor Practice
2.1.1.b. Difficulty navigating paginated sections
According to NAV2 Figure b1, there are unlabeled tabs in the paginated section. Therefore, when 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 navigate the paginated section (text with tooltip) A section of content that is divided into multiple pages based on a fixed amount of content per page. , it is hard for them to know what those tabs are due to uninformative active element (text with tooltip) An interactive HTML component that reacts to user actions such as input, textarea, button, and 'a' tags. or feature labels. “There’s one that’s selected, and it’s an unlabeled tab. The second one is not selected, third one, fourth one. I mean at least ok. At least I know that there are tabs here, but it doesn’t tell me what those tabs are.” (ID17-LO)
NAV2 Figure b1. Screenshot of difficulty navigating paginated sections
Resources
- Accessibility Oz (2020). HTML5 sectioning elements and screen readers.
- Ferdous, J., Lee, H. N., Jayarathna, S., & Ashok, V. (2022). InSupport: Proxy interface for enabling efficient non-visual interaction with web data records. In Proceedings of the 27th International Conference on Intelligent User Interfaces (pp. 49-62).
- W3C. (n.d.). Search Landmark: ARIA Landmarks Example.