WCAG 2.0詠歎調 - labelledby表單頭和免責聲明

Question

我在一個形式如何，當你試圖把一個頭和像「所有領域都需要，除非標記爲可選免責聲明詠歎調 - labelledby或詠歎調，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的情況下。你可以回到良好的用戶體驗，這將使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中沒有可供選擇的情況下才能使用。