網絡上的可訪問性

探索HTML中可訪問性的基礎

我們在設計HTML時要考慮到可訪問性，這一點很重要。

擁有可訪問的HTML意味著殘疾人可以使用Web。有完全失明或有視覺障礙的用戶，有聽力障礙的人以及許多其他不同的障礙。

不幸的是，這個主題沒有重視它所需要的重要性，而且似乎沒有其他主題那麼酷。

如果一個人不能看您的頁面，但仍想使用其內容？首先，他們如何做到這一點？他們不能使用鼠標，而是使用一種叫做屏幕閱讀器。您不必想像。您可以立即嘗試：Google免費提供ChromeVox Chrome擴展程序。可訪問性還必須注意允許工具輕鬆選擇元素或瀏覽頁面。

網頁和Web應用程序並非始終以可訪問性作為其首要目標之一，也許發行的版本1不可訪問，但事實發生後可以使網頁可訪問。越早越好，但是永遠不會太晚。

這很重要，在我國，必須可以訪問由政府或其他公共組織建立的網站。

使HTML可訪問是什麼意思？讓我說明您需要考慮的主要事項。

注意：CSS主題中還有其他幾項需要注意，例如顏色，對比度和字體。或者如何使SVG圖像可訪問。我在這裡不談論他們。

使用語義HTML

語義HTML非常重要，這是您需要注意的主要事情之一。讓我說明一些常見的情況。

為標題標籤使用正確的結構很重要。最重要的是h1，而對於不太重要的數字則使用較高的數字，但所有相同級別的標題都應具有相同的含義（像樹形結構一樣思考）

h1
	h2
		h3
	h2
	h2
		h3
			h4

使用strong和em代替b和i。從視覺上看，它們看起來相同，但是前兩個具有更多的含義。b和i是更多的視覺元素。

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

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

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

使用`alt`圖像的屬性

所有圖像都必須有一個alt描述圖像內容的標籤。這不僅是一種好習慣，而且是HTML標準所必需的，未經驗證的HTML都不會被接受。

<img src="dog.png" alt="picture of my dog">

如果這對您添加它有激勵作用，那麼對搜索引擎也有好處。

使用`role`屬性

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

您可以分配許多不同的角色：互補，列表，列表項，主要，導航，區域，選項卡，警報，應用程序，文章，橫幅，按鈕，單元格，複選框，contentinfo，對話框，文檔，提要，圖，表格，網格，網格單元格，標題，img，列錶框，行，行組，搜索，開關，表格，標籤面板，文本框，計時器。

很多，我給你每個人的完整參考該MDN鏈接。但是，您無需為頁面中的每個元素分配角色。在大多數情況下，屏幕閱讀器可以從HTML標籤推斷出來。例如，您不需要將角色標籤添加到語義標籤中，例如nav，button，form。

讓我們來nav標籤示例。您可以使用它來定義頁面導航，如下所示：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

如果你是被迫使用div標籤代替nav，您可以使用navigation角色：

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

因此，這裡有一個實際的例子：role當標籤尚未傳達含義時，用於分配有意義的值。

使用`tabindex`屬性

這tabindex屬性允許您更改按Tab鍵選擇“可選”元素的順序。默認情況下，只有通過使用Tab鍵進行導航才能“選擇”鏈接和表單元素（並且您無需設置tabindex在他們）。

新增中tabindex="0"使元素可選：

<div tabindex="0">
...
</div>

使用tabindex="-1"而是從此基於選項卡的導航中刪除一個元素，這可能非常有用。

使用`aria`屬性

ARIA是首字母縮寫詞，表示可訪問的Rich Internet Applications，並定義了可應用於元素的語義。

`aria-label`

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

例子：

<p aria-label="The description of the product">...</p>

我在博客的側邊欄上使用此屬性，在這裡我有一個輸入框用於搜索而沒有顯式標籤，因為它具有佔位符屬性。

`aria-labelledby`

此屬性在當前元素和對其進行標記的元素之間設置關聯。

如果你知道如何input元素可以關聯到label元素，這是相似的。

我們傳遞描述當前元素的商品ID。

例子：

<h3 id="description">The description of the product</h3>
<p aria-labelledby=“description”>
…
</p>

`aria-describedby`

通過此屬性，我們可以將一個元素與另一個用作描述的元素相關聯。

例子：

<button aria-describedby="payNowDescription" >Pay now</button>
<div id=“payNowDescription”>Clicking the button will send you to our Stripe form!</div>

使用隱藏的Aria隱藏內容

我喜歡網站中的簡約設計。例如，我的博客主要是內容，在邊欄中有一些鏈接。但是，側邊欄中的某些內容只是視覺元素，並不能加在一起一個看不見頁面的人的體驗。就像我的徽標圖片或深色/深色主題選擇器一樣。

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

在哪裡了解更多

這只是該主題的介紹。要了解更多信息，我推薦以下資源：

免費下載我的HTML手冊

網絡上的可訪問性

探索HTML中可訪問性的基礎

使用語義HTML

使用alt圖像的屬性

使用role屬性

使用tabindex屬性

使用aria屬性

aria-label

aria-labelledby

aria-describedby