Selecting view type or filter should not shift focus to the top of the page

[alundgard]

Current behavior

Selecting a view type or filter using the keyboard or screen reader shifts the focus back to the top of the page.

Steps to reproduce

Example page: Spotlight Accessibility for SODA - San Francisco Buildings.

Navigate to the view type buttons with the keyboard or screen reader and make a selection. Also, navigate to the sidebar filters and make a selection.

Possible solution

WCAG Level A: Understanding Success Criterion 3.2.1: On Focus.

SODA recommends moving the focus to the beginning of the updated content (in this case, the exhibit items). Doing so would mean jumping over the Search input field, which sits between the view options and exhibit items. Or, when selecting a filter from the sidebar, focus would jump across sections of the page.

Another possibility may be to leave focus in its current position (at the view type button or sidebar filter), but with an indication that it has been selected (see #2472).

Reported by SODA

Violation: Ensure content updates define focus updates appropriately Severity: Major

[Issue] When activating the buttons for list vs. grid view, the focus shifts to the top of the page rather than being on the new view of content.

[User Impact] When content within a page changes without reloading the page and without appropriate focus changes, assistive technologies such as screen readers may not be aware of the changes or the user may only be alerted that a change in content occurred and have to review the entire page to discover exactly what changed.

[Recommendation] When the context of the page changes such as when the user initiates a change that updates a large portion of the page (e.g. in a single page application) focus should move to the beginning of the updated content. Similarly, when a button is activated to open a dialog, focus should be moved into the dialog. When the dialog is closed, focus needs to return to the element that triggered the dialog.

When activating any filter, the focus should either remain on the control or move to the search results. Use Javascript .focus() or another technique to manage focus.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

[jcoyne]

The different view types are actually different web pages. Note the view parameter is changed in the url:

https://exhibits.stanford.edu/a11y-for-soda/browse/san-francisco-buildings?view=list https://exhibits.stanford.edu/a11y-for-soda/browse/san-francisco-buildings?view=gallery

[alundgard]

The different view types are actually different web pages.

Thanks, I see that selecting filters from the sidebar has the same issue.