WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alert on search results update

for

From: Yeti
Date: Jun 25, 2023 10:27PM

Hello Sumit and All,

The worst solution is when the screen reader doesn't say anything!
For this reason too much talking is only the second worst solution.

Nevertheless, you could do the following:

Similar to input fields, where the number of entered or remaining characters is displayed, a delayed output can be the solution.

Implement an element that shows the number of results when there are many results and the results themselves or the first result when there are few results.

With a call

var DelayedLiveRegion = new LiveregionHandler("DelayedLiveRegion", 500);

you may initialize an object of the JS LiveregionHandler class attached below, which then takes care of such a delayed output. And this is equally delayed for sighted and blind people.
A delay of 250 to 500 milliseconds should be a good compromise.

Anytime, your Results change, You may call

DelayedLiveRegion.Say(newElementcontent);

Blind users are not more stupid than sighted users, their intelligence often just gets less information to work with.

By the way: It's not uncommon for blind users to hit enter when they think they've reached their goal. Much like how sighted users instinctively click with the mouse on something that looks interesting.

Implementing the search field in a way that the first search result is focused when you press Enter should therefore be considered.

Ad Astra

Yeti

/* *** Begin Liveregion/Autotext
This class transforms the passed element into an area whose content is automatically output via the BLP when it changes.
Time-delayed outputs can also be made, which are useful, for example, for the number of characters that have already been entered.
Parameters of constrruktor:
- aOutputElementID:
Unique identifier of the element to be used for the output. Elements such as P, DIV or SPAN are suitable.
Passing an invalid identifier causes the constructor to fail.
The assignment to OutputElement.innerText only takes place when required.
- aDelayMS:
Waiting time in milliseconds that should elapse between setting the value and updating the content / speaking the same through the BLP.
The handoff is fault-tolerant; If in doubt, 0 (no delay) is assumed.
Parameters of the Say method
- aText:
Text to be output.
The repeated consecutive output of the same text is suppressed by the object.
*/
class LiveregionHandler {
constructor(aOutputElementID, aDelayMS) {
this.OutputElement = document.getElementById(aOutputElementID);
this.OutputElement.ariaLive = 'polite';
this.OldText = "";
this.NewText = "";
this.DelayMS = 0;
if (Number.isInteger(aDelayMS))
this.DelayMS = aDelayMS;
if (this.DelayMS < 0)
this.DelayMS = 0;
this.Ticker = 0;
}
Say(aText) {
this.NewText = aText;
if (this.NewText == this.OldText)
return;
if (this.DelayMS < 1) {
this._SayNow();
return;
}
this.SayTime = this.DelayMS + new Date().getTime();
if (0 == this.Ticker)
this.Ticker = setInterval(this._SayLater, 100, this);
}
_SayNow() {
this.OutputElement.innerText = this.NewText;
this.OldText = this.NewText;
}
_SayLater(aLiveregion) {
if (new Date().getTime() < aLiveregion.SayTime)
return;
clearInterval(aLiveregion.Ticker);
aLiveregion.Ticker = 0;
aLiveregion._SayNow();
}
}
/* *** End Liveregion/Autotext */ /* *** Begin Liveregion/Autotext
This class transforms the passed element into an area whose content is automatically output via the BLP when it changes.
Time-delayed outputs can also be made, which are useful, for example, for the number of characters that have already been entered.
Parameters of constrruktor:
- aOutputElementID:
Unique identifier of the element to be used for the output. Elements such as P, DIV or SPAN are suitable.
Passing an invalid identifier causes the constructor to fail.
The assignment to OutputElement.innerText only takes place when required.
- aDelayMS:
Waiting time in milliseconds that should elapse between setting the value and updating the content / speaking the same through the BLP.
The handoff is fault-tolerant; If in doubt, 0 (no delay) is assumed.
Parameters of the Say method
- aText:
Text to be output.
The repeated consecutive output of the same text is suppressed by the object.
*/
class LiveregionHandler {
constructor(aOutputElementID, aDelayMS) {
this.OutputElement = document.getElementById(aOutputElementID);
this.OutputElement.ariaLive = 'polite';
this.OldText = "";
this.NewText = "";
this.DelayMS = 0;
if (Number.isInteger(aDelayMS))
this.DelayMS = aDelayMS;
if (this.DelayMS < 0)
this.DelayMS = 0;
this.Ticker = 0;
}
Say(aText) {
this.NewText = aText;
if (this.NewText == this.OldText)
return;
if (this.DelayMS < 1) {
this._SayNow();
return;
}
this.SayTime = this.DelayMS + new Date().getTime();
if (0 == this.Ticker)
this.Ticker = setInterval(this._SayLater, 100, this);
}
_SayNow() {
this.OutputElement.innerText = this.NewText;
this.OldText = this.NewText;
}
_SayLater(aLiveregion) {
if (new Date().getTime() < aLiveregion.SayTime)
return;
clearInterval(aLiveregion.Ticker);
aLiveregion.Ticker = 0;
aLiveregion._SayNow();
}
}
/* *** End Liveregion/Autotext */ /* *** Begin Liveregion/Autotext
This class transforms the passed element into an area whose content is automatically output via the BLP when it changes.
Time-delayed outputs can also be made, which are useful, for example, for the number of characters that have already been entered.
Parameters of constrruktor:
- aOutputElementID:
Unique identifier of the element to be used for the output. Elements such as P, DIV or SPAN are suitable.
Passing an invalid identifier causes the constructor to fail.
The assignment to OutputElement.innerText only takes place when required.
- aDelayMS:
Waiting time in milliseconds that should elapse between setting the value and updating the content / speaking the same through the BLP.
The handoff is fault-tolerant; If in doubt, 0 (no delay) is assumed.
Parameters of the Say method
- aText:
Text to be output.
The repeated consecutive output of the same text is suppressed by the object.
*/
class LiveregionHandler {
constructor(aOutputElementID, aDelayMS) {
this.OutputElement = document.getElementById(aOutputElementID);
this.OutputElement.ariaLive = 'polite';
this.OldText = "";
this.NewText = "";
this.DelayMS = 0;
if (Number.isInteger(aDelayMS))
this.DelayMS = aDelayMS;
if (this.DelayMS < 0)
this.DelayMS = 0;
this.Ticker = 0;
}
Say(aText) {
this.NewText = aText;
if (this.NewText == this.OldText)
return;
if (this.DelayMS < 1) {
this._SayNow();
return;
}
this.SayTime = this.DelayMS + new Date().getTime();
if (0 == this.Ticker)
this.Ticker = setInterval(this._SayLater, 100, this);
}
_SayNow() {
this.OutputElement.innerText = this.NewText;
this.OldText = this.NewText;
}
_SayLater(aLiveregion) {
if (new Date().getTime() < aLiveregion.SayTime)
return;
clearInterval(aLiveregion.Ticker);
aLiveregion.Ticker = 0;
aLiveregion._SayNow();
}
}
/* *** End Liveregion/Autotext */