WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Appropriate ARIA for keyword filter

for

From: Jesse Hausler
Date: Apr 25, 2014 11:02AM

These are the semantics and aria we use for our autocomplete typeaheads.
Shown with two results to keep it short:

<input aria-activedescendant="foo" aria-expanded="true"

aria-haspopup="true" aria-autocomplete="list" role="combobox">

<div role="listbox">

<ul role="presentation">

<li role="presentation">

<a href="Javascript:void(0);" role="option" id="foo">

<mark>Hel</mark>lo World 1

</a>

</li>

<li role="presentation">

<a href="Javascript:void(0);" role="option" id="bar">

<mark>Hel</mark>lo World 2

</a>

</li>

</ul>

</div>


Good luck,

Jesse


On Fri, Apr 25, 2014 at 7:57 AM, Larry C. Lyons < <EMAIL REMOVED> >wrote:

> Hi,
>
> I think I'm beginning to sound like a broken record here, but you may
> want to check out what Assets.cms.gov has to offer. This autocomplete
> demo we worked may fit your needs:
>
> http://assets.cms.gov/resources/framework/2.0/Pages/autocomplete.html
>
> hth,
> larry
>
> On Fri, Apr 25, 2014 at 11:03 AM, < <EMAIL REMOVED> >
> wrote:
>
> > ---------- Forwarded message ----------
> > From: Chris Pearce < <EMAIL REMOVED> >
> > To: " <EMAIL REMOVED> " < <EMAIL REMOVED> >
> > Cc:
> > Date: Fri, 25 Apr 2014 09:25:08 +1000
> > Subject: [WebAIM] Appropriate ARIA for keyword filter
> > Hi,
> >
> > I'm a front end developer seeking advice on what ARIA to use on the site
> I work on for my employer for a particular component, or even better any
> examples I can look at.
> >
> > The component is a keyword filter used to filter the stores on the store
> list page: http://www.westfield.com.au/bondijunction/stores. I was
> looking at this: http://hanshillen.github.io/jqtest/#goto_autocompletewhich we're using for our global search but I'm not entirely sure it's
> appropriate for this component?
> >
> > The site is responsive with iOS being our biggest user base so VoiceOver
> support is important.
> >
> > Thanks a lot
> > Chris
> >
> >
>
> --
> Larry C. Lyons
> web: http://www.lyonsmorris.com/lyons
> LinkedIn: http://www.linkedin.com/in/larryclyons
> > > >