Jquery UI 对话可访问性（屏幕阅读器）问题

Question

我有一个简单的 jquery ui 对话框，如下所示：

<div class="error" id="errorMsg" role="dialog" > </div>

我在下面有一个登录表单，我使用这个id="errorMsg" 来显示一个弹出窗口。

 function alertDialogue(output_msg, title_msg) {	
        if (!title_msg)
            title_msg = 'Error';
    
        if (!output_msg)
            output_msg = 'No Message to Display.';    
    
        $("#errorMsg").html(output_msg).dialog({
            title: title_msg,
            resizable: false,
            modal: true,
    
            buttons: {
                "Ok": function() 
                {
                	dialogueON = 0;
                    $( this ).dialog( "close" );
                }
            }
        });    
    }

当弹出窗口显示时，它只是读出 Ok 按钮。我希望屏幕阅读器能够阅读错误标题、错误消息和存在的按钮。

Answer 1

我没有发现您的代码有任何初始问题。我在这里测试过：https://jsfiddle.net/Twisty/avw0r0yd/

HTML

<form id="loginForm">
  <ul>
    <li>
      <label>User:</label>
      <input id="user" type="text">
    </li>
    <li>
      <label>Pass:</label>
      <input id="pass" type="password">
    </li>
  </ul>
  <button id="submitBtn" type="submit">
    Login
  </button>
</form>

<div class="error" id="errorMsg" role="dialog"> </div>

CSS

form ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

form ul li label {
  display: inline-block;
  width: 75px;
}

JavaScript

function alertDialogue(output_msg, title_msg) {
  console.log("Alert, " + title_msg + ": " + output_msg);
  if (!title_msg)
    title_msg = 'Error';

  if (!output_msg)
    output_msg = 'No Message to Display.';

  $("#errorMsg").html(output_msg).dialog({
    title: title_msg,
    resizable: false,
    modal: true,

    buttons: {
      "Ok": function() {
        dialogueON = 0;
        $(this).dialog("close");
      }
    }
  });
}

$(function() {
  $("#loginForm").submit(function(e) {
    e.preventDefault();
    console.log("Form submitted.");
    var user = $("#user"),
      pass = $("#pass");
    if (user.val().length === 0 || pass.val().length === 0) {
      alertDialogue("User or Pass Missing!", "Login Error");
      return false;
    }
  });
});

这似乎与 jQuery 3.1.1 和 jQuery UI 1.12.1 一样工作。我会检查你的浏览器控制台，看看那里是否有错误。 dialogueON 在本例中未定义。