AUTHOR: Peter Milchev
DATE POSTED: July 29, 2019
Call a JavaScript function and make JAWS read the custom text.
Sometimes we need to force JAWS to read more text, either for further instructions or workaround a bug in a complex scenario.
The Aria-Live region allows the assistive reader technologies, such as JAWS, to read an updated content in a live area region.
For optimal solutions, a visually hidden element with aria-live attribute can be added. We will update this element's content and force JAWS to pronounce it. To visually hide the div, we add the "position: absolute" and "left: -9999px", because readers ignore elements with "display: none" or "visibility: none".
The following script checks for the element and adds it programmatically to the <body>. You can also check an example how to use the script:
jaws-reader-script.js
;(
function
(global, undefined) {
var
panelId =
"my-jaws-reader-panel-id"
;
global.jawsReader = global.jawsReader || {};
createPanel() {
panel = document.createElement(
"div"
);
document.body.append(panel);
panel.setAttribute(
"aria-live"
,
"assertive"
//panel.style.position = "absolute";
//panel.style.left = "-9999px";
return
panel;
}
getPanel() {
panel = document.getElementById(panelId);
/* If the <div> element is not visible on page load,
then the assistive reader technology, such as JAWS,
might have issues with the aria-live region
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
*/
if
(!panel) {
panel = createPanel();
global.jawsReader.read =
read(message, force) {
panel = getPanel();
(force) {
panel.innerText =
""
setTimeout(
() {
panel.innerText = message;
}, 50);
})(window);
Index.html:
<
div
id
=
aria-live
style
"position: absolute; left: -9999px"
>
</
script
src
"jaws-reader-script.js"
></
function focusHandler() {
jawsReader.read('It works on input focus.');
function clickHandler() {
// the second argument will force JAWS to read the message
// even if the previously read message was the same
jawsReader.read("It works also on button click.", true)
input
type
"text"
onfocus
"focusHandler();"
value
/>
"button"
onclick
"clickHandler();"
onsubmit
"click and JAWS will read"
Resources Buy Try