WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: predictive searching on a web page and mouse hovers

for

From: Bryan Garaventa
Date: Oct 13, 2016 11:29PM

Hi,
To make what you refer to as 'predictive searching, or autosuggest, or typeahead functionality to work correctly, it has to be marked up properly as an ARIA Combobox widget, like so:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Substring%20Match)/demo.htm

The requisit role and attribute mappings are explained in the matrices table at
http://whatsock.com/training/matrices/#combobox

To see the code for the live demo plus additional types of ARIA Combobox widget types, you can download the archive at
https://github.com/accdc/tsg

The Combobox widgets are in the folder "Coding ArenaARIA Comboboxes"

Regarding mouse hover on graphics, are you referring to clickable elements like clickable icons, or images that show text when you mouse over them?

Best wishes,
Bryan

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Sean Murphy
Sent: Thursday, October 13, 2016 7:26 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] predictive searching on a web page and mouse hovers

All,

From my searching, I haven't been successful in finding a answer to my questions.

1. Google uses and so do some other pages a predictive search functionality. As the person types in the information, the search results gets automatically updated. Screen reader's on www.google.com <http://www.google.com/>; do not handle this. Any one got example code or tips to make this style of interactive searching work with screen readers?

2. Mouse hovers when a user places a mouse pointer on top of an graphic, link, paragraph, etc. How can a screen reader or keyboard user interact with this? Does a on keyboard event have to be present? Some posts I have seen state the use of a mouse hover as I described should not be present. I am not sure the best practise here.

Sean