#表單

當(dāng)創(chuàng)建一個(gè)表單，你可能使用到以下幾個(gè)元素：<form>、<label>、<input>、<textarea> 和 <button>。

標(biāo)簽通常放置在表單字段的頂部或左側(cè)：

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      :type="item.type"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
    />
  </div>
  <button type="submit">Submit</button>
</form>

點(diǎn)擊此處實(shí)現(xiàn)

注意如何在表單元素中包含 autocomplete='on'，它將應(yīng)用于表單中的所有輸入。你也可以為每個(gè)輸入設(shè)置不同的自動(dòng)完成屬性的值。

#標(biāo)簽

提供標(biāo)簽以描述所有表單控件的用途；鏈接 for 和 id：

<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name" />

點(diǎn)擊此處實(shí)現(xiàn)

如果你在 chrome 開(kāi)發(fā)工具中檢查這個(gè)元素，并打開(kāi) Elements 選項(xiàng)卡中的 Accessibility 選項(xiàng)卡，你將看到輸入是如何從標(biāo)簽中獲取其名稱(chēng)的：

警告：

雖然你可能已經(jīng)看到這樣包裝輸入字段的標(biāo)簽：

<label>
  Name:
  <input type="text" name="name" id="name" v-model="name" />
</label>

輔助技術(shù)更好地支持用匹配的 id 顯式設(shè)置標(biāo)簽。

#aria-label

你也可以給輸入一個(gè)帶有aria-label 的可訪問(wèn)名稱(chēng)。

<label for="name">Name</label>
<input
  type="text"
  name="name"
  id="name"
  v-model="name"
  :aria-label="nameLabel"
/>

點(diǎn)擊此處實(shí)現(xiàn)

請(qǐng)隨意在 Chrome DevTools 中檢查此元素，以查看可訪問(wèn)名稱(chēng)是如何更改的：

#aria-labelledby

使用 aria-labelledby 類(lèi)似于 aria-label，除非標(biāo)簽文本在屏幕上可見(jiàn)。它通過(guò) id 與其他元素配對(duì)，你可以鏈接多個(gè) id：

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
    />
  </div>
  <button type="submit">Submit</button>
</form>

點(diǎn)擊此處實(shí)現(xiàn)

#aria-describedby

aria-describedby 的用法與 aria-labelledby 相同，預(yù)期提供了用戶(hù)可能需要的附加信息的描述。這可用于描述任何輸入的標(biāo)準(zhǔn)：

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Full Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Please provide first and last name.</p>
  </div>
  <button type="submit">Submit</button>
</form>

點(diǎn)擊此處實(shí)現(xiàn)

你可以通過(guò)使用 Chrome 開(kāi)發(fā)工具來(lái)查看說(shuō)明：

#占位符

避免使用占位符，因?yàn)樗鼈兛赡軙?huì)混淆許多用戶(hù)。

占位符的一個(gè)問(wèn)題是默認(rèn)情況下它們不符合顏色對(duì)比標(biāo)準(zhǔn)；修復(fù)顏色對(duì)比度會(huì)使占位符看起來(lái)像輸入字段中預(yù)填充的數(shù)據(jù)。查看以下示例，可以看到滿(mǎn)足顏色對(duì)比度條件的姓氏占位符看起來(lái)像預(yù)填充的數(shù)據(jù)：

點(diǎn)擊此處實(shí)現(xiàn)

最好提供用戶(hù)在任何輸入之外填寫(xiě)表單所需的所有信息。

#操作指南

為輸入字段添加說(shuō)明時(shí)，請(qǐng)確保將其正確鏈接到輸入。你可以提供附加指令并在 aria-labelledby 內(nèi)綁定多個(gè) id。這使得設(shè)計(jì)更加靈活。

<fieldset>
  <legend>Using aria-labelledby</legend>
  <label id="date-label" for="date">Current Date:</label>
  <input
    type="date"
    name="date"
    id="date"
    aria-labelledby="date-label date-instructions"
  />
  <p id="date-instructions">MM/DD/YYYY</p>
</fieldset>

或者，你可以用 aria-describedby將指令附加到輸入。

<fieldset>
  <legend>Using aria-describedby</legend>
  <label id="dob" for="dob">Date of Birth:</label>
  <input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
  <p id="dob-instructions">MM/DD/YYYY</p>
</fieldset>

點(diǎn)擊此處實(shí)現(xiàn)

#隱藏內(nèi)容

通常不建議直觀地隱藏標(biāo)簽，即使輸入具有可訪問(wèn)的名稱(chēng)。但是，如果輸入的功能可以與周?chē)膬?nèi)容一起理解，那么我們可以隱藏視覺(jué)標(biāo)簽。

讓我們看看這個(gè)搜索字段：

<form role="search">
  <label for="search" class="hidden-visually">Search: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <button type="submit">Search</button>
</form>

我們可以這樣做，因?yàn)樗阉靼粹o將幫助可視化用戶(hù)識(shí)別輸入字段的用途。

我們可以使用 CSS 直觀地隱藏元素，但可以將它們用于輔助技術(shù)：

.hidden-visually {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

點(diǎn)擊此處實(shí)現(xiàn)

#aria-hidden="true"

添加 aria hidden="true" 將隱藏輔助技術(shù)中的元素，但使其在視覺(jué)上對(duì)其他用戶(hù)可用。不要把它用在可聚焦的元素上，純粹用于裝飾性的、復(fù)制的或屏幕外的內(nèi)容上。

<p>This is not hidden from screen readers.</p>
<p aria-hidden="true">This is hidden from screen readers.</p>

#按鈕

在表單中使用按鈕時(shí)，必須設(shè)置類(lèi)型以防止提交表單。

也可以使用輸入創(chuàng)建按鈕：

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <!-- Buttons -->
  <button type="button">Cancel</button>
  <button type="submit">Submit</button>


  <!-- Input buttons -->
  <input type="button" value="Cancel" />
  <input type="submit" value="Submit" />
</form>

點(diǎn)擊此處實(shí)現(xiàn)

#功能圖像

你可以使用此技術(shù)創(chuàng)建功能圖像。

• Input 字段

• 這些圖像將作為表單上的提交類(lèi)型按鈕

  <form role="search">
    <label for="search" class="hidden-visually">Search: </label>
    <input type="text" name="search" id="search" v-model="search" />
    <input
      type="image"
      class="btnImg"
      src="https://img.icons8.com/search" rel="external nofollow" 
      alt="Search"
    />
  </form>

• 圖標(biāo)

<form role="search">
  <label for="searchIcon" class="hidden-visually">Search: </label>
  <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
  <button type="submit">
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="hidden-visually">Search</span>
  </button>
</form>

點(diǎn)擊此處實(shí)現(xiàn)