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

Posted 2023-05-08

【中文标题】Jquery UI 对话可访问性（屏幕阅读器）问题

【英文标题】：Jquery UI dialogue accessibility (screen reader) issue

【发布时间】：2017-08-17 15:55:48

【问题描述】：

我有一个简单的 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 按钮。我希望屏幕阅读器能够阅读错误标题、错误消息和存在的按钮。

【参考方案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 在本例中未定义。

【讨论】：

它按预期工作。我在可访问性（屏幕阅读器）方面遇到问题。你检查了吗？

@abhilashk 不，我没有。你从来没有在你的帖子中提到过。请用更完整的问题澄清或更新您的帖子，也许包括复制问题的步骤。