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

> [name=講師｜Judy Shyu]

# 🚩圖片
指引1.1：替代文字成功準則1.1.1：非文字內容（A級）
## 🔰網頁中有意義的圖片 <img> 元素，須以 alt 屬性提供對應的替代文字說明
有意義的圖片應避免使用 CSS background-image 的方式來處理，因為螢幕報讀器無法判讀

<img src="{圖片網址}" alt="粉色背景前有一隻開心的米格魯的上半身照">

:::danger
__➤ 測試方式：__ 瀏覽器開發工具；特定瀏覽器擴充功能；NVDA 單鍵導航（G：圖片）
:::

> 稽核評量碼
> HM1110100E 圖片需要加上有意義、可代替圖片在文件上下中的功能及內容的替代文字

## 🔰網頁中裝飾用的圖片元素 `<img>`，其 alt 屬性應為空值
* 所有的 `<img>` 都必須有 alt 屬性
* 裝飾性圖片可將 alt 屬性留空，就會被 Accessibility Tree 忽略

✅正確用法

<img src="{裝飾性圖片網址}" alt=""> // 有 alt 屬性並留空

⚠️錯誤用法

<img src="{裝飾性圖片網址}"> // 缺少 alt 屬性

:::danger
__➤ 測試方式：__ 自動化工具
:::

> 稽核評量碼
> HM1110112E 對於輔助科技應當要忽略的圖片，使用空字串作為替代文字，並且不可使用標題屬性

## 🔰針對交通圖、流程圖、組織圖等資料圖片，除圖片標題文字外，須另外提供詳細的說明文字，以利使用者瞭解其內容
可以使用 `<figure>` 搭配 `<figcaption>` 來提供較長的圖片資訊文字
若網頁文字的敘述已經完整充足，可以不需另外提供 longdesc 圖片描述

:::danger
__➤ 測試方式：__ 瀏覽器開發工具；特定瀏覽器擴充功能；NVDA 單鍵導航（G：圖片）
:::

> 稽核評量碼
> HM1110103E 圖片無法以替代文字清晰表達時，利用長描述提供更詳盡的說明網頁網址，利用整個說明網頁的篇幅來詳盡描述，最後並要能連結回原本的圖片

<figure>
<figcaption class="sr-only">行政院組織圖，目前行政院所屬中央二級機關有內政部、外交部…（需完整撰寫）…、國家通訊傳播委員會。</figcaption>
<img src="{圖片網址}" alt=""> // 可能有多張圖片、程式撰寫的圖表、canvas…等等
</figure>


## 🔰補充：視覺隱藏、只提供給螢幕報讀器的內容
* 提供給螢幕報讀器使用者的替代文字、補充資訊
* 例如：網頁最上方的無障礙導航區塊
### 📍 做法：
🔺新寫法，推薦
來源：https://webaim.org/techniques/css/invisiblecontent/

### 📍Bootstrap
v4：使用 .sr-only、.sr-only-focusable
v5：使用 .visually-hidden、.visually-hidden-focusable（用法跟.sr-only不太一樣）

### 📍Tailwindcss
使用 .sr-only、.not-sr-only

### 📍關鍵字：accessibility、a11y
Bootstrap 的實作方式：

## 🔰圖片驗證碼應提供其他形式的驗證機制，如語音播放或email寄送

### 📍常見處理方式：提供語音播放選項

範例：[中華郵政郵遞區號查詢](https://www.post.gov.tw/post/internet/Postal/index.jsp?ID=208)、[財政部稅務入口網](https://www.etax.nat.gov.tw/etwmain/login/member)、[台灣高鐵預定車票](https://irs.thsrc.com.tw/IMINT/)

### 📍實作技術：
* Google reCAPTCHA v2（「我不是機器人」驗證框）
* Google reCAPTCHA v3（非互動式的人機驗證）
* Google Text-to-Speech (TTS) API（文字轉語音）

> 稽核評量碼
> GN1110111E 網頁上任何一個CAPTCHA驗證均至少有另一個運用不同形式的CAPTCHA驗證，且具有相同的目的與功能

## 🔰連結+圖片應用
### 📍網站LOGO

<a>內的title撰寫格式：title=“(目的)”
<img>內的alt撰寫格式：alt=“圖片內的文字”
    
<a title="(回首頁)">
　<img alt="圖片內的文字">
<a>   

或
    
<a title="(回首頁)">
　<img alt="單位LOGO">網站名稱
<a> 
    

### 📍相關連結(圖片超連結)

<a>內的title撰寫格式：title=“連接網站名稱[另開新視窗]”
<img>內的alt撰寫格式：alt=“圖片內的文字”
 
EX:
<a href="http://law.ndc.gov.tw/" target="_blank" title="法規鬆綁建言平臺[另開新視窗]">
　<img src="https://ws.ndc.gov.tw/001/administrator/10/relpic/5869/292/60a7759d-8631-4697-a37a-4f1de9e90ac4.jpg" alt="法規鬆綁建言平臺" />
</a>

### 📍站內連結

<a>站內連結不用寫title

#### 狀況1.特殊設計文字是圖片

<a>
　<img alt="圖片內的文字">
<a>

#### 狀況２.裝飾icon+純文字

<a>
　<img alt="">功能名稱
<a>

### 📍檔案下載連結
檔案連結需保留檔案格式

<a href="/home/download-file/2ce4e435719fa2770171a006c4750003.pdf " class="doc red" title="[檔案下載]兒童與少年教育及發展帳戶作業計畫.pdf" download><img alt=""></a>