Observation Details
When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:
Opening a dialog window
Expanding an accordion item
Dynamically loading more content (e.g. more products in a product list) via "Load more" button
Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.
Content out of focus order found:
Footnote dialog window is not keyboard accessible.
Remediation Notes
Ensure, for all dynamically added content that can be activated by user,
focus cannot be set to focusable elements inside content, before content is being visually added (e.g. collapsed accordion items, or not yet opened dialog windows)
dynamic content should be placed directly below the triggering element in the DOM order
Opening e.g. a dialog window, will set the focus on the first focusable element inside the dialog window
Activating a "Load more" button must ensure, focus, after content is loaded, either
is set to the first focusable element of newly loaded content or
is set to the first preceding focusable element of newly loaded content.
Ensure, for all dynamically added and then removed content that can be activated by user,
keyboard focus
remains (e.g. collapsing/expanding accordion items) on the triggering element or
is set to (e.g. opening and closing a dialog window) the triggering element again.