Vue 3.0 語(yǔ)義學(xué)

2021-07-16 11:44 更新

#表單

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

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

  1. <form action="/dataCollectionLocation" method="post" autocomplete="on">
  2.   <div v-for="item in formItems" :key="item.id" class="form-item">
  3.     <label :for="item.id">{{ item.label }}: </label>
  4.     <input
  5.       :type="item.type"
  6.       :id="item.id"
  7.       :name="item.id"
  8.       v-model="item.value"
  9.     />
  10.   </div>
  11.   <button type="submit">Submit</button>
  12. </form>

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

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

#標(biāo)簽

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

  1. <label for="name">Name</label>
  2. <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)簽：

  1. <label>
  2.   Name:
  3.   <input type="text" name="name" id="name" v-model="name" />
  4. </label>

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

#aria-label

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

  1. <label for="name">Name</label>
  2. <input
  3.   type="text"
  4.   name="name"
  5.   id="name"
  6.   v-model="name"
  7.   :aria-label="nameLabel"
  8. />

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

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

#aria-labelledby

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

  1. <form
  2.   class="demo"
  3.   action="/dataCollectionLocation"
  4.   method="post"
  5.   autocomplete="on"
  6. >
  7.   <h1 id="billing">Billing</h1>
  8.   <div class="form-item">
  9.     <label for="name">Name:</label>
  10.     <input
  11.       type="text"
  12.       name="name"
  13.       id="name"
  14.       v-model="name"
  15.       aria-labelledby="billing name"
  16.     />
  17.   </div>
  18.   <button type="submit">Submit</button>
  19. </form>

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

#aria-describedby

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

  1. <form
  2.   class="demo"
  3.   action="/dataCollectionLocation"
  4.   method="post"
  5.   autocomplete="on"
  6. >
  7.   <h1 id="billing">Billing</h1>
  8.   <div class="form-item">
  9.     <label for="name">Full Name:</label>
  10.     <input
  11.       type="text"
  12.       name="name"
  13.       id="name"
  14.       v-model="name"
  15.       aria-labelledby="billing name"
  16.       aria-describedby="nameDescription"
  17.     />
  18.     <p id="nameDescription">Please provide first and last name.</p>
  19.   </div>
  20.   <button type="submit">Submit</button>
  21. </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ì)更加靈活。

  1. <fieldset>
  2.   <legend>Using aria-labelledby</legend>
  3.   <label id="date-label" for="date">Current Date:</label>
  4.   <input
  5.     type="date"
  6.     name="date"
  7.     id="date"
  8.     aria-labelledby="date-label date-instructions"
  9.   />
  10.   <p id="date-instructions">MM/DD/YYYY</p>
  11. </fieldset>

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

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

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

#隱藏內(nèi)容

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

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

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

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

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

  1. .hidden-visually {
  2.   position: absolute;
  3.   overflow: hidden;
  4.   white-space: nowrap;
  5.   margin: 0;
  6.   padding: 0;
  7.   height: 1px;
  8.   width: 1px;
  9.   clip: rect(0 0 0 0);
  10.   clip-path: inset(100%);
  11. }

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

#aria-hidden="true"

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

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

#按鈕

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

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

  1. <form action="/dataCollectionLocation" method="post" autocomplete="on">
  2.   <!-- Buttons -->
  3.   <button type="button">Cancel</button>
  4.   <button type="submit">Submit</button>
  7.   <!-- Input buttons -->
  8.   <input type="button" value="Cancel" />
  9.   <input type="submit" value="Submit" />
  10. </form>

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

#功能圖像

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

  • Input 字段

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

  1.   <form role="search">
  2.     <label for="search" class="hidden-visually">Search: </label>
  3.     <input type="text" name="search" id="search" v-model="search" />
  4.     <input
  5.       type="image"
  6.       class="btnImg"
  7.       src="https://img.icons8.com/search" rel="external nofollow" 
  8.       alt="Search"
  9.     />
  10.   </form>

  • 圖標(biāo)

  1. <form role="search">
  2.   <label for="searchIcon" class="hidden-visually">Search: </label>
  3.   <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
  4.   <button type="submit">
  5.     <i class="fas fa-search" aria-hidden="true"></i>
  6.     <span class="hidden-visually">Search</span>
  7.   </button>
  8. </form>

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

以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)