在HTML中發現可訪問性的基礎知識。
設計HTML時要考慮到可訪問性非常重要。
具有可訪問性的HTML意味著殘障人士可以使用互聯網。完全失明或視力受損的用戶,聽力受損的人以及其他許多不同殘障人士都在使用互聯網。
不幸的是,這個話題沒有得到應有的重視,而且似乎不像其他話題那麼酷。
如果一個人不能“看見”您的頁面,但仍然希望閱讀其中的內容,怎麼辦?他們如何做到這一點呢?他們不能使用滑鼠,而是使用一種被稱為“螢幕閱讀器”的工具。您可以試試:Google提供免費的ChromeVox Chrome 擴展。可訪問性也應該確保工具能夠輕鬆選擇元素或通過頁面進行導航。
網頁和Web應用程序並不總是以可訪問性作為其首要目標來構建,也許版本1發布時它們並不可訪問,但是在事後仍然可以使網頁可訪問。越早越好,但永遠不算晚。
這對於我的國家非常重要,政府或其他公共組織建立的網站必須具備可訪問性。
那麼,使HTML可訪問意味著什麼?讓我舉個例子來說明您需要考慮的主要事項。
注意:還有其他一些事項需要注意,這些事項可能屬於CSS主題,例如顏色、對比和字型。或者如何使SVG圖像可訪問。我不在這裡談論這些。
使用語義化HTML
語義化的HTML非常重要,這是您需要注意的主要事項之一。讓我舉幾個常見的情境來說明。
對於標題標籤,使用正確的結構非常重要。最重要的是h1
,次要的使用更高的數字,但是同級標題的含義應該相同(將其想像為樹狀結構)
<h1>
<h2>
<h3>
<h2>
<h2>
<h3>
<h4>
</h1>
使用strong
和em
代替b
和i
。在外觀上看起來是一樣的,但前兩個具有更多相關含義。b
和i
更多地用於視覺元素。
列表很重要。屏幕閱讀器可以檢測到列表並提供概覽,然後讓用戶選擇是否進入列表。
表格應該有一個描述其內容的caption
標籤:
<table>
<caption>狗的年齡</caption>
<tr>
<th>狗</th>
<th>年齡</th>
</tr>
<tr>
<td>羅傑</td>
<td>7</td>
</tr>
</table>
為圖像使用alt
屬性
所有圖像都必須有一個alt
標籤來描述圖像內容。這不僅是一種良好的實踐,而且是HTML標準所要求的,沒有alt
屬性的HTML無法通過驗證。
<img src="dog.png" alt="我的狗的照片">
這對於搜索引擎也很好,如果這對您來說是一個激勵。
使用role
屬性
role
屬性可讓您為頁面中的各個元素分配特定角色。
您可以分配很多不同的角色:補充、列表、列表項目、主要、導航、區域、標籤、警報、應用程序、文章、橫幅、按鈕、單元格、複選框、內容信息、對話框、文檔、饋源、圖片、列表框、行、行組、搜索、切換、表格、選項卡面板、文本框、計時器等等。
有很多角色,對於每個角色的完整參考,我給您提供此MDN鏈接。但您不需要為頁面中的每個元素都分配一個角色。大多數情況下,屏幕閱讀器可以根據HTML標籤推斷出元素的角色。例如,您不需要為像nav
、button
、form
這樣的語義標籤添加角色標籤。
讓我們以nav
標籤為例。您可以使用它來定義頁面的導航,就像這樣:
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/blog">博客</a></li>
</ul>
</nav>
如果您不得不使用div
標籤而不是nav
,則可以使用navigation
角色:
<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"
可使元素可選擇:
<div tabindex="0">
...
</div>
改用 tabindex="-1"
將元素從基於Tab的導航中移除,這可能非常有用。
使用 aria
屬性
ARIA 是可訪問豐富互聯網應用(Accessible Rich Internet Applications)的縮寫,並定義了可應用於元素的語義描述。
aria-label
此屬性用於添加描述元素的字符串。
舉個例子:
<p aria-label="該產品的描述">...</p>
我在我的博客側邊欄上使用此屬性,其中我有一個用於搜索的輸入框,沒有明確的標籤,因為它有占位符屬性。
aria-labelledby
此屬性為當前元素和標籤它的元素之間建立關聯。
如果您知道如何將input
元素關聯到label
元素,那就類似了。我們傳遞描述當前元素的項目 id。
舉個例子:
<h3 id="description">該產品的描述</h3>
<p aria-labelledby="description">
...
</p>
aria-describedby
此屬性使我們能夠將一個元素與另一個作為描述的元素關聯起來。
舉個例子:
<button aria-describedby="payNowDescription" >立即支付</button>
<div id="payNowDescription">點擊按鈕將導航到我們的Stripe表單!</div>
使用 aria-hidden 隱藏內容
我喜歡我的網站設計簡約。例如,我的博客基本上只是內容,側邊欄中有一些鏈接。但是側邊欄中的一些東西只是視覺元素,並不能增加那些不能看到頁面的人的體驗。比如我的標誌圖片,或者深色/亮色主題選擇器。
添加aria-hidden="true"
屬性將告訴屏幕閱讀器忽略該元素。
了解更多資訊的來源
這只是此主題的入門。要獲得更多信息,我推薦使用以下資源: