Web 無障礙訪問(wèn) (也稱為(wèi) a11y) 是指創建可(kě)供任何人(rén)使用的網站的做(zuò)法——無論是身患某種障礙、通(tōng)過慢(màn)速的網絡連接訪問(wèn)、使用老(lǎo)舊(jiù)或損壞的硬件，還是僅處于某種不方便的環境。例如(rú)，在視(shì)頻(pín)中添加字幕可(kě)以幫助失聰、有聽力障礙或身處嘈雜(zá)環境而聽不到手機的用戶。同樣地(dì)，确保文字樣式沒有處于太低(dī)的對比度，可(kě)以對低(dī)視(shì)力用戶和(hé)在明(míng)亮的強光(guāng)下(xià)使用手機的用戶都(dōu)有所幫助。
你是否已經準備開(kāi)始卻又無從(cóng)下(xià)手？
請(qǐng)先閱讀由萬維網聯盟 (W3C) 提供的 Web 無障礙訪問(wèn)的規劃和(hé)管理。
跳(tiào)過鏈接
你應該在每個頁面的頂部添加一(yī)個直接指向主內(nèi)容區(qū)域的鏈接，這(zhè)樣用戶就可(kě)以跳(tiào)過在多個網頁上(shàng)重複的內(nèi)容。
通(tōng)常這(zhè)個鏈接會放在 App.vue 的頂部，這(zhè)樣它就會是所有頁面上(shàng)的第一(yī)個可(kě)聚焦元素：
template
<ul class="skip-links">
<li>
<a href="#main" ref="skipLink" class="skip-link">Skip to main content</a>
</li>
</ul>
若想在非聚焦狀态下(xià)隐藏該鏈接，可(kě)以添加以下(xià)樣式：
css
.skip-link {
white-space: nowrap;
margin: 1em auto;
top: 0;
position: fixed;
left: 50%;
margin-left: -72px;
opacity: 0;
}
.skip-link:focus {
opacity: 1;
background-color: white;
padding: 0.5em;
border: 1px solid black;
}
一(yī)旦用戶改變路由，請(qǐng)将焦點放回到這(zhè)個“跳(tiào)過”鏈接。通(tōng)過如(rú)下(xià)方式聚焦“跳(tiào)過”鏈接的模闆引用 (假設使用了(le) vue-router) 即可(kě)實現：
vue
<script>
export default {
watch: {
$route() {
this.$refs.skipLink.focus()
}
}
}
</script>
閱讀關于跳(tiào)過鏈接到主要(yào)內(nèi)容的文檔
內(nèi)容結構
确保設計可(kě)以支持易于訪問(wèn)的實現是無障礙訪問(wèn)最重要(yào)的部分之一(yī)。設計不僅要(yào)考慮顔色對比度、字體選擇、文本大小和(hé)語言，還要(yào)考慮應用中的內(nèi)容是如(rú)何組織的。
标題
用戶可(kě)以通(tōng)過标題在應用中進行(xíng)導航。為(wèi)應用的每個部分設置描述性标題，這(zhè)可(kě)以讓用戶更容易地(dì)預測每個部分的內(nèi)容。說到标題，有幾個推薦的無障礙訪問(wèn)實踐：
按級别順序嵌套标題：<h1> - <h6>
不要(yào)在一(yī)個章(zhāng)節內(nèi)跳(tiào)躍标題的級别
使用實際的标題标記，而不是通(tōng)過對文本設置樣式以提供視(shì)覺上(shàng)的标題
閱讀更多有關标題的信息
template
<main role="main" aria-labelledby="main-title">
<h1 id="main-title">Main title</h1>
<section aria-labelledby="section-title-1">
<h2 id="section-title-1"> Section Title </h2>
<h3>Section Subtitle</h3>
<!-- 內(nèi)容 -->
</section>
<section aria-labelledby="section-title-2">
<h2 id="section-title-2"> Section Title </h2>
<h3>Section Subtitle</h3>
<!-- 內(nèi)容 -->
<h3>Section Subtitle</h3>
<!-- 內(nèi)容 -->
</section>
</main>
Landmarks
Landmark 會為(wèi)應用中的章(zhāng)節提供訪問(wèn)規劃。依賴輔助技術(shù)的用戶可(kě)以跳(tiào)過內(nèi)容直接導航到應用的每個部分。你可(kě)以使用 ARIA role 幫助你實現這(zhè)個目标。
HTML ARIA Role 地(dì)标的目的
header role="banner" 主标題：頁面的标題
nav role="navigation" 适合用作(zuò)文檔或相關文檔導航的鏈接集合
main role="main" 文檔的主體或中心內(nèi)容
footer role="contentinfo" 關于父級文檔的信息：腳注/版權/隐私聲明(míng)鏈接
aside role="complementary" 用來支持主內(nèi)容，同時(shí)其自(zì)身的內(nèi)容是相對獨立且有意義的
無對應元素 role="search" 該章(zhāng)節包含整個應用的搜索功能(néng)
form role="form" 表單相關元素的集合
section role="region" 相關的且用戶可(kě)能(néng)會導航至此的內(nèi)容。必須為(wèi)該元素提供 label
提示：
建議(yì)同時(shí)使用 landmark HTML 元素和(hé) role 屬性，以最大程度地(dì)兼容不支持 HTML5 語義元素的傳統浏覽器。
閱讀更多有關标題的細節
語義化表單
當創建一(yī)個表單，你可(kě)能(néng)使用到以下(xià)幾個元素：<form>、<label>、<input>、<textarea> 和(hé) <button>。
标簽通(tōng)常放置在表格字段的頂部或左側：
template
<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>
請(qǐng)注意這(zhè)裏我們是如(rú)何在表單元素中引入 autocomplete='on' 的，它将應用于表單中的所有 input 框。你也可(kě)以為(wèi)每個 input 框都(dōu)設置不同的 autocomplete attribute 的值。
标簽
提供标簽來描述所有表單控件的用途；使 for 和(hé) id 鏈接起來：
template
<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name" />
如(rú)果你在 chrome 開(kāi)發工(gōng)具中檢查這(zhè)個元素，并打開(kāi) Elements 選項卡中的 Accessibility 選項卡，你将看(kàn)到輸入是如(rú)何從(cóng)标簽中獲取其名稱的：
警告：
你可(kě)能(néng)還見(jiàn)過這(zhè)樣的包裝 input 框的标簽：
template
<label>
Name：
<input type="text" name="name" id="name" v-model="name" />
</label>
但(dàn)我們仍建議(yì)你顯式地(dì)為(wèi) input 元素設置 id 相匹配的标簽，以更好地(dì)實現無障礙訪問(wèn)。
aria-label
你也可(kě)以為(wèi) input 框配置一(yī)個帶有 aria-label 的無障礙訪問(wèn)名。
template
<label for="name">Name</label>
<input
type="text"
name="name"
id="name"
v-model="name"
:aria-label="nameLabel"
/>
aria-labelledby
使用 aria-labelledby 類似于 aria-label，除非标簽文本在屏幕上(shàng)可(kě)見(jiàn)。它通(tōng)過 id 與其他(tā)元素配對，你可(kě)以鏈接多個 id：
template
<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>
aria-describedby
aria-describedby 的用法與 aria-labelledby 相同，它提供了(le)一(yī)條用戶可(kě)能(néng)需要(yào)的附加描述信息。這(zhè)可(kě)用于描述任何輸入的标準：
template
<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>
占位符
避免使用占位符，因為(wèi)它們可(kě)能(néng)會使許多用戶感到困惑。
占位符的缺陷之一(yī)是默認情況下(xià)它們不符合顔色對比度标準；應當修改其顔色，讓它看(kàn)起來像是預先填入 input 框中的數(shù)據一(yī)樣。
<form
class="demo"
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="text"
:id="item.id"
:name="item.id"
v-model="item.value"
:placeholder="item.placeholder"
/>
</div>
<button type="submit">Submit</button>
</form>
css
/* https://www.w3schools.com/howto/howto_css_placeholder.asp */
#lastName::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: black;
opacity: 1; /* Firefox */
}
#lastName:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: black;
}
#lastName::-ms-input-placeholder {
/* Microsoft Edge */
color: black;
}
最好在表單外(wài)提供所有用戶需要(yào)填寫輸入的信息。
用法說明(míng)
添加用法說明(míng)時(shí)，請(qǐng)确保将其正确鏈接到目标 input 框。你可(kě)以提供附加用法說明(míng)并在 aria-labelledby 內(nèi)綁定多個 id。這(zhè)可(kě)以使設計更加靈活。
template
<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>
或者，你可(kě)以通(tōng)過 aria-describedby 将用法說明(míng)附加到 input 框上(shàng)。
template
<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>
隐藏內(nèi)容
通(tōng)常，即使 input 框具有無障礙的名稱，也不建議(yì)在視(shì)覺上(shàng)隐藏标簽。但(dàn)是，如(rú)果可(kě)以借助周圍的內(nèi)容來理解輸入的功能(néng)，那(nà)麽我們也可(kě)以隐藏視(shì)覺标簽。
讓我們看(kàn)看(kàn)這(zhè)個搜索框：
template
<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ào)視(shì)力情況良好，用戶可(kě)以就能(néng)通(tōng)過按鈕的內(nèi)容識别出該 input 框的目的。
此時(shí)我們可(kě)以使用 CSS 從(cóng)視(shì)覺上(shàng)隐藏元素，同時(shí)也不會影響到無障礙訪問(wèn)：
css
.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%);
}
aria-hidden="true"
添加 aria-hidden="true" 在無障礙訪問(wèn)時(shí)被隐藏，但(dàn)對其他(tā)可(kě)視(shì)用戶仍然是可(kě)見(jiàn)的。不要(yào)在可(kě)聚焦的元素上(shàng)使用它，請(qǐng)隻在裝飾性的、重複的或屏幕外(wài)的內(nèi)容上(shàng)使用它。
template
<p>This is not hidden from screen readers.</p>
<p aria-hidden="true">This is hidden from screen readers.</p>
按鈕
在表單中使用按鈕時(shí)，必須設置類型以防止提交表單。 你也可(kě)以使用一(yī)個 input 元素來創建按鈕：
template
<form action="/dataCollectionLocation" method="post" autocomplete="on">
<!-- 按鈕 -->
<button type="button">Cancel</button>
<button type="submit">Submit</button>
<!-- 輸入按鈕 -->
<input type="button" value="Cancel" />
<input type="submit" value="Submit" />
</form>
功能(néng)圖片
你可(kě)以使用這(zhè)種方式來創建一(yī)個帶有功能(néng)的圖片。
input 框
這(zhè)些圖片會像一(yī)個類型為(wèi) submit 的表單按鈕一(yī)樣
template
<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"
alt="Search"
/>
</form>
圖标
template
<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>
規範
萬維網聯盟 (W3C) Web 無障礙訪問(wèn)倡議(yì) (WAI) 為(wèi)不同的組件制定了(le) Web 無障礙性标準：
用戶代理無障礙訪問(wèn)指南 (UAAG)
浏覽器和(hé)媒體查詢，包括一(yī)些其他(tā)方面的輔助技術(shù)
創作(zuò)工(gōng)具無障礙訪問(wèn)指南 (ATAG)
創作(zuò)工(gōng)具
Web 內(nèi)容無障礙訪問(wèn)指南 (WCAG)
網站內(nèi)容 - 由開(kāi)發者、創作(zuò)工(gōng)具和(hé)無障礙訪問(wèn)評估工(gōng)具使用。
網絡內(nèi)容無障礙指南 (WCAG)
WCAG 2.1 繼承自(zì) WCAG 2.0，接納 Web 演進過程中的新技術(shù)。W3C 鼓勵在開(kāi)發或更新 Web 無障礙訪問(wèn)策略時(shí)使用 WCAG 的最新版本。
WCAG 2.1 四大指導原則 (縮寫 POUR)：
可(kě)感知性
用戶必須能(néng)夠感知所渲染的信息
可(kě)操作(zuò)性
表單界面，控件和(hé)導航是可(kě)操作(zuò)的
可(kě)理解性
信息和(hé)用戶界面的操作(zuò)必須為(wèi)所有用戶所理解
健壯性
随着技術(shù)的進步，用戶必須能(néng)夠訪問(wèn)內(nèi)容
Web 無障礙倡議(yì) – 無障礙訪問(wèn)豐富的互聯網應用 (WAI-ARIA)
W3C 的 WAI-ARIA 為(wèi)如(rú)何構建動态內(nèi)容和(hé)高階用戶界面控件提供了(le)指導。
可(kě)便捷訪問(wèn)的豐富互聯網應用 (WAI-ARIA) 1.2
WAI-ARIA 實踐 1.2
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發