# 基礎(chǔ)

Web 可訪問(wèn)性 (也稱(chēng)為 a11y) 是指創(chuàng)建可供任何人使用的網(wǎng)站的實(shí)踐方式——無(wú)論是身患某種障礙、通過(guò)慢速的網(wǎng)絡(luò)連接訪問(wèn)、使用老舊或損壞的硬件，還是僅僅是處于不利環(huán)境中的人。例如，在視頻中添加字幕可以幫助失聰、重聽(tīng)或在嘈雜的環(huán)境中聽(tīng)不到手機(jī)的用戶。同樣，請(qǐng)確保文字對(duì)比度不要太低，這對(duì)低視力用戶和那些試圖在強(qiáng)光下使用手機(jī)的用戶都有幫助。

你是否已經(jīng)準(zhǔn)備開(kāi)始卻又無(wú)從下手？

可以先看看由萬(wàn)維網(wǎng)聯(lián)盟 (W3C) 提供的規(guī)劃和管理 web 可訪問(wèn)性。

# 跳過(guò)鏈接

你應(yīng)該在每個(gè)頁(yè)面的頂部添加一個(gè)直接指向主內(nèi)容區(qū)域的鏈接，這樣用戶就可以跳過(guò)在多個(gè)網(wǎng)頁(yè)上重復(fù)的內(nèi)容。

通常這個(gè)鏈接會(huì)放在 App.vue 的頂部，這樣它就會(huì)是所有頁(yè)面上的第一個(gè)可聚焦元素：

• 跳到主內(nèi)容

若想在非聚焦?fàn)顟B(tài)下隱藏該鏈接，可以添加以下樣式：

.skipLink {

white-space: nowrap;

margin: 1em auto;

top: 0;

position: fixed;

left: 50%;

margin-left: -72px;

opacity: 0;

}

.skipLink:focus {

opacity: 1;

background-color: white;

padding: .5em;

border: 1px solid black;

}

一旦用戶改變路由，請(qǐng)將焦點(diǎn)放回到這個(gè)跳過(guò)鏈接。通過(guò)用如下方式聚焦 ref 即可實(shí)現(xiàn)：

watch: {

$route() {

this.$refs.skipLink.focus();

}

}

};

See the Pen Skip to Main

by Maria (@mlama007)

on CodePen.

閱讀關(guān)于跳躍到主體內(nèi)容的鏈接的文檔

# 組織內(nèi)容

可訪問(wèn)性最重要的部分之一是確保設(shè)計(jì)本身是可訪問(wèn)的。設(shè)計(jì)不僅要考慮顏色對(duì)比度、字體選擇、文本大小和語(yǔ)言，還要考慮應(yīng)用程序中內(nèi)容的結(jié)構(gòu)。

# 標(biāo)題

用戶可以通過(guò)標(biāo)題在應(yīng)用程序中進(jìn)行導(dǎo)航。為應(yīng)用程序的每個(gè)部分設(shè)置描述性標(biāo)題可以讓用戶更容易地預(yù)測(cè)每個(gè)部分的內(nèi)容。說(shuō)到標(biāo)題，有幾個(gè)推薦的可訪問(wèn)性實(shí)踐：

按級(jí)別順序嵌套標(biāo)題：

–

不要在一個(gè)章節(jié)內(nèi)跳躍標(biāo)題的級(jí)別

使用實(shí)際的標(biāo)題標(biāo)記，而不是通過(guò)對(duì)文本設(shè)置樣式以提供視覺(jué)上的標(biāo)題

關(guān)于標(biāo)題可進(jìn)一步閱讀

Main title

Section Title

Section Subtitle

Section Title

Section Subtitle

Section Subtitle

# 地標(biāo)

地標(biāo) (landmark) 會(huì)為應(yīng)用中的章節(jié)提供訪問(wèn)規(guī)劃。依賴輔助技術(shù)的用戶可以跳過(guò)內(nèi)容直接導(dǎo)航到應(yīng)用程序的每個(gè)部分。你可以使用 ARIA role 幫助你實(shí)現(xiàn)這個(gè)目標(biāo)。

HTML

ARIA Role

地標(biāo)的目的

header

role=”banner”

主標(biāo)題：頁(yè)面的標(biāo)題

nav

role=”navigation”

適合用作文檔或相關(guān)文檔導(dǎo)航的鏈接集合

main

role=”main”

文檔的主體或中心內(nèi)容

footer

role=”contentinfo”

關(guān)于父級(jí)文檔的信息：腳注/版權(quán)/隱私聲明鏈接

aside

role=”complementary”

用來(lái)支持主內(nèi)容，同時(shí)其自身的內(nèi)容是相對(duì)獨(dú)立且有意義的

無(wú)對(duì)應(yīng)元素

role=”search”

該章節(jié)包含整個(gè)應(yīng)用的搜索功能

form

role=”form”

表單相關(guān)元素的集合

section

role=”region”

相關(guān)的且用戶可能會(huì)導(dǎo)航到的內(nèi)容。必須為該元素提供 label

Tip：

在使用地標(biāo) HTML 元素時(shí)，建議加上冗余的地標(biāo) role attribute，以最大限度地與傳統(tǒng)不支持 HTML5 語(yǔ)義元素的瀏覽器兼容。

關(guān)于地標(biāo)可進(jìn)一步閱讀

總結(jié)

以上是生活随笔為你收集整理的html5 无障碍,[Vue 3] 教程 – 无障碍 – 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。