Accompanying Files
Observation Details
Loading more products into product list by clicking "Weitere Geräte anzeigen" should move the focus, so that the first dynamically added element becomes the next focusable element. This is not the case.
Using keyboard navigation, after clicking the button, the content is correctly loaded, but the focus is set in a way, so that the next focusable element (pressing TAB) is the button again; this means, navigating the product list by keyboard becomes nearly impossible
Using a screen reader to navigate (see attached GIF screencast),
after clicking the button, the content is loaded correctly
screen reader announces the change in URL (adding "?currentPage=2&tariffld=MF_17496&itemPerPage=12&e
xcludedCurrentPage=1&bp=acquisition")
focus is set, so that to the next focusable element is the last element that was focused before the button. In this case, the price of the previous product card, which, while not being exactly what is needed, at least is not wrong
This however only works, when arriving at the button from the "right direction". Selecting the button from the next element in the DOM results in the focus being set to this exact element after dynamically loading of the new products. This way, the focus is set to after the product list and navigating to newly added devices is again nearly impossible
Remediation Notes
Important note:
While technically, this behavior does not completely remove access which would be needed to justify priority 1 "Critical", the combination of this issue with other issues, limiting the user experience with keyboard and screen reader navigation immensely already, still does make this issue a critical one.
Treating it as such in the current state, keyboard and screen reader users might not at all be able to navigate more than one page of products in the product list within the shop, is highly recommended.
Ensure, clicking the button "Weitere Geräte anzeigen" will result in:
Loading more products into the product list
Not announcing change of query parameters in the URL, as long as the change is not useful information to be announced
But ideally do announce the change of content (e.g. by using an ARIA live region and announce "X weitere Geräte werden angezeigt")
Setting the focus to the first focusable element before the first newly added element
This must be indicated by DOM structure, not by the element that was focused before the button was focused
This must work with keyboard and screen reader navigation alike