我正在構建一個包含日期輸入欄位和時間下拉選擇器的用戶表單。它需要可訪問并符合 WCAG。我認為如果我們有一個視覺標簽來伴隨表單控制元件，那么對于有視力的用戶來說會更直觀。為了讓螢屏閱讀器用戶能夠訪問可視標簽中的內容，我需要將標簽顯式鏈接到表單控制元件。
由于下拉選單不是搜索欄位下拉選單，它只有一個觸發按鈕。
CodeSandbox：
問題：
當按鈕包含文本內容時，NVDA 等螢屏閱讀器不需要任何進一步的標簽，因為通常沒有必要。添加更多標簽會導致螢屏閱讀器公告的行為不符合預期。例如，讀取 aria-label 或 aria-labelledby 內容，不讀取按鈕內的內容。螢屏閱讀器似乎不支持按鈕角色的這種行為。
例子：
{/* works: start time, edit field, blank */}
<label id="form-label-4">Start date</label>
<input type="date" aria-labelledby="form-label-4"></input>
{/* does not work: start time, button */}
<label id="form-label-2">Start time</label>
<button aria-labelledby="form-label-2">12:00 PM</button>
{/* works, but not the desired effect: button, 13:00 PM. end time */}
<label id="form-label-3">End time</label>
<button aria-describedby="form-label-3">13:00 PM</button>
{/* does not work: button, start time */}
<button aria-label="Start time">13:00 PM</button>
我怎樣才能達到預期的效果？
uj5u.com熱心網友回復：
問題是您試圖為按鈕組件分配標簽和值，但這不是按鈕的設計目的 - 它意味著具有標簽和可能的狀態（例如，用于切換按鈕）。您已經創建了一個按鈕選單，其行為類似于僅選擇組合框，但在語意上不是組合框。
在我看來，你有兩個選擇：
將“開始時間”和“結束時間”按鈕選單重寫為僅限選擇的組合框。您可以參考WAI-ARIA 實踐示例以了解該組件在螢屏閱讀器中的行為方式。
您可以使用選定的時間向您的按鈕添加第二個不可見標簽，并使用 將其鏈接到按鈕
aria-describedby。這將按照您想要的順序宣布標簽、角色和值：
<label id="form-label-2">Start time</label>
<label id="form-label-3">12:00 PM<label>
<button aria-labelledby="form-label-2" aria-describedby="form-label-3">12:00 PM</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449649.html
上一篇：Flutter“復雜”的UI設計，用于將可拖動容器覆寫在另一個容器上
下一篇：Mavenrepo的Artifactory“設定我”界面不允許我在沒有首先識別部署和虛擬repos的情況下生成settings.xml