Menu
Where should keyboard focus go when a ‘load more’ button is clicked? On websites showing this functionality; either focus is moved to the top of the page when the button is clicked, or focus moves beyond the new content.
I find these methods problematic because how do keyboard users, and assistive technology users know where the new content is started—and easily move to this point.
I am looking for a solution, and although I can think of a couple of ways to address this, I am unsure of the best approach from an accessibility perspective.
I'm looking for best practice functionality that is also accessible
Sites already checked for a 'Load more' content button functionality
691
Understanding Focus When an HTML element is able to handle keyboard input, it is said to have focus. Exactly one element is able to have focus in a time. In most browsers, users can move focus by pressing the Tab key and the Shift + Tab keys.
Focus Order: The navigation order of focusable elements MUST be logical and intuitive. Note 1: Focusable elements include links, form inputs and controls, buttons, and any element with a tabindex value of 0 or greater. Note 2: The default reading order is determined by the order of the focusable elements in the DOM.
Items that should not receive keyboard focus Links, buttons, and form controls are natively accessible to keyboard users, so should be used for interactivity whenever possible. Page elements that are not interactive to mouse or touch users should not be made keyboard focusable (such as by using tabindex ).
Focus determines where keyboard events go in the page at any given moment. For instance, if you focus a text input field and begin typing, the input field receives the keyboard events and displays the characters you type. While it has focus, it will also receive pasted input from the clipboard.
There's no single answer to this question, but there's some guidance from W3 regarding the opening and closing of modals (which are also a 'wholesale' shift in what's available to the UI, and therefore comparable).
Also there is this article, and these survey results (both from the esteemed Marcy Sutton) which may help make the right choice.
As always, testing with a representative group of your own actual users, and using analytics will serve your users better than designing for imaginary or 'generic' users.
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
