WCAG 2.0 aria-labelledbyフォームヘッダーと免責事項

Question

ヘッダーと免責事項を記載しようとしているときに、フォームがaria-labelledbyまたはaria-describedbyであることがわかりません。「すべてのフィールドは必須ですあなたのフォームの上部にある免責事項。私はこれが終わったと思いますが、私はアクセシビリティには慣れていないので、どんな修正も大歓迎です！

<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> 

送信ボタンを

Answer 1

の編集*コードこれは、あなたがどんなARIAを必要としない場合です。良いUXに落ちると、ARIAが不要になります。

フォームの最初に、すべてのフィールドが必要であることを指示します。それはいいです。オプションのフィールドの場合は、<label>に「（オプション）」を含めます。それも良いです。

ここで停止してすべて設定することができます。

ただし、フォームにARIAを追加し、その一部を後方に取得しました。たとえば：

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

あなたはそれが他の方法で回避する必要がありますとき<form>により標識された<h1>を語っています。 <p>には<form>で記述されていると伝えていますが、やはりこれは逆です。それだけですべてのことをヤンクします。

またはこのケースを取るには：

<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> 

<input>必要はありませんaria-labelledbyから<label>自由のためのことを行います。さらに、それを<legend>に関連付けると、より冗長になり、ユーザーを混乱させる可能性があります。

また、aria-requiredを削除し、HTML5のブール値requiredを使用してください。 It is well supportedと非スクリーンリーダーユーザーの利益になります。

エラーがある場合にのみエラーメッセージを表示すると思われますが、すべてを削除してブラウザで処理できるようにしてください。あなたが後方互換のためにそれを保持する必要がある場合は、aria-hiddenをドロップします。なぜなら、display:noneはスクリーンリーダーからそれを隠すからです。

ボタンと同じです。 ARIAをダンプして、それを<button type="submit">Submit Profile</button>にしてください。より冗長なボタンを使用すると、すべてのユーザーに利益がもたらされます。

<legend>と<fieldset>を十分に活用しているので、すべてのものを残すことができ、あなたはいい状態です。

アクセス可能で、使用可能なARIAフリーフォームを作成したばかりです。 ARIAフリーは良いことです。 ARIAは、通常のHTMLにアフォーダンスがない場合にのみ使用する必要のあるブリッジング技術です。