Erreichbare Fehlerbehandlung mit WAI-ARIA - Best Practive?

Question

Ich möchte Benutzer von assistiven Technologien (wie Blindenschrift oder Bildschirmleser) über ungültige Eingabefelder informieren, mit .

Ich habe zwei Ansätze ausprobiert, die beide funktionieren, aber ich weiß nicht, welche die beste Praxis ist. Bitte teile deine Gedanken dazu.

Ansatz 1

Verwendung Arie-describedby. SR und Braille lesen das Etikett, sofern keine Fehlermeldung vorliegt.
Möglicher Nachteil: Es scheint, dass einige ältere SRs Probleme mit Wai-Aria-Attributen haben. Auch noch mehr globale IDs.

<input 
id="{{unique-id}}" 
type="text" 
aria-describedby="{{unique-id}}-error-message" 
> 

<label 
for="{{unique-id}}" 
> 
{{title}} 
</label> 

<p 
id="{{unique-id}}-error-message" 
role="alert" 
> 
{{error-message}} 
</p> 

Ansatz 2

Mit Titel und aria-Label. Titel für Abwärtskompatibilität. Möglicher Nachteil: Redundanter Text, der vom Server zum Client gesendet werden muss.

<input 
id="{{unique-id}}" 
type="text" 
title="{{title}} {{error-message}}" 
aria-label="{{title}} {{error-message}}" 
> 

<label 
for="{{unique-id}}" 
> 
{{title}} 
</label> 

<p> 
{{error-message}} 
</p> 

Eine Kombination beider Ansätze priorisiert Attribute, um folgende (falls unterstützt):

• aria-Label
• Titel
• aria-describedby

Irgendwelche Gedanken auf, Best Practice dazu?

Answer 1

Ich würde vorschlagen, dass man sich die ARIA Staaten einen Blick hinzugefügt ausdrücklich zum Zweck der Formularvalidierung:

• aria-required (und/oder HTML5 der required Attribut)
• aria-invalid

Diese - besuchen Sie die Website für weitere Informationen.

<input name="email" id="email" aria-required="true" reqiured 
    aria-invalid="false" onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> 

<script> 
    function checkValidity(aID, aSearchTerm, aMsg) { 
    var elem = document.getElementById(aID); 
    var invalid = (elem.value.indexOf(aSearchTerm) < 0); 
    if (invalid) { 
     elem.setAttribute("aria-invalid", "true"); 
     updateAlert(aMsg); // show your ARIA alert message 
    } else { 
     elem.setAttribute("aria-invalid", "false"); 
     updateAlert();  // remove your ARIA alert message 
    } 
    } 
</script> 

Answer 2

1. aria-describedby 

     <label aria-live="assertive" aria-describedby="error-info">User ID(required) 
      <span class="error-message" id="error-info">User ID cannot be empty, this will be your screen name</span> 
     </label> 
     <input type="text" class="error-decoration"/> 

Note: aria-live, aria-describedby added at the time of error, otherwise only label text would display. 

2. aria-labelledby 

<div id="name">Name</div> 
<input type="text" aria-labelledby="Your full name to be entered" /> 

3. aria-label - when there is no label present 

<input type="text" aria-label="Name"/> 

Answer 3

Dritte Option: mit Native Client-seitige Validierung mit Constraint Validation API

Dies erfordert Javascript, aber Sie werden der Browser implementieren nativ die Fehlermeldung sicher sein, und diese Informationen an die Accessibility API geben.

document.getElementById("{{unique-id}}").setCustomValidity("21 characters expected"); 

Ich würde nicht mit dieser Lösung ohne ausreichende visuelle Informationen verwendet, die nicht den Benutzer erfordern würde das Formular abzuschicken, bevor die Fehlermeldung angezeigt wird. Wenn Ihr Ansatz darauf antworten kann, mag ich auch die G139: Creating a mechanism that allows users to jump to errors Technik