WCAG 2.0 aria-labeledby für Formular-Header und Disclaimer

Question

Ich bin nicht sicher, wie ein Formular aria-labeledby oder aria-beschrieben wird, wenn Sie versuchen, eine Überschrift und einen Disclaimer wie "Alle Felder sind erforderlich, wenn optional markiert "Haftungsausschluss oben auf Ihrem Formular. Ich denke, das ist, wie ich denke, es ist getan, aber ich bin neu in der Zugänglichkeit, so dass alle Korrekturen sehr geschätzt werden würden!

<form id="profile optional"> 
    <h1 arialabelledby="profile">Profile</h1> 
    <p aria-describedby="optional">All fields are required unless marked optional</p> 

    <fieldset> 
    <legend id="userInfo" aria-labelledby="formA">User Info</legend> 

    <div class="form-control"> 
     <label id="firstName" for="firstName">First Name</label> 
     <input type="text" name="firstName" aria-labelledby="firstName userInfo" aria-required="true" aria-describedby="error-message"/> 
     <span id="error-message" style="display:none" aria-hidden="true">Name is required</span> 
    </div> 

    <div class="form-control"> 
     <label id="lastName" for="lastName">Last Name</label> 
     <input type="text" name="lastName" aria-labelledby="lastName userInfo" aria-required="true" aria-describedby="error-message"/> 
     <span id="error-message" style="display:none" aria-hidden="true">Name is required</span> 
    </div> 

    <div class="form-control"> 
     <label id="nickName" for="nickName">Nick Name (optional)</label> 
     <input type="text" name="nickName" aria-labelledby="nickName userInfo"/> 
    </div> 
    <fieldset> 

    <fieldset> 
    ... 
    </fieldset> 

    <button type="submit" aria-label="Submit Profile">Submit</button> 
</form> 

bearbeiten * Code für Absenden-Button

Answer 1

Dies ist ein Fall, in dem Sie eine ARIA nicht brauchen. Sie können auf gute UX zurückgreifen und das ARIA unnötig machen.

Am Anfang Ihres Formulars geben Sie Anweisungen, dass alle Felder erforderlich sind. Das ist gut. Dann für Felder, die Option sind Sie "(optional)" in der <label>. Das ist auch gut.

Sie könnten aufhören und alles bereit sein.

Sie haben jedoch ARIA in das Formular eingefügt und einige davon rückwärts gelesen. Zum Beispiel:

<form id="profile optional"> 
<h1 arialabelledby="profile">Profile</h1> 
<p aria-describedby="optional">All fields are required unless marked optional</p> 

Sie erzählen die <h1>, die von der <form> markiert ist, wenn es umgekehrt sein sollte. Sie sagen auch der <p>, dass es von der <form> beschrieben wird, die wiederum umgekehrt wäre. Einfach alles rauszerren.

Oder nehmen diesen Fall:

<div class="form-control"> 
    <label id="lastName" for="lastName">Last Name</label> 
    <input type="text" name="lastName" aria-labelledby="lastName userInfo" aria-required="true" aria-describedby="error-message"/> 
    <span id="error-message" style="display:none" aria-hidden="true">Name is required</span> 
</div> 

Die <input> braucht nicht aria-labelledby-<label> tut das kostenlos. Darüber hinaus macht es die Assoziation mit der <legend> ausführlicher und kann Benutzer verwirren.

Sie sollten auch aria-required entfernen und einfach den booleschen HTML5 required verwenden. It is well supported und Vorteile für Nicht-Screen-Reader-Benutzer.

Während ich vermute, dass Sie nur die Fehlermeldung anzeigen, wenn ein Fehler vorliegt, können Sie es vollständig entfernen und den Browser damit umgehen lassen. Wenn Sie es für rückwärts compat behalten müssen, dann lassen Sie die aria-hidden fallen, da die display:none es von Bildschirmlesern sowieso verbirgt.

Gleiches gilt für die Schaltfläche. Dump den ARIA und machen Sie es einfach <button type="submit">Submit Profile</button>. Alle Ihre Benutzer werden von der ausführlicheren Schaltfläche profitieren.

Da Sie <legend> und <fieldset> gut nutzen, können Sie all diese Sachen verlassen und Sie sind in guter Verfassung.

Sie haben soeben ein zugängliches, verwendbares, ARIA-freies Formular erstellt. ARIA-frei ist eine gute Sache. ARIA ist eine Brückentechnologie, die nur verwendet werden sollte, wenn in regulärem HTML kein Angebot vorliegt.