Improve accessibility of Load more

[obulat]

Problem

Currently, when you click on Load more button, the screen reader does not let you know when the results were loaded, and the focus does not go to the new results.

Description

BBC has a good guide on how to make "Load more" type of navigation accessible: https://bbc.github.io/gel/components/load-more/

Additional context

SO answer on focus after clicking "Load more" button: https://stackoverflow.com/a/65695024 Another in-depth article about a solution: https://www.aleksandrhovhannisyan.com/blog/load-more-button-focus/

[Tanmay-Tiwaricyber]

To solve the problem of screen reader notifications and keyboard focus when loading more results, you can follow these steps:

Identify the Load More button: Locate the code or file that handles the functionality of the Load More button.

Implement an ARIA live region: Surround the area where the new results will be loaded with an ARIA live region. This will ensure that screen readers are notified of dynamic changes on the page. Add a

element with the attribute aria-live="polite" around the container that holds the new results.

html

Update the screen reader announcement: When the new results are loaded, dynamically update the content within the ARIA live region to inform screen readers that the results have been loaded. This can be done using JavaScript or other appropriate methods.

javascript

// After new results are loaded var resultContainer = document.getElementById("resultContainer"); resultContainer.innerHTML = "New results loaded.";

// You can also announce the number of new results loaded // For example: resultContainer.innerHTML = "5 new results loaded."; Set focus to the new results: After the new results are loaded, programmatically set the focus to the first item or a specific element within the new results. This ensures that keyboard focus moves to the appropriate location. You can use JavaScript to accomplish this.

javascript

// After new results are loaded var firstResult = document.querySelector("#resultContainer .result:first-child"); if (firstResult) { firstResult.focus(); }

Test with screen readers: Use screen reader software, such as NVDA, JAWS, or VoiceOver, to verify that the screen reader properly announces the loading of new results and that the focus moves to the appropriate location. Test with different screen readers and browsers to ensure compatibility.

Make necessary adjustments: If any issues or unexpected behaviors arise during testing, debug and make adjustments as needed until the screen reader notifications and keyboard focus behavior work as intended.

Document the modifications: Update the documentation or code comments to reflect the changes made to improve the screen reader experience and keyboard focus when loading more results. Provide instructions for future developers to understand the implementation.