做了七年前端開發，我最近才意識到可通路性的必要……

作者 | Deepak K Vijayan

譯者 | Phoenix

策劃 | 闫園園

作為一名 7 年多的前端開發者，我從未想過我的工作需要具有可通路性，直到最近才領悟。

是的，我們确實提供了帶alt标簽的圖檔，并使用header、footer、main、aside、nav和section标簽...... 就是這些，大多數人止步于此。我們中的一些人仍然使用帶 class 的 div 作為這些特定的布局元素。為什麼？因為我們不知道。

我們這樣做不是任何人的錯，除了少數，這個領域的大部分人都是被推到這個坑裡謀生的，多數又在坑裡一遍又一遍地做着同樣的事情，到最後還在想我到底在做什麼。

直到有必要改變。

也許這種需要會以啟蒙的形式出現，順便說一句，啟蒙很少發生，更有可能是将正确的行業可通路性規範從開發團隊的指導方針變為強制性的要求。

後者可能是你我所處的境況。好了，閑聊結束，我們直奔主題。

注意：不适用于進階前端技術人員，我沒有詳細介紹可通路性，隻想制定一個簡單的指引，可以在所有項目中遵循，類似于需要注意的事項清單。

如果你發現任何錯誤，請随時指出，我會盡快糾正。

以下是我們在開發任何前端時需要注意的事項：

HTML 語義—— 正确使用 HTML 分區元素

标題—— 用于顯示文檔的結構，而非用于大字型的設計

鍵盤導航使用“tabindex”和 ARIA—— 確定 tab 可用以及删除多餘的 tab 連結

可通路的圖示按鈕—— 至少使用帶有适當标簽的

焦點訓示器—— 除非有替代方案，否則不要禁用預設的焦點樣式

盡可能提供視覺标簽

描述性資訊圖——為螢幕閱讀器提供回退文本描述

1

HTML 語義

有一種叫做 ARIA 地标的東西，它能簡單地将網頁劃分為不同的地标，使螢幕閱讀器更容易在網頁内部導航。

目前這是不需要主動思考就能實作的，因為我們可能在不知不覺中就這麼做了，即“預設情況下，HTML 分區元素定義了 ARIA 地标”。

這意味着正确地使用 HTML 分區元素，像、、、、article>、 等，而不要使用。

請檢視 ARIA 實踐（https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html），可以更深入地學習。

2

标題

螢幕閱讀器浏覽網頁的另一種方式是使用标題。

使用标題是展示文檔結構的一種方式，如果隻是設計上要顯示大字型或粗體，則不要使用它。

考慮一個沒有 h1 頁面的場景，當螢幕閱讀器讀到這樣的頁面時，使用者是無法獲知标題的，而頁面的标題通常是用表示。

在這種情況下，為了提高可通路性，你可以做兩件事：

請設計師做出一些必要的改變，這可能行不通，因為設計已經被客戶簽署了。

将标簽添加到頁面結構，并隐藏它。

當我們需要在網頁上隐藏某些内容時，有以下幾個選項：

display: none;

visibility: hidden;

opacity: 0;

clip-path: inset(100%)

選項1和2不可行，因為它們使元素從 DOM 中完全删除了，螢幕閱讀器也不可用，隐藏屬性也不行，這等同于“display: none;”。

參考用下面的樣式類來隐藏你的元素：

3

鍵盤導航使用“tabindex”和 ARIA

我們需要了解的是，不是所有的使用者都使用滑鼠來浏覽網頁，有些隻使用鍵盤導航，還有一些使用螢幕閱讀器。對這些使用者來說，從網頁的一個部分到另一個部分，可能不像使用滑鼠操作的人那麼簡單。

我們考慮下面的場景：

假設我們有一個部落格，在文章的清單頁上，一篇文章如下所示：

它有一個縮略圖、一個标題、一個描述和一個“閱讀更多”的按鈕，這是幾乎所有部落格文章的通用模闆。那麼，我們是如何連結到詳情頁呢？

我們将縮略圖做成一個連結 (link 1)，接着是标題(link 2)，然後是“閱讀更多”按鈕 (link 3)，這 3 個連結都指向同一個頁面。

是以，當我們使用螢幕閱讀器或鍵盤浏覽頁面時，我們必須用 tab 鍵按 3 次才能跳轉到下一篇文章。

這當然得避免，也很簡單。對備援的連結，可以添加以下屬性：

tabindex="-1"（它可以防止連結被 tab 選中 —— 對于鍵盤使用者）

aria-hidden="true"（你不需要将它暴露給螢幕閱讀器，因為已經有了相同的連結 —— 對于螢幕閱讀器）

4

可通路圖示按鈕

首先，在設計中有按鈕時，應使用元素，不要使用等其他元素，再将樣式設定為按鈕的樣子，我知道我們這樣做已經很久了，但是時候改變了。

等其他元素，再将樣式設定為按鈕的樣子，我知道我們這樣做已經很久了，但是時候改變了。

原因正如 HTML 語義部分所述，原生元素有很多内置的 ARIA 特性。

盡管用和做出來的按鈕對于大多數使用者來說，看起來是一模一樣的，但對于使用螢幕閱讀器的盲人使用者來說，它看起來非常不同，螢幕閱讀器甚至可能會忽略這是一個按鈕。

這裡也有一些注意事項：

不設定按鈕樣式以及設定按鈕樣式的理想方法

針對于沒有任何文本、隻有圖檔的按鈕，可遵循以下三個步驟中的任何一個：

使用隐藏的來指明按鈕标簽

在上使用 aria-label

在上使用 aria-labelledby