我有一個有點復雜的“嵌套”表單結構，我正在做這樣的事情：
<form>
<h2>Word Dictionary Entry</h2>
<div class='field'>
<label for="nameInput">Word</label>
<input id="nameInput" name="word" />
</div>
<div class='field-group-container'>
<label>Meanings</label>
<div class='field-group'>
<label>Meaning 1</label>
<div class='field'>
<label for="meaning1_sense1">Sense 1.1</label>
<input id="meaning1_sense1" />
</div>
<div class='field'>
<label for="meaning1_sense2">Sense 1.2</label>
<input id="meaning1_sense2" />
</div>
<button>Add sense</button>
</div>
<div class='field-group'>
<label>Meaning 2</label>
<div class='field'>
<label for="meaning2_sense1">Sense 2.1</label>
<input id="meaning2_sense1" />
</div>
<div class='field'>
<label for="meaning2_sense2">Sense 2.2</label>
<input id="meaning2_sense2" />
</div>
<button>Add sense</button>
</div>
<button>Add meaning</button>
</div>
</form>基本上，它是一種用于創建 Google 字典條目的表單，例如：
這不是表單的影像，而是您可以從這種表單生成的輸出。
對于每個1, 2, 3, ...，這些都是“有意義的專案”。然后對于每個意義項，有多個“意義”，它們是基本意義的細微變化。所以在這張圖片中，對于術語/單詞“程序”，有3 個含義，第一個含義有5 個含義，而其他兩個含義每個含義只有1 個含義。
- 意義
- 意義 1
- 感覺 1.1
- 感覺 1.2
- 感覺 1.3
- 感覺 1.4
- 感覺 1.5
- 意思 2
- 意義 2.1
- 意義 3
- 意義 3.1
- 意義 1
我甚至可以更深入一層，并說一種感覺有多個相關的“概念”，但我不會在這篇文章中說得那么遠。只知道嵌套不限于 3 級。
問題是，您應該如何構建表單以使其易于訪問？更高級別的“標簽”可能不應該是標簽，還是應該？在這種情況下我應該在哪里實際使用label標簽，我應該從 aria-roles 中使用什么來正確注釋這個嵌套？
uj5u.com熱心網友回復：
要構造表單，應使用<fieldset>元素和 a <legend>。
該元素具有組角色，不會將該結構添加到檔案大綱中，螢屏閱讀器會在焦點進入或離開組時進行通知，因此不會一直閱讀。
<form>
<h2>Word Dictionary Entry</h2>
<div class='field'>
<label for="nameInput">Word</label>
<input id="nameInput" name="word" />
</div>
<fieldset class='field-group-container'>
<legend>Meanings</legend>
<fieldset class='field-group'>
<legend>Meaning 1</legend>
<div class='field'>
<label for="meaning1_sense1">Sense 1.1</label>
<input id="meaning1_sense1" />
</div>
<div class='field'>
<label for="meaning1_sense2">Sense 1.2</label>
<input id="meaning1_sense2" />
</div>
<button>Add sense</button>
</fieldset>
<fieldset class='field-group'>
<legend>Meaning 2</legend>
<div class='field'>
<label for="meaning2_sense1">Sense 2.1</label>
<input id="meaning2_sense1" />
</div>
<div class='field'>
<label for="meaning2_sense2">Sense 2.2</label>
<input id="meaning2_sense2" />
</div>
<button>Add sense</button>
</fieldset>
<button>Add meaning</button>
</fieldset>
</form>還有一個問題需要回答：您如何告訴螢屏閱讀器用戶他們的新專案已添加？
一種解決方案可能是直接關注新輸入，這將宣布新元素和它所在的新組。
addMeaning.addEventListener('click', () => {
// add new fieldset…
// focus the first input in the new fieldset
newFieldset.querySelector('input').focus();
});
您的問題尚不清楚如何洗掉含義或感覺。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496345.html