---
title: "無障礙網頁設計學習與簡易要點 - Neil 的作品集"
description: 整理無障礙網頁設計的學習筆記與簡易要點，含公司內部教育訓練文件與完整系列文章，適合想入門數位無障礙的人參考。
canonical_url: "https://neillin.com/blog/a11y-learning/"
last_updated: 2026-10-13
meta:
  author: Neil
  keywords: "無障礙網頁, 設計管理, 資料視覺化, UI, UX, 切版"
  "og:description": 整理無障礙網頁設計的學習筆記與簡易要點，含公司內部教育訓練文件與完整系列文章，適合想入門數位無障礙的人參考。
  "og:image": "https://neillin.com/_og/s/o_238f237f420298b4.png"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "無障礙網頁設計學習與簡易要點 - Neil 的作品集"
  "twitter:image": "https://neillin.com/_og/s/o_238f237f420298b4.png"
---

> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)

:::

# 無障礙網頁設計學習與簡易要點

2022年6月7日·更新日期 2026年10月13日  

[無障礙](https://neillin.com/blog?category=accessibility "查看「無障礙」分類的所有文章")無障礙網頁設計無障礙A11YAccessibility

  

2026/10/13：  
 更新了「`<h1>` 到 `<h6>`」這一段。以前建議網站 Logo 用 `<h1>`、頁面標題用 `<h2>`，現在改成每一頁的 `<h1>` 就是這一頁的標題，原因和我自己網站的調整過程寫在 [這篇](https://neillin.com/blog/html-nested-h1/)。

2024/07/23：  
 製作了公司內 [教育訓練文件](https://bpio.gitbook.io/docs/edu-a11y "另開新視窗")，覺得自己整理的蠻用心的，所以分享出來。

2023/07/01：完整系列：  
[無障礙網頁設計大叔日記 :: 2022 iThome 鐵人賽](https://ithelp.ithome.com.tw/users/20152260/ironman/5614 "另開新視窗")

## 顏色對比

AA：一般大小 4.5:1，大文字或圖 3:1 AAA： 一般大小 7:1，大文字或圖 4.5:1  (大文字定義： 24px 或是 粗體 19px ）

## 字級

請用相對單位，如 %、em、rem

## 需要有定位點 ::: 和 accesskey

定位點不用太多，主要使用在版面各主要區塊即可。

快捷鍵 accesskey [連結](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey "另開新視窗")

## `<h1>` 到 `<h6>`

- 頁面標題使用 `<h1>`，一個頁面只出現一次
- `<h1>` 到 `<h6>` 需要按順序使用，不要跳級
- `<h2>` 到 `<h6>` 可以重複

現在的建議是：

- `<h1>` 描述這一頁的主要內容，例如文章標題、頁面名稱。報讀軟體使用者常常一進到頁面就跳到 `<h1>`，確認自己在哪一頁。
- 網站名稱不用佔用 `<h1>`：它已經在每一頁的 `<title>` 裡，頁首的 Logo 用連結就好。
- 章節依序使用 `<h2>` 至 `<h6>`。
- 不要靠 `<section>`、 `<article>` 幫標題自動降級，報讀軟體不會照做，要直接寫正確層級的標題。

> 以前的版本建議「網站 Logo 用 `<h1>`、頁面標題用 `<h2>`」，這在當時很常見，但每一頁的 `<h1>` 都一樣，對確認所在頁面沒有幫助，所以改掉了。

## 跳至主要區塊

需要製作「跳至主要區塊」 按鈕，方便跳過每頁都會重複出現的區域。

## 回頂端

要注意焦點是否有跟著跳回去。

## `<noscript>`

如果瀏覽器關閉了 javascript，最好使用 `<noscript>`content`</noscript>` 顯示內容。因為現代網站幾乎都有 javascript， 目前已經沒有此項規定，但建議還是可以順手做，至少真的關閉時，還有一些提示。

## SEO

- 頁籤標題
- 頁面描述
- favicon
- 社群分享圖片

## title=””

`<a>` `<iframe>` 必要時需要有 title=”” ，如果 `<a>` 是另開視窗，則要使用 target=”\_blank” 並且加入 rel=”noreferrer noopener” 和 “另開視窗” 文字。

`<svg>` 標題要寫在接續在`<svg>`之後，如：

```
<svg>
  <title></title>
  …
</svg>
```

若 svg 僅僅是圖示，可以使用 `aria-hidden=”true”` `focusable=”false”` 但因為還是要描述，所以可以再之後補上`<span class=”visually-hidden”>description</span>` 補充。

## alt=””

`<img>` 需要有 alt=”” 屬性。 如果是裝飾性質的圖片（沒有實質意義），還是要寫但沒有值， `alt=””` 。

alt 屬性文字內容主要可以根據圖片以及其上下文內容而決定，一般建議最多 150 個字以下，但這沒有任何根據。 [參考資料](https://css-tricks.com/just-how-long-should-alt-text-be/ "另開新視窗")

## `<label for=”id”>`

在表單內，使用 label 時，for 屬性必須對應到內容的 id。

## visually-hidden

`<button>` 必須要有內容，設計時可善加利用 visually-hidden 以及  aria-hidden。

## `<th>`

`<table>` 的 `<th>` 需要標註是欄或列： `<th scope=”row/col”>`。

## download

下載的檔案不可依賴特定文書商用軟體，且在連結裡要使用 title 寫出完整檔名，例如：`<a title=”操作手冊.pdf”>`

## focus 狀態

focus 狀態都要很明顯，焦點提示區域與其相鄰的顏色需具有 3：1 的對比度，且大於選單4.5:1，若無，另外還有至少 2px 厚。

## 非文字圖示

非文字對比需大於 3:1

## 網站導覽

若網站有「網站導覽」頁面連結，建議進入網站後，擺在 3 個步驟內就可以把注目焦點放在「網站導覽」頁面連結上。

## 放大

確保畫面放大或「只放大文字」200% 畫面都不會破版（firefox 有此設定）

## Font Awesome

[使用說明](https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility "另開新視窗")

常用icon：Font Awesome 關於無障礙的使用方式 )

## 這些文字設定之下，仍保有外觀完整性

- line-height 1.5 以上
- letter-spacing 0.14rem 以上
- word-spacing 0.16rem 以上
- 段落間距 font-size\*2

以上 此為英文，中文也可先根據此距離斟酌使用。

## 驗證機制

根據 W3C ，目前仍然沒有完美的方式，但有以下建議：

如果業主可以不用使用輸入框，推薦使用 google recaptcha v3 若業主想要使用輸入框形式，則根據 [參考資料](https://accessibility.ncc.gov.tw/Questions/Detail/100?Category=21 "另開新視窗")，有 3 種方式選擇：

- 需要有驗證圖形與聲音提示
- 寄送 email，如 [hcaptcha](https://www.hcaptcha.com/accessibility "另開新視窗")
- 撥打客服電話取得驗證碼

## 色盲

建議至少針對紅綠色盲做設計。

## 行動裝置方向

除非是有其必要性，否則不可以鎖定行動裝置方向，例如學習鋼琴 app，就是有其橫向的必要性。

## autocomplete

善用 autocomplete 屬性，方便使用者快速填入過去常使用的值。 密碼請使用 autocomplete=”new-password”，避免意外填寫現在的密碼。

## 聲音

非語音的聲音 < 語音音訊 20 分貝

## 連結

非連結盡量不要用底線。

## 影片

不要自動播放、可以加上字幕。

## 必要時使用多種提示引導

避免只使用單一種方式，例如圖表除了顏色外，可以加上圖樣來區別。

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/#website","@type":"WebSite","inLanguage":"zh-Hant-TW","name":"Neil 的作品集","url":"https://neillin.com/","workTranslation":{"@id":"https://neillin.com/en/#website"}},{"@id":"https://neillin.com/blog/a11y-learning/#webpage","@type":"WebPage","description":"整理無障礙網頁設計的學習筆記與簡易要點，含公司內部教育訓練文件與完整系列文章，適合想入門數位無障礙的人參考。","name":"無障礙網頁設計學習與簡易要點","url":"https://neillin.com/blog/a11y-learning/","isPartOf":{"@id":"https://neillin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/blog/a11y-learning/"]}]},{"@id":"https://neillin.com/#person","@type":"Person","jobTitle":"UI/UX 設計師","name":"Neil Lin","url":"https://neillin.com/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/blog/a11y-learning/#/schema/blog-posting/1","@type":"BlogPosting","dateModified":"2026-10-13","datePublished":"2022-06-07","description":"整理無障礙網頁設計的學習筆記與簡易要點，含公司內部教育訓練文件與完整系列文章，適合想入門數位無障礙的人參考。","headline":"無障礙網頁設計學習與簡易要點","inLanguage":"zh-Hant-TW","keywords":"無障礙網頁設計, 無障礙, A11Y, Accessibility","url":"https://neillin.com/blog/a11y-learning/","author":{"@id":"https://neillin.com/#person"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://neillin.com/blog/a11y-learning/"},"publisher":{"@id":"https://neillin.com/#person"}},{"@id":"https://neillin.com/blog/a11y-learning/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"回首頁","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"部落格","item":"https://neillin.com/blog/"},{"@type":"ListItem","position":3,"name":"無障礙網頁設計學習與簡易要點","item":"https://neillin.com/blog/a11y-learning/"}]}]}
```

## Sitemap

See the full [sitemap](https://neillin.com/sitemap.md) for all pages.