E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 11 (In chronological order)

From: Sean Murphy
Date: Thu, Oct 13 2016 8:25PM
Subject: predictive searching on a web page and mouse hovers
No previous message | Next message →

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

From: Bryan Garaventa
Date: Thu, Oct 13 2016 11:29PM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Sean Murphy
Date: Thu, Oct 13 2016 11:35PM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

Brian,

In relation to mouse hovers, I am referring to the latter. Where you place a mouse over something like a graphic and more information is shown.
> On 14 Oct 2016, at 4:29 PM, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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 ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>

From: JP Jamous
Date: Fri, Oct 14 2016 7:23AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

Sean,

As far as your first question, I have not implemented anything like that but what you are describing is AJAX. The text box populates like Windows search and Run dialog box.

What comes to mind is the following.

1. This is a live region
2. It populates based onkeydown or onkeyup

Therefore, role="alert" and aria-alive would have to be used on the text box.

I am going to take a stab at the code. Bear in mind that I just walked into the office and don't have enough cafean in my system. The brain cells are still malfunctioning. :-)

<label for="search-box">
Please enter your search
</label>
<input type="text" id="search-box" onkeyup="checkLiveRegion();" />
Here is the javascript function.
function checkLiveRegion() {
var searchTextBox = document.getElementById(' search-box');
searchTextBox.setAttribute("role", "alert");
searchTextBox.setAttribute("aria-live", " polite");
/*
I made it polite in case the user types another letter. It will allow the SR to speak the next typed letter.
Whenever a key is released, the JS function fires up. This allows AJAX to populate before the live region is spoken.
There might be a need to removeAttribute, but you can identify that through trial and error.
*/
}

Sorry that I don't have any tested and working samples to send you. I just wanted to help by guiding you through the code logic.

From: Birkir R. Gunnarsson
Date: Fri, Oct 14 2016 7:48AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

Bryan has a great collection of examples.
You can head on over to http://www.statefarm.com to see a similar widget.
The markup is actually a little more complicated.
The key elements are:
1. Make sure users knows this type of functionality is associated with
your search.
* use role="combobox" in accordance with the pattern, or just use
aria-haspopup="true" on the input field.
* You may also want to use aria-describedby pointing to a short
sentence saying something like "when suggestions are available, press
arrow down to explore".
Then you can keep a live region span that you populate with info when
suggestions are available.
<span aria-live="polite" id="ls"></span>
Then you have to write JavaScript to display suggestions and handle
the keyboard navigation.

But, wait, good nes on the horizon:
You can use the HTML5 datalist attribute with an input element to have
the browser do most of I.
<label for="inp1">Famous grunge bands</label>
<input type="text" id="inp1" list="lGrunge">
<datalist id="lGrunge">
<option value="Alice in Chains">
<option value="Stone Temple Pilots">
<option value="Pearl Jam">
<option value="nirvana">
</datalist>

If you open this in Firefox and type in "A", then press arrow down,
you will see "Alicein Chains" suggested. If you press enter, you
populate the search field with that.
You jus need live regions to notify screen reader users when results
are available.
IE11 oes not support this, not sure about Chrome, but I think so.



On 10/14/16, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Sean,
>
> As far as your first question, I have not implemented anything like that but
> what you are describing is AJAX. The text box populates like Windows search
> and Run dialog box.
>
> What comes to mind is the following.
>
> 1. This is a live region
> 2. It populates based onkeydown or onkeyup
>
> Therefore, role="alert" and aria-alive would have to be used on the text
> box.
>
> I am going to take a stab at the code. Bear in mind that I just walked into
> the office and don't have enough cafean in my system. The brain cells are
> still malfunctioning. :-)
>
> <label for="search-box">
> Please enter your search
> </label>
> <input type="text" id="search-box" onkeyup="checkLiveRegion();" />
> Here is the javascript function.
> function checkLiveRegion() {
> var searchTextBox = document.getElementById(' search-box');
> searchTextBox.setAttribute("role", "alert");
> searchTextBox.setAttribute("aria-live", " polite");
> /*
> I made it polite in case the user types another letter. It will allow the SR
> to speak the next typed letter.
> Whenever a key is released, the JS function fires up. This allows AJAX to
> populate before the live region is spoken.
> There might be a need to removeAttribute, but you can identify that through
> trial and error.
> */
> }
>
> Sorry that I don't have any tested and working samples to send you. I just
> wanted to help by guiding you through the code logic.
>
>

From: JP Jamous
Date: Fri, Oct 14 2016 8:44AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

Quite interesting. Thank you for sharing this.

From: _mallory
Date: Fri, Oct 14 2016 10:11AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

On Fri, Oct 14, 2016 at 09:48:46AM -0400, Birkir R. Gunnarsson wrote:
> Bryan has a great collection of examples.
> You can head on over to http://www.statefarm.com to see a similar widget.
> The markup is actually a little more complicated.
> The key elements are:
> 1. Make sure users knows this type of functionality is associated with
> your search.
> * use role="combobox" in accordance with the pattern, or just use
> aria-haspopup="true" on the input field.

Is haspopup still ok for an input? How out of date is this article?
http://www.ssbbartgroup.com/blog/expanding-the-use-of-the-aria-haspopup-property/

cheers,
_mallory

From: Birkir R. Gunnarsson
Date: Fri, Oct 14 2016 10:22AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

ARIA 1.1 expands the definition of aria-haspopup to include a bunch of
ther types (listbox, dialog etc.)
http://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
aria-haspopup="true" = aria-haspopup="menu" (for 1.0 backward compatibility).
Technically aria-haspopup="listbox" would be more semantically
accurate (once ARIA 1.1 is published), but really the only thing
aria-haspopup achieves here is to have screen readers announce "has
pop up" or "has menu" which indicates to user that this input is more
than just plain input.
If you use the list="id" attribute on the input and a <datalist> you
shouldn't need aria-haspopup, the browser should be taking care of
that for you.



On 10/14/16, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> On Fri, Oct 14, 2016 at 09:48:46AM -0400, Birkir R. Gunnarsson wrote:
>> Bryan has a great collection of examples.
>> You can head on over to http://www.statefarm.com to see a similar widget.
>> The markup is actually a little more complicated.
>> The key elements are:
>> 1. Make sure users knows this type of functionality is associated with
>> your search.
>> * use role="combobox" in accordance with the pattern, or just use
>> aria-haspopup="true" on the input field.
>
> Is haspopup still ok for an input? How out of date is this article?
> http://www.ssbbartgroup.com/blog/expanding-the-use-of-the-aria-haspopup-property/
>
> cheers,
> _mallory
> > > > >


--
Work hard. Have fun. Make history.

From: Bryan Garaventa
Date: Fri, Oct 14 2016 10:35AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

Exactly, but it's important to note that at present the new token values for aria-haspopup within ARIA 1.1 are not supported anywhere as yet, so any value will still be interpreted as "true", meaning that it maps to the presence of a popup menu.

Within a year or so we should be seeing much better support for this, since ARIA 1.1 has just gone into CR status this week and will hopefully be ratified by the beginning of the year.

When using role=combobox, it is not necessary to include aria-haspopup, because this property is implicitly set by the browser within the accessibility tree.

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

From: Jonathan Avila
Date: Fri, Oct 14 2016 11:17AM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | Next message →

> 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.

You can use aria-describedby to associate the tooltip text with the triggering item -- you will want the item to be focusable for keyboard only users as well and can use onfocus to trigger the popup.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!

From: _mallory
Date: Fri, Oct 14 2016 1:56PM
Subject: Re: predictive searching on a web page and mouse hovers
← Previous message | No next message

Ok cool, I hadn't used haspopup on my last 2 comboboxes for autocomplete
because of the menu thing, and I did use the list attr.

Good to know.

_mallory

On Fri, Oct 14, 2016 at 04:35:39PM +0000, Bryan Garaventa wrote:
> Exactly, but it's important to note that at present the new token values for aria-haspopup within ARIA 1.1 are not supported anywhere as yet, so any value will still be interpreted as "true", meaning that it maps to the presence of a popup menu.
>
> Within a year or so we should be seeing much better support for this, since ARIA 1.1 has just gone into CR status this week and will hopefully be ratified by the beginning of the year.
>
> When using role=combobox, it is not necessary to include aria-haspopup, because this property is implicitly set by the browser within the accessibility tree.
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>