Vue 3.0 基礎(chǔ)

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

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

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

#跳過鏈接

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

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

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink">跳到主內(nèi)容</a>
  </li>
</ul>

若想在非聚焦?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;
}

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

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus();
    }
  }
};
</script>

點擊此處實現(xiàn)

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

#組織內(nèi)容

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

#標(biāo)題

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

• 按級別順序嵌套標(biāo)題：<h1> - <h6>
• 不要在一個章節(jié)內(nèi)跳躍標(biāo)題的級別
• 使用實際的標(biāo)題標(biāo)記，而不是通過對文本設(shè)置樣式以提供視覺上的標(biāo)題

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

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Main title</h1>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- 內(nèi)容 -->
  </section>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- 內(nèi)容 -->
    <h3>Section Subtitle</h3>
    <!-- 內(nèi)容 -->
  </section>
</main>

#地標(biāo)

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

Tip：

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

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