のjQuery UIの対話へのアクセス（スクリーンリーダー）問題

Question

は、私はシンプルなjqueryのUIダイアログ以下のように持っています。

function alertDialogue(output_msg, title_msg) { \t 
 
     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() 
 
       { 
 
       \t 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は未定義です。