網絡上的可訪問性

探索HTML中可訪問性的基礎

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

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

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

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

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

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

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

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

使用語義HTML

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

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

h1
	h2
		h3
	h2
	h2
		h3
			h4

使用strongem代替bi。從視覺上看,它們看起來相同,但是前兩個具有更多的含義。bi是更多的視覺元素。

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

一個表應該有一個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標籤推斷出來。例如,您不需要將角色標籤添加到語義標籤中,例如navbuttonform

讓我們來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教程: