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

> [name=講師｜xxx]

# 🚩團隊成員應該具備的無障礙知識

## 🔰企劃、PM、文案人員
* 與網站內容有關的項目，例如媒體均需有文字替代等等
* 針對額外需要產出的內容與客戶溝通
* 因無障礙開發而產生的時間成本、風險都會是 PM 額外需要考量的
* 可以多瞭解與內容產出相關的規範：==1.1 替代文字== ==1.2 時序媒體== ==2.2 充足時間== ==3.1 可讀性==

## 🔰設計師
* 檢驗頁面流程及元件的一致性（ UX ）
* 考慮顏色對比度、字級等具體規定（ UI ）
* 設計師們可以著重閱讀以下幾個指引：==1.4 可辨識== ==2.3 預防痙攣和身體不適反應== ==3.2 可預期性==

## 🔰前端工程師
* 注意 HTML 結構的正確性、一致性及邏輯，使用具備語義的 HTML tag
* 網頁內容需要被使用者放大也能正常瀏覽
* 互動性元件需要可以使用鍵盤操作
* 表單相關的元件關聯性和輸入協助
* 前端工程師最好全部規範都瞭解一下，但可以更著重閱讀較技術性的內容：==1.3 可調適== ==2.1 鍵盤可操作== ==2.4 可導覽== ==2.5 輸入方式== ==3.3 輸入協助== ==4.1 相容性==

### 📍Lighthouse 檢測結果
🔗 https://developer.chrome.com/docs/lighthouse/accessibility/scoring/

## 🔰後端工程師
* 針對需要替代文字的內容，規劃對應的後台欄位
* 例如：圖片、連結、影音、檔案……等等
* 網頁中若有編輯器產生的區塊，則上稿的內容也需要符合規範
* 一樣可以多瞭解與內容產出相關的規範：==1.1 替代文字== ==1.2 時序媒體== ==3.1 可讀性==

## 🔰上稿人員
* 替代文字需要具有意義
* 如何操作編輯器，使編輯器內容也符合無障礙
* 不僅只以顏色來提供資訊
* 文字需與背景需符合一定對比度
* 圖片需要有替代文字
* 不要上傳會持續閃動超過 5 秒的 GIF 圖片內容
* 表格的 HTML 結構需要正確且有意義，且需要包含標題（`<caption>`）
* 進階：若有使用到 id，需注意 id 不可重複