這是「教學文章怎麼寫」系列的第 23 篇,第五部分「跟誰學,誰讀不到」的第四篇。前面的篇談的是讀者讀了之後學到多少;這一篇往前退一步:有些讀者連讀都讀不到,或者讀得到字、讀不到圖和程式碼的結構。
起因是本站的課程導讀。這些文章大量用 mermaid 畫流程與樹、用表格比較、用 KaTeX 寫公式、貼程式碼、嵌 YouTube 錄影。談圖的那一篇處理過手機上圖太小的問題,也提到 mermaid 可以寫無障礙標題;但寫系列規劃時列了一個沒做的事:沒有人實際看過這些圖在螢幕閱讀器那一側變成什麼。這篇把那件事做了,再回頭查兩個問題:無障礙標準對一篇技術文章具體要求什麼;教育界常拿來談「照顧所有學習者」的 UDL(Universal Design for Learning,通用學習設計),有多少實證。
影片的字幕與時間連結在影片那一篇,程式碼本身怎麼寫在程式碼那一篇,術語與公式的寫法在術語與符號那一篇。非母語讀者、翻譯與手機,之後的篇會談。
來源怎麼選、有什麼偏向。這篇的 12 份來源分三種。第一種是規範與指引:W3C 的 WCAG 2.2、W3C 的複雜圖片教學、CAST 的 UDL 指引網站。第二種是描述性的資料:WebAIM 對 100 萬個網站首頁的自動檢測,以及它對螢幕閱讀器使用者的問卷。第三種是研究:螢幕閱讀器使用者讀線上圖表的實驗、圖表文字描述的排序實驗、兩份盲人軟體開發者的訪談、一份 UDL 統合分析、一份 UDL 實施研究,以及一份給視障學生讀數學式的工具論文。每一份都讀完手上取得的那一版並留有抽取紀錄。
偏向有三個。沒有任何一份量的是「身心障礙讀者讀教學文章學到多少」;最接近的是讀圖表的正確率。研究裡的螢幕閱讀器使用者多半是盲人或低視能者,聽障、認知與學習障礙的讀者幾乎沒有出現。UDL 那一半只讀得到支持方與一份統合分析;正式發表的批評文章,我沒讀到合法公開的全文,下面會說是哪幾篇。
先看結論
| 問題 | 目前讀到的答案 | 證據的性質 |
|---|---|---|
| WCAG 對一篇技術文章要求什麼 | 圖要有文字替代(1.1.1,A 級)、意義不能只靠顏色(1.4.1,A)、文字對比至少 4.5:1(1.4.3,AA)、預錄影片要有字幕(1.2.2,A)、說明不能只靠「右邊紅框」這類位置與顏色(1.3.3,A)、標題要描述主題(2.4.6,AA)等,下面有逐元件的表 | 規範;W3C 自己說達到最高級也不代表所有人都讀得到 |
| 螢幕閱讀器使用者怎麼找資訊 | 在長網頁找資訊時,71.6% 說會先跳標題(WebAIM 問卷,這一題 1,511 人作答) | 自陳;自願樣本,熟練使用者佔多數 |
| 圖表讀得到嗎 | 螢幕閱讀器組 34%、對照組 87%;附資料表的圖,螢幕閱讀器組 73%,但花的時間最長(Sharif 等 2021) | 72 人的線上實驗,圖是作者自己做的 |
| 圖表描述該寫什麼 | 盲人讀者把「統計與關係」與「整體趨勢」兩層排成最有用,兩層之間沒有測到差異;只講圖型與座標軸的描述多數排最不有用(Lundgard 與 Satyanarayan 2021) | 主觀排序,沒有量理解 |
| 程式碼的結構 | 28 位盲人開發者裡 22 位提到縮排難分辨,螢幕閱讀器把縮排念成一串「space」(Albusays 等 2017) | 訪談與觀察,數字是「提到的人數」 |
| 本站的 mermaid 圖 | 192 張中文圖只有 1 張有 accTitle;沒有的圖,瀏覽器交給輔助科技的是一串沒有箭頭關係的節點文字 | 本站實測(瀏覽器的無障礙樹,不是實際的螢幕閱讀器語音) |
| UDL 的效果 | 讀得到全文的統合分析合併 g = 3.56;13 篇裡 10 篇是單組前後測,有對照組的那一組估計 0.69,與 0 分不開(Almeqdad 等 2023) | 一份統合分析;批評方的原文沒有讀到 |
「讀不到」的是誰
WCAG(Web Content Accessibility Guidelines)是 W3C 訂的網頁無障礙標準,現行版是 2.2,2024 年 12 月再版。它的成功準則分 A、AA、AAA 三級,等級是累加的:符合 AA 要先符合全部 A 級。
談「誰讀不到」之前要先記一句 WCAG 自己的話。它在導言裡寫,達到最高的 AAA 級也不等於所有人都讀得到:
"even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive, language, and learning areas."
導言的另一段說,認知、語言與學習障礙方面的準則,因為時程短、可測試性難取得共識而有限;W3C 另外出了一份 Making Content Usable for People with Cognitive and Learning Disabilities 補這一塊(那份我沒有讀)。所以「符合 WCAG」不能寫成「大家都讀得到」。
W3C 的複雜圖片教學把對象講得更寬。它說複雜的圖對很多人都難懂,特別是低視能、學習障礙,以及對主題經驗少的人,建議把長描述開放給所有人看,例如直接放進正文。最後一種人就是教學文章的主要讀者。
WCAG 對一篇技術文章要求什麼
WCAG 沒有「與教學內容有關」的子集,下面這張表是我依教學文章常見的元件挑的。等級照原文;條文底下的註解(Note)依 WCAG 自己的說明不是要求,表裡標了「註解」的不能說成「WCAG 規定」。
| 文章裡的東西 | 相關準則(等級) | 要求的重點 |
|---|---|---|
| 圖、圖解、圖表 | 1.1.1 Non-text Content(A) | 要有作用相同的文字替代。詞彙表的例子是「圖表的說明寫在圖後面那一段」,替代文字不一定要在圖的屬性裡 |
| 圖表的線與標記 | 1.4.11 Non-text Contrast(AA) | 看懂內容所需的圖形部分,對相鄰顏色至少 3:1 |
| 用顏色分類 | 1.4.1 Use of Color(A) | 顏色不能是傳達資訊的唯一方式 |
| 「看右邊紅框」這類說明 | 1.3.3 Sensory Characteristics(A) | 操作與理解的說明不能只靠形狀、顏色、大小、位置 |
| 文字與程式碼的顏色 | 1.4.3 Contrast (Minimum)(AA) | 一般文字至少 4.5:1,大字 3:1 |
| 標題、清單、表格 | 1.3.1 Info and Relationships(A)、2.4.6 Headings and Labels(AA) | 結構要用真的標記,不能只是看起來像;有的標題要描述主題 |
| 文字的圖片 | 1.4.5 Images of Text(AA) | 能用真的文字就不要用圖片 |
| 放大與窄螢幕 | 1.4.4 Resize Text(AA)、1.4.10 Reflow(AA) | 放大到 200% 不失內容;寬 320 CSS 像素時不需要雙向捲動。條文的例外是需要二維版面才有意義的內容,註解舉的例子有圖解、影片、資料表,沒有列程式碼區塊,程式碼算不算例外原文沒說 |
| 預錄影片 | 1.2.2 Captions(A)、1.2.3(A)、1.2.5(AA) | 要有字幕,字幕包含音效與說話者;AA 級還要口述影像 |
| 文章裡的英文段落 | 3.1.2 Language of Parts(AA) | 其他語言的段落與片語要標語言;專有名詞、技術詞彙、已融入周圍語言的詞不必 |
| 練習題與回饋 | 3.3.4(AA)、4.1.3 Status Messages(AA) | 送出測驗作答的頁面要能檢查或撤回;「答對了」這類訊息不取得焦點也要能被報讀 |
| 艱深的文字 | 3.1.5 Reading Level(AAA) | 超過國中程度時提供補充內容或較淺的版本 |
兩條容易寫過頭的地方。第一,3.1.5 是 AAA 級,WCAG 自己不建議把 AAA 當成全站政策,而且它要的是「另外提供補充內容」,不是要求正文本身寫到國中程度。它舉的補充內容例子之一,是一段摘要研究主要結果與建議的段落。第二,複雜圖片教學裡寫長描述是「required」,但那一頁自述是最佳實務教學,沒有引任何成功準則;寫成「WCAG 規定複雜的圖要有長描述」是錯的,WCAG 本身只到 1.1.1 的「作用相同的文字替代」。
螢幕閱讀器使用者怎麼讀一頁
WebAIM 第 10 次螢幕閱讀器使用者問卷問到「在長網頁上找資訊,最可能先做什麼」,作答的 1,511 人裡 71.6% 選「跳著瀏覽頁面的標題」,從頭讀的很少(各選項的比例在附錄)。
這個數字偏向熟練的使用者:自評進階的人 78% 先跳標題,初學者是 47%,而回答者過半自評進階。這是自陳的偏好,不是觀察到的行為;WebAIM 自己說樣本沒有控制,不一定代表所有螢幕閱讀器使用者。
同一份問卷列出最困擾的項目,只給排序、沒給分數。和寫文章有關的三項是圖片缺或錯的替代文字(第 6)、缺或錯的標題(第 8)、複雜的資料表(第 10)。
整個網路的狀況是另一份資料。WebAIM Million 2026 用自動工具檢測前 100 萬個網站的首頁,95.9% 有偵測得到的 WCAG 失敗;最常見的六類佔全部偵測到錯誤的 96%,第一名是低對比文字,出現在 83.9% 的首頁。這份量的是熱門網站的首頁,不是教學文章;自動工具也只抓得到一部分問題,所以只能當背景。
螢幕閱讀器只能循序讀,一次只念一段。Mealin 與 Murphy-Hill 2012 訪談 8 位盲人軟體開發者,作者對「怎麼掌握一份程式碼的全貌」的說明是:螢幕閱讀器高度線性,逼使用者把整份文件讀過一遍。8 位裡 7 位說靠 API 文件取得全貌。對寫文章的人,我的推論是:明眼讀者一眼掃過去的版面,螢幕閱讀器使用者要靠標題跳;標題寫得好不好,直接決定讀者能不能先看全貌。
圖表:讀不到的主要原因是沒有可讀的資料
Ather Sharif 等人 2021 年的研究分兩段。
第一段請 9 位螢幕閱讀器使用者放聲思考,讀從 Google 搜尋挑出的含圖表網頁。27 個網頁裡有 33% 的圖,螢幕閱讀器完全沒偵測到;偵測到的常常只念出「graphic」「object」這類字。受試者讀圖的方式是先找整體趨勢、最大最小值和座標軸,有興趣才看個別資料點;一位受試者希望的摘要是最高點、最低點、平均和趨勢方向。
第二段是線上實驗:36 位螢幕閱讀器使用者、36 位不用螢幕閱讀器的對照者,各看 3 張圖、答 9 題四選一。圖是作者依 WCAG 2.0 與三個圖表函式庫官方的無障礙建議自己做的。
- 整體正確率,螢幕閱讀器組 34%,對照組 87%。
- 差距幾乎全在「圖有沒有給資料」。螢幕閱讀器組用 Google Charts(預設提供資料表)答對 73%,用 D3 是 17%,用 ChartJS 是 11%;對照組三者都在 86% 到 89%。
- 代價是時間。螢幕閱讀器組平均互動時間 84.6 秒,對照組 27.2 秒;Google Charts 每張圖將近兩分鐘,作者說這是逐點聽資料表的代價。
- 題目難度與資料點多寡,對螢幕閱讀器組的正確率都沒有測到差異。
作者的建議是兩樣都給:替代文字給全貌,資料表給細節。資料表單獨用的缺點是沒有全貌、要記很多東西。
圖表的文字描述該寫哪一層
Alan Lundgard 與 Arvind Satyanarayan 2021 年的論文把圖表描述的內容分四層:
- 圖型、編碼方式、標題、座標軸範圍、顏色。
- 統計與關係:極值、離群值、相關、點與點的比較。
- 感知與認知:整體趨勢、模式、例外。
- 脈絡與領域知識:解釋、時事、社會脈絡。
他們給 30 位盲人讀者、90 位明眼讀者看 15 張圖,每張附四段各只含一層的描述,請讀者依「有用程度」排序。
- 盲人讀者把第 2、3 層排成最有用,兩層之間沒有測到差異;第 1、4 層排最不有用。
- 第 1 層是唯一兩極的一層:多數人排最不有用,但盲人讀者也有 101 次把它排最有用。40% 的盲人讀者說,最有用的描述會把幾層組合起來。
- 盲人讀者裡 63% 明確表示描述不該含作者的主觀詮釋;原文是 "descriptions should not contain an author's subjective interpretations, contextual information, or editorializing about the visualized data"。明眼讀者反而偏好第 3、4 層。
讀這份要記三件事。量的是「覺得有用」的排序,不是讀完之後懂了多少。每一層只有一段作者拼出來的範例,層級和那一段寫得好不好分不開。摘要說兩組讀者的排序「顯著不同」,但正文只做了各組組內的檢定,沒有做兩組之間的檢定;「兩組不同」是兩張分布圖形狀不同,不是檢定結果。
所以「圖表描述要寫第 2、3 層」是盲人讀者的偏好,比較精確的說法是:不要只寫圖型與座標軸,要寫出數字之間的關係與趨勢。
程式碼與公式
Khaled Albusays 等人 2017 年的研究訪談並遠端觀察 28 位全盲的開發者,全是男性、至少 5 年經驗。被提到最多的困難是除錯(24 人)、只能逐行讀(23 人)、縮排(22 人)、巢狀結構(20 人)。縮排的問題很具體:螢幕閱讀器把三個空白念成「space, space, space」,而不是「三個空白」。有 5 人自己寫腳本讓螢幕閱讀器念出縮排層級,4 人改用點字顯示器去摸。
這份常被轉述成「程式結構靠縮排與顏色表達,螢幕閱讀器傳達不了」。縮排那一半有資料;顏色那一半沒有,語法上色只在導言被當成 IDE 的視覺輔助提了一句,結果裡沒有任何關於顏色的發現。另外,這些人是在 IDE 裡讀自己工作的程式碼,不是讀教學文章;把縮排的困難類推到文章裡的程式碼區塊,是我的推論。
公式的資料更少。Mealin 與 Murphy-Hill 的 8 位受訪者裡,有 2 位說網路上的數學式多半是圖片,螢幕閱讀器讀不了。同一份訪談也問了 UML 這類圖。8 位裡只有一位明說拿到的 UML 圖讀不了,兩位工作上遇到會避開,三位沒碰過;有人請同事口述圖的內容,有人說同樣的資訊文件裡都有。一位帶團隊的受訪者要求成員改用「simple English」說明圖的內容,理由是描述複雜系統的圖資訊太多,一定會有詮釋上的歧義。
給視障學生讀數學式的工具,我讀了 Ali 等 2024。它把式子拆成項、因式、常數、變數,用快捷鍵逐項語音導覽。論文說這個工具改善了學習,但沒有任何前測或數學測驗,證據是自編問卷,文中的數字也前後不一致。我只把它當「有人這樣設計」的例子,不引它的成效數字。
本站實測
這一節是我在本站自己量的。做法:用本機的建置輸出,以 Chromium 開三篇文章(CS50 AI 第 0 週導讀、談圖的那一篇、林軒田機器學習基石的驗證那一篇),淺色與深色各一次,讀瀏覽器的無障礙樹,跑 axe-core 4.11 的 WCAG A/AA 規則,再把視窗縮到 320 像素寬。無障礙樹是瀏覽器交給螢幕閱讀器的資料,不是 VoiceOver 或 NVDA 實際念出來的聲音;實際的語音我沒有測。
mermaid 圖
全站中文文章有 123 篇用了 mermaid,共 192 張圖,寫了 accTitle 的只有 1 張,就是談圖那一篇自己示範的那張。
站上的 mermaid 在瀏覽器端畫成 SVG。沒寫 accTitle 的圖,SVG 是一個沒有名字的「文件」,裡面的文字被拆成一個個段落。CS50 AI 第 0 週那張搜尋流程圖,無障礙樹的內容依序是:
是、否、是、否、frontier 放進 initial state、frontier 是空的?、沒有解、拿出一個節點、是目標?、回傳解、加進 explored set 展開,把沒看過的鄰居放進 frontier
分支的「是」「否」排在最前面,和哪個判斷相連看不出來;箭頭完全不見。看不到圖的人拿到的是一堆詞,不是流程。
有寫 accTitle 與 accDescr 的那張,SVG 有了名字(「Alpha-Beta 剪枝的中間分支」)和描述,內部的節點文字仍然照樣拆開,連線標籤「不必看」一樣排在最前面。所以 accTitle 解決的是「這是什麼圖、結論是什麼」,不會讓圖的結構變得可讀;結構仍要靠描述或正文寫出來。
另外,放在摺疊答案(<details>)裡的圖,摺起來時不在無障礙樹裡,打開後才出現,這是正常行為。
程式碼區塊
- 註解的對比不夠。程式碼用的配色是 github-dark,淺色與深色模式都一樣;註解的顏色 #6a737d 在背景 #24292e 上對比 3.04:1,低於 1.4.3 要求的 4.5:1。CS50 AI 第 0 週一篇就有 18 處被 axe 標出。
- 鍵盤捲不動。視窗 320 像素寬時,第 0 週的 21 個程式碼區塊全部要橫向捲動。能被鍵盤聚焦的是外層的
<pre>,實際捲動的是裡面的<code>;焦點停在<pre>上時,方向鍵捲不動裡面的<code>。axe 把這一條歸在 2.1.1 鍵盤操作。程式碼算不算 1.4.10 允許雙向捲動的例外,原文沒說;但就算算,鍵盤使用者也要能捲得動。
表格
表頭用了真的 <th>。窄螢幕上表格包在一個可以橫向捲動的容器裡,這個容器同樣不能被鍵盤聚焦:320 像素寬時,第 0 週 8 張表有 7 張要捲,機器學習基石那篇 17 張有 15 張。1.4.10 的註解把資料表舉為可以雙向捲動的例子;不能用鍵盤捲是另一個問題。
公式
站上的 KaTeX 同時輸出看得到的版面與 MathML,看得到的那份對輔助科技隱藏。機器學習基石那篇的 768 個公式全部有 MathML,輔助科技拿得到的是公式的結構,不是一張圖。320 像素寬時,27 個獨立成行的公式有 17 個要橫向捲動;1.4.10 的註解沒有舉到公式,算不算「需要二維版面才有意義」的內容,原文沒說。
影片與其他
- YouTube 嵌入的
<iframe>有標題,來自文章裡youtube區塊的title欄位。axe 在播放器裡面標出的三個問題屬於 YouTube 自己的播放器,本站改不了。 - 字幕:嵌入區塊可以加
captions欄位,請播放器預設打開某個語言的字幕。全站中英文章合計 1,312 個嵌入,80 個有設。有沒有字幕軌取決於上傳者,不是本站。 - 第 0 週有 6 個核取方塊(Markdown 的待辦清單)沒有標籤,axe 歸在 4.1.2。
- 頁面語言標成
zh-TW是對的;文章裡的英文引文與片語沒有標語言,3.1.2 要求其他語言的段落與片語都要標,專有名詞與技術詞彙除外。 - 本站目前沒有用 Markdown 圖片語法放任何圖片,所以替代文字的問題只出在 mermaid。
- repo 裡的 axe 測試只涵蓋管理後台,文章頁不在測試範圍。
UDL 有多少實證
UDL 是美國非營利組織 CAST 推的教學設計架構,2024 年 7 月發布第 3.0 版指引:三條原則(投入、表徵、行動與表達)、九條指引、36 條細項。和教學文字直接相關的細項有「釐清詞彙、符號與語言結構」「支援文字、數學記號與符號的解碼」「突顯模式、關鍵特徵、大概念與關係」等。表徵原則那一頁的核心主張是,沒有一種呈現方式對每個學習者都最好,所以要提供選擇。
CAST 自己怎麼說證據
CAST 的 Research Evidence 頁有兩句常被引用:
- "UDL is based upon the most widely replicated finding in educational research: learners are highly variable."
- "The research basis for the general principles of UDL is grounded in modern neuroscience."
第二句的範圍只到三條原則:CAST 把學習的大腦分成情意、辨識、策略三個網路,對應三條原則。同一頁另外說,指引本身早期取材自認知與教育心理學,多為量化研究、集中在中小學;3.0 再加入障礙研究與社會文化觀點。所以「CAST 說 UDL 立基於神經科學」會把範圍說大。
首頁說 UDL 有證據顯示能讓所有學習者受益,但我讀的四頁沒有列任何成效研究;個別研究的清單在各細項的子頁,那些子頁我沒有讀。表徵頁「使用多種表徵時才會發生學習與遷移」這類因果說法,頁面上也沒有附研究。
一份讀得到全文的統合分析
Qais Almeqdad 等人 2023 年的統合分析收了 2015 到 2021 年的 13 篇研究,合併效果 g = 3.56,這是 13 篇混合兩種設計的合併值。13 篇裡有 10 篇是單組研究,拿前測的標準差當分母,這 10 篇自己的合併估計是 4.42,大致是後測比前測高出四個多前測標準差。它自己的表看得出這個數字是怎麼來的:
- 13 篇裡 10 篇是單組前後測,沒有對照組,效果量是「後測減前測,除以前測的標準差」。
- 單組研究的合併估計 4.42;有對照組的那幾篇合併估計 0.69,跟 0 分不開。
- 各篇效果量從 0.33 到 13.18,I² = 99.8%。
- 13 篇裡 8 篇的對象是老師;這些研究的成果多半是老師的 UDL 知識或教案,不是學生的學習成績(後半是我依它的研究清單判讀的,作者沒有這樣統計)。
作者對單組較大的解釋是 "This is perhaps due to the nature of such design, which minimises the standardised errors",並照樣建議採用 UDL。「效果量被研究設計撐大」是我從它的表讀出來的,不是作者承認的。
一份實施研究
Pu Guo 與 Zeyu Wang 2025 年的研究追蹤 87 個機構兩年,報告高實施程度的機構學生成就比自己的基線高 37.4%。它沒有不實施 UDL 的對照組;用來分實施程度的分數本身就包含學生成就、投入與歸屬感;方法節列了階層模型、傾向分數配對,結果節沒有任何係數、信賴區間或分組人數;研究地點不揭露。引言有多處引用對不到參考文獻,參考文獻裡也有與 UDL 無關的條目(例如聯邦學習的無線網路、飛機安全)被當成 UDL 的出處。這些都是可以回原文查的事實;截至 2026-10-14,Crossref 上沒有這篇的更正或撤稿紀錄。它不適合當 UDL 有效的證據。
批評與另一份統合分析,我只知道存在
正式發表的批評至少有兩篇:Boysen 對 CAST 指引佐證研究的批判分析,以及同一位作者比較學習風格與 UDL 的另一篇。另有 King-Sears 等人 2023 年的 UDL 學習成就統合分析,它不是批評文。這三篇研究存在,我沒讀到合法公開的全文,所以不寫它們的結論與數字。網路上有幾篇轉述它們的部落格文章,轉述的對象我讀不到,沒有拿來代替原文。
所以這一節只讀到一邊:CAST 的自述、一份設計撐不起大效果量的統合分析、一份沒有對照組的實施研究。「UDL 沒有效」與「UDL 有效」都不是這批材料能下的結論;能說的是,我讀得到全文的佐證,研究設計撐不起它們報告的效果大小。
來源說法不同的地方
圖表描述要不要寫詮釋。Lundgard 與 Satyanarayan 的盲人讀者多數不要作者的主觀詮釋,明眼讀者反而偏好第 3、4 層;兩組之間沒有做檢定。W3C 的複雜圖片教學則建議正文主動摘要圖要表達的重點,例句是「下面的圖顯示訪客在第一季流失、第二季回升」,這屬於第 3 層的趨勢,不是第 4 層的詮釋。兩者不衝突的讀法是:寫趨勢,不寫評論;這是我的讀法。
資料表是解方還是負擔。Sharif 等人的實驗裡,有資料表的圖讓螢幕閱讀器組正確率從一兩成升到 73%;同一份研究的受試者也說逐點聽資料表費時,作者說資料表缺全貌、加重記憶負擔。兩者是同一件事的兩面,作者的建議是全貌與資料表都給。
「必須」有長描述。W3C 的複雜圖片教學用了「required」,WCAG 條文只到 1.1.1 的「作用相同的文字替代」,沒有規定要分短描述與長描述。
UDL 的證據強度。CAST 首頁說 UDL 有證據顯示對所有學習者有益;Almeqdad 等人的合併 g = 3.56 方向一致,但它有對照組的子群估計與 0 分不開。Guo 與 Wang 引用 Almeqdad 等人,說它證實了 UDL 的效果,另一處又說它報告遊戲化的正面影響;Almeqdad 等人的原文沒有談遊戲化。
可以做的事
每一項標了依據;沒有研究直接測過的,是我的判斷。
- 每張 mermaid 圖寫
accTitle與accDescr,描述寫結論與關係,不逐節點複述。依據:WCAG 1.1.1(規範)、本站實測(沒寫的圖只剩散落的節點文字)、Lundgard 的第 2、3 層(盲人讀者的偏好)。例子:搜尋流程那張可以寫成accDescr: 從 initial state 開始,每輪從 frontier 拿出一個節點;是目標就回傳,否則展開它並把沒看過的鄰居放回 frontier;frontier 空了就代表沒有解。 - 圖前後的那一句話寫出圖的結論。依據:W3C 複雜圖片教學(最佳實務,對象包括對主題不熟的讀者)。這一句對看得到圖的讀者也有用,見談圖那一篇的圖文鄰近。
- 放數據圖時,同時給一句趨勢和一張資料表。依據:Sharif 等人的實驗與設計建議。本站目前用表格多、用數據圖少,這一條是預先的規則。
- 巢狀很深的程式碼,在正文用一句話說出結構,例如「外層迴圈跑每一列,裡面有兩層 if」。依據是 Albusays 等人的縮排與巢狀困難,類推到文章是我的推論,沒有研究測過。
- 公式繼續用 KaTeX,不要貼公式的截圖。依據:WCAG 1.4.5、Mealin 的兩位受訪者。本站已經這樣做。
- 標題寫成讀者能直接跳的主題。依據:WebAIM 問卷的 71.6%(自陳)、WCAG 2.4.6。
- 英文引文與非術語的英文片語標語言,Markdown 裡可以用
<span lang="en">…</span>包起來,這篇就是這樣做的;術語與專有名詞不包。依據:WCAG 3.1.2。
需要改站上模板的,我只列出來,沒有動:程式碼配色換成註解對比達 4.5:1 的主題;讓表格捲動容器與程式碼的捲動元素可以被鍵盤聚焦;待辦清單的核取方塊加標籤;文章頁加進 axe 測試。
對照本站的寫作規格
- 寫作指南的 mermaid 一節要求「意義不能靠顏色表達」,用線型、外框與文字區分。這和 WCAG 1.4.1 一致,但規格寫這條的原因是站上所有節點同色,不是無障礙;依據是規格自己的選擇,碰巧符合 1.4.1。
- 同一節要求節點文字寫短、方向用
flowchart TB,理由是手機寬度。這是可讀性,不涉及螢幕閱讀器。 - 規格沒有要求
accTitle或accDescr。談圖那一篇建議了,但沒有寫進規格,所以 192 張圖只有 1 張有。這是規格的缺口。 - YouTube 區塊的
title是必填欄位,規格寫明它是 iframe 的無障礙名稱;實測確實有。 - 課程導讀規格要求影片沒有字幕軌時自己轉錄,用途是寫文章,不是給讀者字幕;文章本身不是影片的字幕替代。
這些證據的限制
- 沒有研究量過身心障礙讀者讀教學文章學到多少。Sharif 量的是回答圖表題的正確率;Lundgard 量的是覺得有用;兩份開發者研究是訪談。把它們用到寫文章,是我的推論。
- 樣本小,而且偏向某些人。Sharif 72 人、線上無人監督;Lundgard 的盲人讀者 30 人,經作者的人脈與 Twitter 招募;Albusays 28 人全是男性;Mealin 8 人全是男性。WebAIM 問卷是自願樣本,熟練使用者佔多數。
- 障礙類型很窄。研究裡幾乎都是盲人或低視能者。聽障、認知與學習障礙、肢體障礙的讀者,這批來源沒有資料;WCAG 自己也說認知與學習障礙涵蓋不足。
- 本站實測只看了三篇與瀏覽器的無障礙樹。沒有用實際的螢幕閱讀器聽,也沒有請身心障礙讀者來讀。axe 這類自動工具只抓得到一部分問題。
- UDL 只讀到一邊。Boysen 的兩篇批評與 King-Sears 等人的統合分析,三篇都只知道存在。
- 我的推論有六處:螢幕閱讀器使用者靠標題取得全貌;縮排的困難類推到文章裡的程式碼區塊;寫趨勢、不寫評論可以同時滿足 Lundgard 與 W3C;用一句話說出程式碼的巢狀結構;Almeqdad 的大效果量來自研究設計;
accTitle不會讓圖的結構變得可讀(這一條是對無障礙樹的觀察,實際語音沒有測)。 - 只知道存在、沒讀到合法公開全文的:Boysen(2024)的批判分析、Boysen(2024)對學習風格與 UDL 的比較、King-Sears 等(2023)的 UDL 學習成就統合分析。
附錄:各研究的設計與數字
W3C,WCAG 2.2(2024-12-12 再版)。4 條原則、13 條指引、成功準則 A 級 31 條、AA 級 24 條、AAA 級 31 條(4.1.1 已刪除)。成功準則底下的註解、範例、附錄都不是規範。一致性只對完整網頁成立,不能排除頁面的一部分;一致性聲明不是必要的。允許留言的文章可以做「部分一致」聲明。2.5.8 Target Size (Minimum)(AA,2.2 新增)要求點擊目標至少 24×24 CSS 像素,句中連結除外。1.4.8(AAA)建議每行不超過 80 字元,中日韓文 40 字。
W3C WAI,Images Tutorial: Complex Images(2026-04-08 更新)。最佳實務教學,不是規範。複雜圖片包括圖表、流程圖、組織圖、正文仰賴讀者看懂的圖解,以及地圖。建議兩段式替代文字:短描述辨識圖片並指出長描述在哪,長描述是圖片必要資訊的文字版。四種標記做法:圖旁的連結、alt 裡寫出長描述的位置、<figure> 與 <figcaption> 包住長描述、aria-describedby;最後一種會把長描述當成一段連續文字,標題與表格的結構會遺失,只適合純文字的描述。
WebAIM,Screen Reader User Survey #10(2024-02-22 更新)。2023 年 12 月到 2024 年 1 月,有效回應 1,539 份。最困擾的項目第一是 CAPTCHA。標題層級非常或有點有用 88.8%。北美 47.2%、歐洲 30.7%、亞洲 6.4%。因障礙而使用螢幕閱讀器 89.9%;障礙類型全盲 76.6%、低視能 19.9%、聽障 6.8%、認知或學習 5.2%(可複選)。自評進階 58.3%、中等 36.0%、初學 5.7%。長網頁先做什麼:標題 1,082 人(71.6%)、尋找 205、從頭讀 96、連結 72、地標 56。31.7% 說有地標時總是或常用,但只有 3.7% 當首選。91.3% 在行動裝置上用螢幕閱讀器。改善網路無障礙靠更好的網站 85.9%、更好的輔助科技 14.1%。
WebAIM,The WebAIM Million 2026(2026-03-30 更新)。2026 年 2 月檢測 Tranco 排名前 100 萬個網站的首頁,用 WAVE 分析渲染後的頁面。平均每頁 56.1 個偵測到的錯誤,比 2025 年多 10.1%。六類常見失敗佔首頁比例:低對比文字 83.9%、圖片缺替代文字 53.1%、表單欄位缺標籤 51%、空連結 46.3%、空按鈕 30.6%、缺文件語言 13.5%。41.8% 的首頁有標題跳級。資料表格只有 19% 有有效的資料表標記。WebAIM 說 A/AA 完整符合率「肯定低於 4.1%」,也說自動偵測只抓得到一部分問題。
Sharif、Chintalapati、Wobbrock、Reinecke(2021),ASSETS '21。研究一:9 位螢幕閱讀器使用者(平均 50.2 歲,7 位逐漸失明),2020 年 8 月以 Zoom 放聲思考,每人 3 個網頁,主題分析。研究二:螢幕閱讀器組 36 人、對照組 36 人(對照組的視力狀況原文沒寫),線上無人監督;27 份 Kaggle 資料集、三種圖型、三個函式庫、三級複雜度與三級難度。正確率 34%(109/324)對 87%(283/324),χ²(1) = 67.22,p < .001;摘要寫的「低 61.48%」是相對差,絕對差約 53 個百分點。函式庫與組別的交互作用 χ²(2) = 50.35,p < .001。難度對正確率 χ²(2) = 0.35,p = .838;複雜度 p = .380,都沒有測到差異。時間 84.6 秒(SD 75.2)對 27.2 秒(SD 16.8),F(1,69) = 115.33,ηp² = 0.63;兩組的計時定義不同。50 歲以上的互動時間高約 12%。作者列的限制:只有三個函式庫與二維資料。
Lundgard 與 Satyanarayan(2021),IEEE TVCG,讀的是 arXiv 作者版。語料:50 張圖,Prolific 120 人寫了 582 段描述、2,147 句,句子的層級分布是第 1 層 9.1%、第 2 層 35.1%、第 3 層 42.9%、第 4 層 12.9%(受試者拿到了第 1 層的提示句)。排序實驗:15 張圖,每張四段單層描述,隨機順序、不標層級;盲人讀者 30 人各排 15 張,明眼讀者 90 人各排 5 張,每張每組 30 人。兩組 Friedman 檢定都 p < 0.001。盲人組第 2 對第 3 層 p < 0.148、第 1 對第 4 層 p < 0.321,都沒有測到差異;明眼組第 3 對第 4 層 p < 0.059。盲人讀者都遇過讀不到的圖,53% 在教材裡遇過。「提供文字描述對我重要」盲人讀者平均 6.83(7 點量表)。只處理英文與常見圖型;沒有獨立的限制一節。
Albusays、Ludi、Huenerfauth(2017),ASSETS '17。28 位全盲開發者,22–52 歲,5–24 年經驗,美國 22 人;2016 年遠端訪談約一小時,加上用自己與別人的程式碼示範。困難被提到的人數:除錯 24、逐行讀 23、縮排 22、巢狀 20、回到原處 18、找錯誤 14、作用域 14、字元與括號 10。19 人靠 print 除錯;26 人靠簡單的編輯器寫程式;16 人把註解當書籤用,分享前會刪掉。評分者一致率 67%。導言說受試者偏好 IDE,結果節說全部偏好簡單編輯器,前後不一致。
Mealin 與 Murphy-Hill(2012),VL/HCC,讀的是作者研究群網站上的刊出版。8 位法定盲人的男性開發者,程式經驗 10–40 年,其中 3 位完全沒有視覺;經單一郵件清單招募,Skype 訪談,論文沒有說明分析程序。7 人以 JAWS 為主;4 人看程式碼時用點字顯示器,一人說螢幕閱讀器念「EF」與「EFF」聽起來一樣。7 人常開一個暫存視窗記方法或變數名;5 人把程式碼區塊複製到另一個視窗改完再貼回。
Ali、Khusro、Alahmadi(2024),PeerJ Computer Science。巴基斯坦開伯爾-普什圖省三地(Peshawar、Abbottabad、Swat)的公立盲校,15 位老師、94 名 6 到 10 年級學生,立意選樣,使用 15 天後填問卷。只支援一次與二次式。和 NVDA、Access8Math 比,比較設計原文沒有交代。沒有前測與數學測驗。學生問卷的 Cronbach's α 同一段寫 0.81 又寫 0.91;易用比例前後寫 86.7% 與 91.43%。ANOVA 比的是同一份問卷七題之間的平均差,與工具有沒有效無關(我的判讀)。
CAST,UDL Guidelines 3.0(2024-07-30 發布)。讀了首頁、Research Evidence、About the Guidelines 3.0 Update、Representation 四頁。2008 年首版,之後四次改版。2.2 版與 3.0 版的逐條對照不公開,要填表索取。3.0 的主題包括把學習者的多重身分視為差異的一部分、承認體制層級的障礙、改用以學習者為中心的用語。
Almeqdad、Alodat、Alquraan、Mohaidat、Al-Makhzoomy(2023),Cogent Education 10。英文與阿拉伯文文獻,2015–2021 年,納入條件之一是前後測設計;全文篩選後 304 篇,只留實驗設計,剩 13 篇。沒有做研究品質評估。地區:美國 8 篇(討論又寫 9 篇)、沙烏地阿拉伯 2 篇。正文說總人數 771、範圍 7–254,但研究清單上最大的是 143 人。合併 g = 3.56(95% CI 1.03–6.08),τ² = 20.17,Q = 343.8。子群估計(各自對 0 檢定,沒有子群之間的檢定):單組 4.42(p = .0016)、兩組 0.69(p = .78);學生 5.63、老師 2.76(p = .053);介入 4.59、培訓 2.78(p = .10)。漏斗圖有缺口,作者判為有出版偏誤,沒有做校正。作者列的限制:年齡與地區差異大、可能有出版偏誤、樣本不足以下定論、沒有分析介入時間長短。
Guo 與 Wang(2025),Scientific Reports 15。87 個機構、2,473 名學生、342 位老師,以中小學為主,每 6 個月量一次、共 5 次。實施程度分四級:典範 18%、高 23%、中 31%、低 28%。相對基線的成就增幅:低 6.8%、中 18.2%、高 37.4%(圖上另有典範 45.5%)。身障生在高實施機構增 42.3%、低實施 12.1%。全文沒有表格,數字都只有點估計。作者列的限制:自願加入的機構、部分仰賴自陳、24 個月可能看不到長期持續性、可能有未測量的干擾因素。
參考資料
每一條都讀完手上取得的那一版並留有抽取紀錄;版本與沒讀的部分寫在括號裡。
- W3C (2024), Web Content Accessibility Guidelines (WCAG) 2.2(W3C 正式建議書,2024-12-12 版)。
- W3C WAI, Images Tutorial: Complex Images(2026-04-08 更新的網頁;範例長描述的另一頁沒有讀)。
- WebAIM, The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages(2026-03-30 更新的網頁)。
- WebAIM, Screen Reader User Survey #10 Results(2024-02-22 更新的網頁;困擾項目的加權分數只在圖上,沒有讀到)。
- Sharif, Chintalapati, Wobbrock & Reinecke (2021), Understanding Screen-Reader Users' Experiences with Online Data Visualizations(讀的是共同作者 Reinecke 實驗室網站上的 ACM 版面定稿)。
- Lundgard & Satyanarayan (2021), Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content(讀的是 arXiv 作者版;公開的語料沒有看)。
- Albusays, Ludi & Huenerfauth (2017), Interviews and Observation of Blind Software Developers at Work to Understand Code Navigation Challenges(讀的是 RIT 教師著作典藏的 ACM 版面定稿;補充材料沒有讀)。
- Mealin & Murphy-Hill (2012), An Exploratory Study of Blind Software Developers(作者研究群網站上的刊出版;這個網址目前連不上,實際讀的是 Wayback 2024-08-28 的存檔)。
- Ali, Khusro & Alahmadi (2024), Accessible interactive learning of mathematical expressions for school students with visual disabilities(PMC 刊出版;圖與補充資料沒有看)。
- CAST (2024), Universal Design for Learning Guidelines version 3.0:首頁、Research Evidence、About the Guidelines 3.0 Update、Representation(各細項的研究子頁沒有讀)。
- Almeqdad, Alodat, Alquraan, Mohaidat & Al-Makhzoomy (2023), The effectiveness of universal design for learning: A systematic review of the literature and meta-analysis(出版者開放取用的刊出版;表格依出版者 PDF 的轉檔)。
- Guo & Wang (2025), Implementation fidelity of universal design for learning and effects on student achievement engagement and belonging(PMC 刊出版;16 張圖看了 4 張)。
- 本站文章:教學文章什麼時候該畫圖、教學文章搭配影片怎麼做、教學文章裡的程式碼要寫到什麼程度、教學文章裡的術語、符號與公式怎麼處理、Harvard CS50 AI 第 0 週導讀、林軒田機器學習基石:驗證。