# 基礎

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

你是否已經準備開始卻又無從下手？

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

# 跳過鏈接

你應該在每個頁面的頂部添加一個直接指向主內容區(qū)域的鏈接，這樣用戶就可以跳過在多個網頁上重復的內容。

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

• 跳到主內容

若想在非聚焦狀態(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;

}

一旦用戶改變路由，請將焦點放回到這個跳過鏈接。通過用如下方式聚焦 ref 即可實現：

watch: {

$route() {

this.$refs.skipLink.focus();

}

}

};

See the Pen Skip to Main

by Maria (@mlama007)

on CodePen.

閱讀關于跳躍到主體內容的鏈接的文檔

# 組織內容

可訪問性最重要的部分之一是確保設計本身是可訪問的。設計不僅要考慮顏色對比度、字體選擇、文本大小和語言，還要考慮應用程序中內容的結構。

# 標題

用戶可以通過標題在應用程序中進行導航。為應用程序的每個部分設置描述性標題可以讓用戶更容易地預測每個部分的內容。說到標題，有幾個推薦的可訪問性實踐：

按級別順序嵌套標題：

–

不要在一個章節(jié)內跳躍標題的級別

使用實際的標題標記，而不是通過對文本設置樣式以提供視覺上的標題

關于標題可進一步閱讀

Main title

Section Title

Section Subtitle

Section Title

Section Subtitle

Section Subtitle

# 地標

地標 (landmark) 會為應用中的章節(jié)提供訪問規(guī)劃。依賴輔助技術的用戶可以跳過內容直接導航到應用程序的每個部分。你可以使用 ARIA role 幫助你實現這個目標。

HTML

ARIA Role

地標的目的

header

role=”banner”

主標題：頁面的標題

nav

role=”navigation”

適合用作文檔或相關文檔導航的鏈接集合

main

role=”main”

文檔的主體或中心內容

footer

role=”contentinfo”

關于父級文檔的信息：腳注/版權/隱私聲明鏈接

aside

role=”complementary”

用來支持主內容，同時其自身的內容是相對獨立且有意義的

無對應元素

role=”search”

該章節(jié)包含整個應用的搜索功能

form

role=”form”

表單相關元素的集合

section

role=”region”

相關的且用戶可能會導航到的內容。必須為該元素提供 label

Tip：

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

關于地標可進一步閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。