探索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"
屬性將告訴屏幕閱讀器忽略該元素。
在哪裡了解更多
這只是該主題的介紹。要了解更多信息,我推薦以下資源:
- https://www.w3.org/TR/WCAG20/
- https://webaim.org
- https://developers.google.com/web/fundamentals/accessibility/
免費下載我的HTML手冊
更多HTML教程:
- HTML簡介
- HTML`iframe`標籤
- HTML表格
- HTML`video`標籤
- HTML`audio`標籤
- 文字的HTML標籤
- HTML表格
- HTML img標籤
- HTML`a`標籤
- HTML`picture`標籤
- HTML`figure`標籤
- HTML容器標籤
- 網絡上的可訪問性
- 如何在HTML中創建註釋
- 如何在暗模式下更改HTML圖像URL
- 使用`srcset`的響應式圖像
- 在黑暗模式下更改圖標