Question

我有一个简单的jquery ui对话如下：

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

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

＆＃13;

 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" );
                }
            }
        });    
    }

＆＃13;

当显示弹出窗口时，它只会读出 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。

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

1 个答案: