資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學什麼是 aria-label 及其使用方法？
標籤對於盲人、低視力人士、行動不便人士或記憶力減退人士至關重要。如果缺少標籤，許多使用者將無法訪問表單。視覺標籤是出現在表單控制元件附近並描述特定表單欄位或欄位組中包含資訊的文字。每個標籤都必須以程式設計方式與表單控制元件或控制元件組關聯。標籤並不總是<label>元素。
aria-label 介紹
Aria label 代表可訪問的富網際網路應用程式 (Accessible Rich Internet Application)，這是一個 W3C 規範，用於改進可訪問性，超越語義 HTML所能達到的水平。該組織的倡議是為殘疾人提供透過 ARIA 標籤連線到網際網路或應用程式的解決方案。
aria-label 屬性指定一個將用於標記當前元素的字串。基本上，它用於為沒有可見文字的螢幕元素提供文字替代項。它有助於定義字串，併為輔助技術使用者提供有關文件結構的附加資訊。
aria-label 通常用於用更精確的資訊替換現有標籤。它允許輔助技術將標籤附加到原本匿名的 HTML 元素。但是，我們必須謹慎使用 aria-label，因為它並不適用於所有 HTML 元素。
支援 aria-label 屬性的 HTML 元素包括：
textarea
select
button
audio 和 video (當 control=”#” 時)
a (當 href=”#” 時)
眾所周知，標籤很重要，因為它們允許我們在元素及其描述之間建立邏輯連線。例如，在 HTML <input> 元素的情況下，我們可以使用 <label> 元素來指定 <input> 的用途。當沒有元素可以作為標籤時，我們可以使用 aria-label 屬性。
我們可以使用 aria-label 指定用作輔助功能標籤的字串。這優先於任何其他本機標籤機制，例如 label 元素；例如，如果一個按鈕同時具有文字內容和 aria-label，則只使用 aria-label 值。
當我們對元素的目的有一些視覺指示時，例如使用圖形而不是文字的按鈕，但您仍然需要為無法訪問視覺指示的任何人（例如僅使用影像指示其目的的按鈕）澄清該目的，我們可能會使用 aria-label 屬性。
HTML 元素的文字內容預設用作輔助功能標籤。當元素具有 aria-label 屬性時，輔助功能名稱將轉換為字串並傳遞到該屬性中。
ARIA 標籤的優勢
可訪問性：使網頁對殘疾人（尤其是盲人）可訪問，提供解釋環境的視覺擴充套件。
體驗：aria label 簡單地解釋頁面內的內容，並顯示如何切換控制元件和在文字框中書寫。
視覺等效性：aria label 的意義在於，使用者無需視覺化所有內容，即可體驗全球資訊網的感受。aria label 是對 HTML API 的簡單補充，但對於需要它的人來說，它是一個強大的工具。
如何使用 aria-label
Aria-label 期望值為一個字元字串，這將是輔助功能名稱。我們可以在標準 HTML 元素上使用 aria-label 屬性。
示例
讓我們看看如何將 aria-label 與 HTML <button> 元素一起使用。
<!DOCTYPE html>
<html>
<head>
<title>What is aria-label and How to Use It?</title>
</head>
<style>
button{
background-color:lightgrey;
border:0;
height:25px;
width:25px;
font-size:18px;
color:darkslategrey;
margin:10px;
}
button:hover{
background-color:crimson;
color:white;
}
</style>
<body>
<button aria-label="close" onclick="myDialog.close()">x</button>
</body>
</html>
在這種情況下，<button> 的樣式類似於標準的“關閉”按鈕。由於沒有任何內容指示按鈕的目的，我們使用 aria-label 屬性為輔助技術提供標籤。
示例
讓我們再看一個示例，這次在 <a> 元素上使用 aria-label。
<!DOCTYPE html>
<html>
<head>
<title>What is aria-label and How to Use It?</title>
<style>
a{
background-color:azure;
color:indigo;
font-size:20px;
margin:10px;
}
a:hover{
background-color:indigo;
color:azure;
}
</style>
</head>
<body>
<a href="#" class="more-link" aria-label="read the entire article">More</a>
</body>
</html>
技術 |
聲音輸出 |
|---|---|
VoiceOver |
連結，閱讀全文 |
ChromeVox |
閱讀全文，連結 |
Narrator |
閱讀全文，連結 |
NVDA |
連結，閱讀全文 |
211 次瀏覽
