WAI ARIA提交表單提醒（帶頁面重新加載）

假設我們有一個經典的表單 - 一些輸入字段必須滿足某種模式。當用戶輸入不正確的數據並提交此表格時，所有填寫錯誤的字段將被標記爲無效，併爲每個不正確的字段提供適當的錯誤消息。WAI ARIA提交表單提醒（帶頁面重新加載）

我需要使這個表單符合WAI ARIA，以便表單提交後，輔助工具會首先看到這些錯誤。我發現solution，通過使用JS動態HTML修改實現它（http://jsfiddle.net/nS3TU/1/）：

HTML：

<form id="signup" method="post" action=""> 
    <p id="errors" role="alert" aria-live="assertive"></p> 
    <p> 
     <label for="first">First Name (required)</label> 
     <input type="text" id="first"> 
    </p> 
    <p> 
     <input type="submit" id="button" value="Submit"> 
    </p> 
</form>

JS：

$('#signup').submit(function() { 
    $('#errors').html(''); 
    if ($('#first').val() === '') { 
     $('#errors').append('Please enter your first name.'); 
    } 
    return false; 
});

這裏驗證不刷新頁面，以及「警報」區域是動態修改的。

在我的情況下，頁面重新加載驗證階段，我不知道如何使詠歎調警報工作。經過數小時的調查，我根本沒有找到任何解決方案。有任何想法嗎？

來源

2013-12-23 k-sever

'role =「alert」'含有'aria-live =「assertive」'的隱含行爲。請參閱http://www.w3.org/WAI/PF/aria/roles#alert – ckundo

有關「role =」alert「細微差別的討論，請查看http://blog.paciellogroup.com/ 2012/06/html5-accessibility-chops-aria-rolealert-browser-support/ – ckundo

我認爲有一個簡單的解決方案，但你必須說如果它涵蓋你的情況。

我會小心翼翼地做一些「符合WAI-ARIA」的東西，這本身不應該是一個目標。 WAI-ARIA旨在將網頁映射到應用程序角色，但只有應用程序實際上適用於此處理。

對於一個經典的網絡形式，你根本不需要WAI-ARIA。如果頁面重新加載，警報方面將不起作用，因爲它只會在內容動態更改時發出警報。

如果頁面沒有重新載入（如示例所示），您需要確保提交表單不會讓用戶坐在按鈕上。您可以通過以下方式來管理焦點：

$('#errors').append('Please enter your first name.'); 

    // Make the error message focusable, but not in the default tab-order: 
    $('#errors').attr('tabindex', '-1').css('outline', '0'); 

    // Set the focus on the (first) error message: 
    $('#errors').focus();

JSFiddle updated here。

上的錯誤消息的最佳做法一對夫婦的文章你的問題讓我想起，這將有助於這個答案擴展到其他使用情況：

來源

2014-01-02 12:14:11 AlastairC

感謝您的回覆。您提出的解決方案可能適用於我。我相信這裏的正確答案是「如果頁面重新加載，警報方面將不起作用，因爲只有當內容動態改變時它纔會發出警報」。我沒有在規範中明確指出這一點，所以我希望在這種情況下頁面加載之後警報方面纔會起作用 –

WAI ARIA提交表單提醒（帶頁面重新加載）

回答

相關問題