'custom web accessibility error message when pressed enter with keyboard on submit button and input field is blank

I am new to WAI-ARIA. The problem I am facing is, if chat Subject(Textarea) is left blank, it should read error message but Jaws doesn't read. And also when user hits enter with keyboard or mouse in same subject being blank scenario, it should read another message saying subject is required for initiating a chat.

I tried below code

function (e) {
      if ((e.keyCode==13 || e.key==13) && input[0].value =='') {


 var newAlert = document.querySelector("#MyerrorMSg");
        newAlert.setAttribute("role", "alert");
        newAlert.setAttribute("id", "alert");
    var msg="Please enter chat subject to start session";
        var content = document.createTextNode(msg);
        newAlert.appendChild(content);
        document.body.appendChild(newAlert);
}
javascripthtmlwai-aria


Solution 1:[1]

Have you considered aria-live regions?

Have an empty aria-live region in your DOM. Update it with content using JS each time you need to announce something document.querySelector('#validation-errors').innerHTML(error)

<div role="region" id="validation-errors" aria-live="polite"></div>

Resources: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dimitrisk

Related Questions