/

網頁的可訪問性

網頁的可訪問性

在HTML中發現可訪問性的基礎知識。

設計HTML時要考慮到可訪問性非常重要。

具有可訪問性的HTML意味著殘障人士可以使用互聯網。完全失明或視力受損的用戶，聽力受損的人以及其他許多不同殘障人士都在使用互聯網。

不幸的是，這個話題沒有得到應有的重視，而且似乎不像其他話題那麼酷。

如果一個人不能“看見”您的頁面，但仍然希望閱讀其中的內容，怎麼辦？他們如何做到這一點呢？他們不能使用滑鼠，而是使用一種被稱為“螢幕閱讀器”的工具。您可以試試：Google提供免費的ChromeVox Chrome 擴展。可訪問性也應該確保工具能夠輕鬆選擇元素或通過頁面進行導航。

網頁和Web應用程序並不總是以可訪問性作為其首要目標來構建，也許版本1發布時它們並不可訪問，但是在事後仍然可以使網頁可訪問。越早越好，但永遠不算晚。

這對於我的國家非常重要，政府或其他公共組織建立的網站必須具備可訪問性。

那麼，使HTML可訪問意味著什麼？讓我舉個例子來說明您需要考慮的主要事項。

注意：還有其他一些事項需要注意，這些事項可能屬於CSS主題，例如顏色、對比和字型。或者如何使SVG圖像可訪問。我不在這裡談論這些。

使用語義化HTML

語義化的HTML非常重要，這是您需要注意的主要事項之一。讓我舉幾個常見的情境來說明。

對於標題標籤，使用正確的結構非常重要。最重要的是h1，次要的使用更高的數字，但是同級標題的含義應該相同（將其想像為樹狀結構）

1
2
3
4
5
6
7
8
<h1>
 <h2>
 <h3>
 <h2>
 <h2>
 <h3>
 <h4>
</h1>

使用strong和em代替b和i。在外觀上看起來是一樣的，但前兩個具有更多相關含義。b和i更多地用於視覺元素。

列表很重要。屏幕閱讀器可以檢測到列表並提供概覽，然後讓用戶選擇是否進入列表。

表格應該有一個描述其內容的caption標籤：

1
2
3
4
5
6
7
8
9
10
11
<table>
 <caption>狗的年齡</caption>
 <tr>
 <th>狗</th>
 <th>年齡</th>
 </tr>
 <tr>
 <td>羅傑</td>
 <td>7</td>
 </tr>
</table>

為圖像使用alt屬性

所有圖像都必須有一個alt標籤來描述圖像內容。這不僅是一種良好的實踐，而且是HTML標準所要求的，沒有alt屬性的HTML無法通過驗證。

1
<img src="dog.png" alt="我的狗的照片">

這對於搜索引擎也很好，如果這對您來說是一個激勵。

使用role屬性

role屬性可讓您為頁面中的各個元素分配特定角色。

您可以分配很多不同的角色：補充、列表、列表項目、主要、導航、區域、標籤、警報、應用程序、文章、橫幅、按鈕、單元格、複選框、內容信息、對話框、文檔、饋源、圖片、列表框、行、行組、搜索、切換、表格、選項卡面板、文本框、計時器等等。

有很多角色，對於每個角色的完整參考，我給您提供此MDN鏈接。但您不需要為頁面中的每個元素都分配一個角色。大多數情況下，屏幕閱讀器可以根據HTML標籤推斷出元素的角色。例如，您不需要為像nav、button、form這樣的語義標籤添加角色標籤。

讓我們以nav標籤為例。您可以使用它來定義頁面的導航，就像這樣：

1
2
3
4
5
6
<nav>
 <ul>
 <li><a href="/">首頁</a></li>
 <li><a href="/blog">博客</a></li>
 </ul>
</nav>

如果您不得不使用div標籤而不是nav，則可以使用navigation角色：

1
2
3
4
5
6
<div role="navigation">
 <ul>
 <li><a href="/">首頁</a></li>
 <li><a href="/blog">博客</a></li>
 </ul>
</div>

在這裡，我們給出了一個實際的例子：當標籤本身沒有傳達含義時，使用role來賦予其有意義的值。

使用tabindex屬性

tabindex 屬性允許您改變按 Tab 鍵時選擇“可選”元素的順序。默認情況下，只有鏈接和表單元素可以通過使用 Tab 鍵進行選擇（您不需要在它們上設置tabindex）。

添加 tabindex="0" 可使元素可選擇：

1
2
3
<div tabindex="0">
...
</div>

改用 tabindex="-1" 將元素從基於Tab的導航中移除，這可能非常有用。

使用 aria 屬性

ARIA 是可訪問豐富互聯網應用（Accessible Rich Internet Applications）的縮寫，並定義了可應用於元素的語義描述。

aria-label

此屬性用於添加描述元素的字符串。

舉個例子：

1
<p aria-label="該產品的描述">...</p>

我在我的博客側邊欄上使用此屬性，其中我有一個用於搜索的輸入框，沒有明確的標籤，因為它有占位符屬性。

aria-labelledby

此屬性為當前元素和標籤它的元素之間建立關聯。

如果您知道如何將input元素關聯到label元素，那就類似了。我們傳遞描述當前元素的項目 id。

舉個例子：

1
2
3
4
5
<h3 id="description">該產品的描述</h3>

<p aria-labelledby="description">
...
</p>

aria-describedby

此屬性使我們能夠將一個元素與另一個作為描述的元素關聯起來。

舉個例子：

1
2
3
<button aria-describedby="payNowDescription" >立即支付</button>

<div id="payNowDescription">點擊按鈕將導航到我們的Stripe表單！</div>

使用 aria-hidden 隱藏內容

我喜歡我的網站設計簡約。例如，我的博客基本上只是內容，側邊欄中有一些鏈接。但是側邊欄中的一些東西只是視覺元素，並不能增加那些不能看到頁面的人的體驗。比如我的標誌圖片，或者深色/亮色主題選擇器。

添加aria-hidden="true" 屬性將告訴屏幕閱讀器忽略該元素。

了解更多資訊的來源

這只是此主題的入門。要獲得更多信息，我推薦使用以下資源：

tags: [“可訪問性”, “HTML”, “語義化”, “alt屬性”, “角色”, “tabindex”, “aria屬性”]