---
# System prepended metadata

title: 版面結構
tags: [無障礙]

---

<style>
.blue {
  color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜Judy Shyu]

# 🚩版面結構
指引1.3：可調適成功準則1.3.1：資訊與關連性（A級）
## 🔰網頁是否都有使用`<h1>`標籤，且每個網頁中只有一個`<h1>`標籤

:::danger
__➤ 測試方式：__ 自動化工具；特定瀏覽器擴充功能；NVDA 單鍵導航（H：標題）
:::

> 稽核評量碼
> HM1130104E 適當使用巢狀標頭呈現文件結構




---

指引2.4：可導覽成功準則2.4.6：標題和標籤（AA級）
## 🔰網頁是否以巢狀標頭(heading元素)，並依`<h1>`至`<h6>`的順序來建立文件結構
* 直接修改 HTML tag 有巨大困難時，可以考慮使用 `role=”heading”` 搭配 `aria-level=”1”`（預設值為 2，範圍為 1~6 ）
    * 可以的話最好還是都使用 `<h1>` ~ `<h6>`
    
:::danger
__➤ 測試方式：__ 自動化工具；特定瀏覽器擴充功能；NVDA 單鍵導航（H：標題）
:::

> 稽核評量碼
> GN2240600E 提供描述性的標頭

![image](https://hackmd.io/_uploads/HkSrNJ1Lp.png)