HTML 可訪問性
HTML 可訪問性
編寫 HTML 程式碼時，請始終考慮可訪問性！
為使用者提供良好的方式來導航和與您的網站互動。使您的 HTML 程式碼儘可能具有語義性。
語義化 HTML
語義化 HTML 意味著儘可能使用正確的 HTML 元素來實現其正確的目的。語義化元素是具有意義的元素；如果您需要一個按鈕，請使用 <button> 元素（而不是 <div> 元素）。
語義化 HTML 為螢幕閱讀器提供上下文，螢幕閱讀器會朗讀頁面的內容。
以按鈕為例
- 按鈕預設具有更合適的樣式
- 螢幕閱讀器將其識別為按鈕
- 可聚焦
- 可點選
按鈕對於僅依賴鍵盤導航的使用者也是可訪問的；它可以透過滑鼠和按鍵點選，並且可以透過 Tab 鍵（使用鍵盤上的 Tab 鍵）在不同元素之間切換。
非語義化元素的例子：<div> 和 <span> - 沒有說明其內容。
語義化元素的例子：<form>、<table> 和 <article> - 清楚地定義了其內容。
標題很重要
標題由 <h1> 到 <h6> 標籤定義
搜尋引擎使用標題來索引網頁的結構和內容。
使用者透過標題瀏覽頁面。使用標題來顯示文件結構和不同部分之間的關係非常重要。
螢幕閱讀器也使用標題作為導航工具。不同型別的標題指定了頁面的輪廓。<h1> 標題應用於主標題，其次是 <h2> 標題，然後是次要的 <h3>，依此類推。
注意：僅將 HTML 標題用於標題。不要使用標題來使文字大或粗體。
替代文字
alt 屬性為影像提供替代文字，如果使用者由於某種原因無法檢視影像（因為連線緩慢、 src 屬性中的錯誤或使用者使用螢幕閱讀器）。
alt 屬性的值應描述影像
如果瀏覽器找不到影像，它將顯示 alt 屬性的值
宣告語言
您應該始終在 <html> 標籤內包含 lang 屬性，以宣告網頁的語言。這旨在幫助搜尋引擎和瀏覽器。
以下示例指定英語為語言
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
使用清晰的語言
始終使用清晰易懂的語言。還要儘量避免螢幕閱讀器無法清晰閱讀的字元。例如
- 儘量縮短句子
- 避免使用破折號。不要寫 1-3，而是寫 1 到 3
- 避免使用縮寫。不要寫 Feb，而是寫 February
- 避免使用俚語
建立良好的連結文字
連結文字應清楚地解釋讀者點選該連結後將獲得哪些資訊。
良好和不良連結的示例
注意：本頁面是網路可訪問性的入門介紹。請訪問我們的可訪問性教程以獲取更多詳細資訊。
