WAI ARIA alert on form submit (с перегрузкой страницы)

Question

Предположим, у нас есть классическая форма - несколько полей ввода, которые должны соответствовать некоторому шаблону. Когда пользователь вводит неверные данные и отправляет эту форму, все поля, которые были заполнены неправильно, помечены как недопустимые, и соответствующее соответствующее сообщение об ошибке предоставляется для каждого неправильного поля.

Мне нужно сделать эту форму WAI ARIA совместимой, так что после подачи формы средства доступности сначала увидят эти ошибки. Я нашел solution, который реализует его с помощью динамического изменения HTML с помощью JS (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; 
}); 

Здесь проверка не перегрузить страницу, и Зона «alert» динамически модифицируется.

В моем случае страница перезагружается на этапе валидации, и я не знаю, как сделать аварию. После нескольких часов расследования я не нашел никакого решения. Есть идеи?

Answer 1

Я думаю, что есть простое решение, но вам нужно будет сказать, покрывает ли он ваши дела.

Я был бы осторожен в том, чтобы сделать что-то «совместимым с 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.

Несколько статей по ошибкам сообщений о передовом опыте Ваш вопрос напомнил мне о, которые помогли бы расширить этот ответ на другие потребительных случаях:

• Displaying error messages
• Accessible form validation.