This page contains an example implementation of a two-dimensional/3 by 3 grid that could be used to filter results for a complex search or other similar function.
Tables are used for layout but their semantics are removed. Text labels outside the grid are aria-hidden. The filter grid has role of application and is made up of cells that are defined as aria-checkbox, which get their accessible names from the aria-hidden text labels.
Keyboard navigation in the grid is handled by roving tabindex. Arrow keys navigate in the filter grid, and Space bar or Enter toggles the checked state. (In practice, an informational tooltip next to the heading describing the filter could be used to provide keyboard and other usage instructions. Since all of the fields are simply swipe focusable on mobile (and there is no such thing as an application mode in mobile) usage instructions should be removed on mobile.)
An ARIA-live region is used to tell the screen reader user all of the currently applied filters (or report that none is selected once the last checkbox is unchecked). A font-icon and a color change is used to indicate checked state on boxes in the grid. Any technique that does not rely on color alone, however, would serve as well.
|
|
|||||||||||