Accessible filter controls: a six-state review
Test focus, selection, result count, empty state, reset, and shared URLs.
A portfolio filter is not only a row of labels. It is a control that changes a result set. A useful review checks six states.
Focus
Every control must be reachable in a sensible keyboard order. The focused control needs a visible indicator that does not depend only on a subtle color change.
Selection
The selected filter must be available to software as well as sighted users. Do not rely only on a highlighted background. The control type and selected state should be clear from its markup and label.
Result count
State how many items are now visible. If results update without a page load, the change must not silently move keyboard focus or leave a user unsure whether anything happened.
Empty result
An empty filter is a normal state. Explain that no items match and offer a reset. Do not leave a blank region that looks like a loading failure.
Reset
The reset should return both the visible results and the control state to a known default. Test it after more than one filter or search term is active.
Shared URL
If the state matters, a copied link should preserve it. Query parameters can make a filtered view shareable, but the unfiltered page must still work when a parameter is invalid or missing.
For the current control semantics, see the W3C Web Accessibility Initiative’s button pattern, including its guidance for toggle-button names and aria-pressed state.