WebAIM - Web Accessibility In Mind

E-mail List Archives

Search and results interface

for

From: Sean Keegan
Date: May 18, 2015 12:53AM

Hello all,

I am working with a developer who has implemented a search and results
interface and we are trying to figure out what may be options for
accessibility. This is for an online application and here is how the search
UI functions:
a) The user enters the first characters of a school into a search text
field (this has role=combobox). This text field contains an aria-owns
attribute that specifies the parent <ul> of the results panel and contains
aria-autocomplete=inline.

b) Results are displayed as a series of list items with role=listbox set on
the parent <ul>. When there are a lot of results, these get organized into
a visual set of panels with a tab indicators - it's mainly visual as there
is little to no semantic markup.

Keyboard navigation is possible within the results listbox, but not between
the tab indicators. We were thinking of coding these results panels using
tablist/tab panel with arrow keys to move between these results, but have
not had success. Any use of the keyboard (besides up and down) changes the
search text field itself as focus is still on the search input.

Does anyone have a working example of a search and results interface
containing multiple "panels" of results? Most examples we have identified
display only a handful of results as opposed to a larger set. We are
considering a different UI, but thought we try to find options before
dumping the current model.

Thanks,
Sean