Load more

Extrapolation from GEL technical recommendations

Use "Load more" controls instead of pagination controls
Add an element with role="separator" before new content added with a "Load more" control.
Add a "Loading, please wait" message to a live region with role="status" during the delay while more content is requested. This message can be visually hidden.
The "Load more" control should be a <button> element.
The "Load more" control should be hidden from all users unless JavaScript runs, when it can be revealed.

The content of the element with role="separator" should describe the new content as it relates to the set of content, for example "Results 6 to 12".
The "Load more" control should only be revealed when JavaScript runs and it is confirmed that the user agent supports the JavaScript required to request more content.
When new content is dynamically loaded, focus should be set to the start of the new content.

Add an element with role="separator" before new content added with a "Load more" control.
Add a "Loading, please wait" message to a live region with role="status" during the delay while more content is requested. This message can be visually hidden.
The "Load more" control should be a <button> element.
The "Load more" control should be hidden from all users unless JavaScript runs, when it can be revealed.
The "Load more" control should only be revealed when JavaScript runs and it is confirmed that the user agent supports the JavaScript required to request more content.
When new content is dynamically loaded, focus should be set to the start of the new content.

Use "Load more" controls instead of pagination controls, when possible
Pagination controls should be contained in a <nav> element, with an accessible name provided by an aria-labelledby attribute referencing a heading element that describes the pagination.
The <nav> element should contain a heading element as its first meaningful content, used to label the <nav> element.
The pagination links should be <a> elements with an href value for the appropriate page within the pagination set.
The current pagination link should have an aria-current="page" attribute.
If more pagination controls are available than are currently shown, add role="separator" to the element that contains the visual indication, such as a horizontal elipsis, used to indicate the currently hidden controls.
"Previous page" and "Next page" controls should be <a> elements.
When active, i.e. on any other pagination page than the first for "Previous page" and any other pagination page than the last for "Next page", the <a> element should have an href value for the appropriate page within the pagination set.
When inactive, the <a> element for the "Previous page" and "Next page" controls should not have an href value.

JavaScript is used to intercept pagination link activations and the relevant content dynamically replacing the existing paginated content.
When new content is dynamically loaded, focus should be set to the start of the new content.

Use "Load more" controls instead of pagination controls, when possible
Pagination controls should be contained in a <nav> element, with an accessible name provided by an aria-labelledby attribute referencing a heading element that describes the pagination.
The <nav> element should contain a heading element as its first meaningful content, used to label the <nav> element.
The pagination links should be <a> elements with an href value for the appropriate page within the pagination set.
The current pagination link should have an aria-current="page" attribute.
If more pagination controls are available than are currently shown, add role="separator" to the element that contains the visual indication, such as a horizontal elipsis, used to indicate the currently hidden controls.
"Previous page" and "Next page" controls should be <a> elements.
When active, i.e. on any other pagination page than the first for "Previous page" and any other pagination page than the last for "Next page", the <a> element should have an href value for the appropriate page within the pagination set.
When inactive, the <a> element for the "Previous page" and "Next page" controls should not have an href value.
When new content is dynamically loaded, focus should be set to the start of the new content.