無障礙互動式地圖：WCAG 2.2

無障礙互動式地圖讓使用者可以透過鍵盤、輔助科技或觸控完成相同的位置任務，不必依賴拖曳、色彩或必須看見的圖釘。搜尋、結果清單、詳細資訊，以及明確說出地點名稱的回答承擔實際任務。地圖則繼續作為這個共享狀態的視覺化檢視。

以下章節先把任務與地圖畫布分開，再討論地點識別、鍵盤順序、拖曳、色彩、播報，以及 AI 回答。地圖即使有重排例外，也不代表頁面的其他部分可以忽略重排。Kaleidr Studio、Viewer 與 Chat 會和主應用程式頁面上的控制項配合，讓任務真正可操作。

無障礙互動式地圖重點

先定義任務： 搜尋、比較、選取與執行才是任務。畫布只是這項任務的一種檢視。

共享一個地點識別碼： 清單、標記、詳細資訊與 AI 回答都要指向同一筆資料。

提供不需拖曳的路徑： 平移按鈕、可點選目標、地址輸入，以及上移/下移控制項都應與拖曳操作並存。

不要只靠色彩表達意義： 狀態除了色調，還需要文字、形狀或圖示。

播報結果： 結果數量、路線已就緒或沒有符合結果，都應放在狀態訊息中。圖磚載入則不需要。

什麼是無障礙互動式地圖？

無障礙互動式地圖是一種位置體驗，讓鍵盤、輔助科技與指標裝置使用者都能完成相同的任務。任務可能是尋找有無階差入口的博物館、比較三間圖書館，或選擇仍在營業的藥局。地圖負責顯示空間關係。當畫布難以看清、拖曳或點選時，搜尋、篩選器、結果清單、詳細資訊與書面回答仍提供使用者完成任務所需的事實。只能用指標裝置操作的介面只是視覺地圖，不是無障礙地圖。

WCAG 2.2 是 W3C 於 2024 年 12 月 12 日發布的 Recommendation。本指南將這項現行 Web 標準套用到地圖任務，包括焦點、拖曳、目標尺寸、色彩、對比與重排 (W3C, 2024)。封面把結果清單、地圖，以及一則會說出 City Museum、示例距離與示例設施的回答放在一起。這些距離與設施標籤僅供示意。正式上線的卡片應顯示地點資料中的實際欄位，而名為「Accessible」的篩選器並不能證明該場所有接受過無障礙稽核。

為什麼要從任務開始，而不是從畫布開始？

只靠地圖的操作路徑要求使用者探索畫布、找到圖釘、閱讀彈出視窗，再執行動作。這條路徑需要視覺判讀與精準的指標操作。無障礙路徑則從搜尋或提示開始，接著進入結構化結果清單、地點詳細資訊，最後再執行路線、儲存或分享等動作。地圖會在這些步驟旁同步更新，但不會成為唯一的操作路徑。Kaleidr 的嵌入指南也已要求在畫布之外提供標題、摘要與地點清單，讓頁面對鍵盤使用者、輔助科技與搜尋仍然實用 (Kaleidr, 2026)。

只透過地圖進行探索、尋找圖釘與閱讀彈出視窗的路徑，和透過搜尋、結構化結果、地點詳細資訊、動作與同步地圖完成任務的路徑比較。

左側路徑把地圖本身當成介面，並把視覺判讀與指標精準度列為必要條件。右側路徑則透過搜尋、結果清單、詳細資訊與動作前進，地圖只是輔助檢視。示例中的圖書館名稱、地址與距離僅供說明。這項分離是架構選擇，不是 Kaleidr 的評分。

把關鍵資料放在 HTML 中。即使地圖圖磚載入失敗，名稱、地址、類別、營業時間與下一步動作仍應存在。彈出視窗可以重複這些資訊，但不能是唯一副本。下一節討論的穩定地點識別碼，可讓清單列與地圖標記持續綁定到同一筆資料。

為什麼一個統一的地點識別碼很重要？

搜尋、結果卡片、詳細資訊面板、地圖標記、AI 回答與分析事件，都應共享同一個地點識別碼。如果識別碼在不同介面上的意義發生變化，鍵盤使用者可能在清單裡選了 FreshMart，但地圖反而標示另一家店，而回答又描述第三家店。圖中把這個識別碼放在中央，再分送到各個介面。圖裡的示例街道地址、星等、評論數量、電話號碼、座標與時間戳記僅供說明，不是即時的 Kaleidr 資料。

一個地點識別碼連接結果卡片、詳細資訊面板、地圖標記、AI 回答與分析事件。

共享地點識別碼會供結果卡片、詳細資訊面板、標記、回答與分析事件共同使用。每個介面都顯示相同的名稱與地址。圖中的評分、電話號碼、座標與事件時間都是示例。正式環境的分析應保留識別碼，並避免複製事件並不需要的欄位。

選取狀態應跟隨識別碼，而不是螢幕座標。啟用清單中的一列後，系統會設定所選地點、移動地圖並更新詳細資訊，不需要讓使用者再去找圖釘。點擊地圖標記則反向操作，並標示同一列。不要在每次選取後都把鍵盤焦點移到地圖，否則螢幕閱讀器使用者會失去自己在清單中的位置。焦點與選取是兩種不同狀態，下一節會繼續把它們分開。

什麼樣的鍵盤順序可以完成任務？

依照任務設計焦點順序。可行的順序是：搜尋、篩選器、結果摘要、結果清單、地圖控制項、詳細資訊、主要動作。使用者可以理解結果數量，從清單選擇地點，需要時再平移或縮放地圖，閱讀詳細資訊，最後取得路線。只要清單已經提供相同地點，就不需要讓每個地圖標記都有各自的 Tab 停駐點。方向鍵可以在清單內移動，Tab 則在較大的區域之間移動。

一條帶編號的鍵盤路徑，從搜尋與篩選器開始，經過結果清單、地圖控制項與詳細資訊，最後到主要動作。

路徑從搜尋進入篩選器、結果摘要、清單、地圖控制項、詳細資訊與主要動作。所選公園會持續和其清單列、詳細資訊卡片連結。結果數量與示例距離僅供說明。焦點順序跟著任務走，地圖是一個停駐點，而不是由大量圖釘形成的 Tab 區域。

固定搜尋列或聊天面板這類作者建立的內容如果把取得焦點的控制項完全擋住，就不滿足 WCAG 2.2 的成功標準 2.4.11（AA）。該標準的注 2 允許使用者開啟的內容（例如詳細資訊抽屜）遮住焦點，前提是使用者不必移動鍵盤焦點就能重新顯示該控制項。只遮住控制項的一部分，則屬於成功標準 2.4.12（AAA）。可見焦點與可見選取需要不同樣式，因為藍色清單列與焦點環代表的是不同狀態。WAI-ARIA 的鍵盤指引也要求作者區分焦點與選取，尤其當選取項目位於本身不持有焦點的元件中時 (W3C, 2026)。把焦點環留在下一次鍵盤輸入會作用的控制項上，並為地點選取提供獨立的選取樣式。

為什麼拖曳不能是唯一操作路徑？

地圖很容易讓人直接拖曳，但拖曳不能成為平移地圖、設定停靠點或重新排序路線的唯一方法。WCAG 2.2 的成功標準 2.5.7 規定，使用拖曳動作的功能應能透過單一指標、在不拖曳的情況下完成，除非拖曳本身是必要的，或該行為由使用者代理決定且作者沒有修改。只有鍵盤替代方案，仍不足以符合這項指標要求。應提供方向平移按鈕、點一下即可設定目的地、地址輸入欄位，以及用來把有順序的停靠點上移或下移的控制項。同一份建議中的成功標準 2.5.8 也規定最小目標尺寸為 24×24 CSS 像素，並對間距、頁面其他位置的等效控制項等情況提供例外。

把只能拖曳的地圖操作標示為唯一路徑，並與平移按鈕、點一下設定目的地、地址輸入、清單重新排序按鈕與鍵盤平移按鍵比較。

左側面板把拖曳當成移動地圖的唯一方式。右側面板加入平移按鈕、可點選目標、地址欄位、重新排序按鈕與鍵盤平移按鍵。示例地址僅供說明。鍵盤路徑仍然需要，但它不能取代針對拖曳操作提供的單一指標替代方式。

讓使用者可以離開地圖，而不會被鍵盤困在其中。如果焦點位於地圖時方向鍵會平移地圖，那麼 Escape 或文件中說明的按鍵應能把焦點送回清單或下一個控制項。縮放、定位與關閉都需要無障礙名稱，不能只是螢幕閱讀器無法辨識標籤的純圖示按鈕。目標尺寸對這些控制項與清單列都很重要；過小的點擊區域會讓觸控使用者或使用精準度較低指標裝置的人操作困難。

為什麼地圖不能只靠色彩傳達資訊？

成功標準 1.4.1 規定，色彩不能成為傳遞資訊、指示動作、要求回應或區分元素的唯一視覺方式。如果「營業中」只用綠點、「已關閉」只用紅點，而唯一差別就是色調，這樣的設計就不夠。應把色彩與文字標籤、勾選、叉號或其他形狀搭配。同樣的規則也適用於類別標記、選取路線與「您在這裡」。同一份建議中的成功標準 1.4.11 也要求，用於辨識使用者介面元件與狀態的必要視覺資訊至少達到 3:1 的對比，但非作用中元件或外觀由使用者代理決定的元件除外。淺色底圖上的白色縮放按鈕可能達不到這個比例，即使品牌色在白色頁面上看起來沒有問題。

只用彩色圓點顯示營業中與已關閉，和使用圖示、形狀與文字標籤顯示營業中、已關閉與延遲的比較。

較弱的示例使用綠色圓形表示「營業中」、紅色圓形表示「已關閉」。較強的示例再加入勾選、叉號、警告形狀，以及「營業中」「已關閉」「延遲」等文字。色彩仍有幫助，但當色彩無法被辨識時，文字與形狀負責傳達意義。

圖例應以文字存在，不能只是在地圖上畫一個彩色圖例。類別篩選器應在控制項名稱或相鄰標籤中說明目前的選取狀態。介面文案不要叫使用者「跟著紅色圖釘走」，而應直接說出地點名稱。下面的 AI 章節也把這條規則套用到產生的回答。

輔助科技應該聽到什麼？

播報操作結果，而不是渲染器事件。有效的狀態訊息可以說：有四家店符合篩選條件、路線已就緒以及需要多長時間，或沒有符合條件的無障礙入口。「圖磚已載入」「標記已移動」「地圖中心已變更」都是雜訊。如果用 live region 包住整張地圖，輔助科技會讀出這些技術事件，反而淹沒使用者真正需要的句子。WAI 記錄了一項 ARIA22 技術，使用 role=status 呈現狀態訊息。這只是符合 WCAG 的一種示例方法，並不要求每張地圖都一定使用這個 role (W3C, 2026)。

用來播報結果數量、路線已就緒、沒有無障礙入口符合結果的狀態訊息，和圖磚載入、標記移動等應忽略的渲染器事件比較。

有用的頻道會回報結果數量、路線已就緒，以及沒有符合的無障礙入口。被忽略的頻道則列出圖磚載入、標記移動與地圖中心變更。示例店名、距離與 18 分鐘路線僅供說明。應播報使用者能夠採取行動的狀態。

搜尋與篩選器也需要同樣的節制。一次查詢後，只播報一次結果數量或空狀態，不要持續播報標記更新。讓播報足夠簡短，以便不造成過度打斷。結果數量變化時，不要把焦點移到地圖。清單仍然是使用者閱讀符合結果的地方，地圖則反映同一組結果。

為什麼 AI 回答必須說出地點名稱？

AI 地圖回答即使離開地圖，也必須能單靠文字成立。「Downtown Pharmacy 營業到午夜，距離您選取的起點 1.2 英里」明確說出了地點、營業時間與距離。「我已經標示紅色圖釘」只是在指向畫布，對看不到該圖釘的人沒有幫助。地圖可以選取同一個地點並繪製路線，但句子本身仍要承擔判斷內容。把完整回答或簡短摘要送到狀態頻道。不要把每個 token 都傳給輔助科技，也不要在每個片段到達時把焦點拉到聊天區域。

一則文字回答明確說出 Downtown Pharmacy、營業時間與距離，旁邊有地圖；另一則被否定的回答只說已標示紅色圖釘。

有效的回答說出 Downtown Pharmacy、打烊時間，以及距離所選起點的距離。地圖顯示該地點與路線。被否定的回答只說標示了紅色圖釘。圖中的藥局名稱、營業時間與距離僅供說明。

不要讓模型參與存取權限判斷。由主應用程式授權資料，回答只能描述已經存在於結果集中的地點。不要讓產生式文字憑空加入無階差入口、無障礙廁所或來源資料中不存在的認證。如果資料沒有無障礙欄位，回答應明確說明該資訊未知。地圖上的標示只是選擇性的確認，不是回答內容本身。

當地圖無法重排時，哪些部分仍必須可用？

WCAG 2.2 的成功標準 1.4.10 認為某些內容在使用或理解其意義時需要二維版面。Note 2 列出理解所必需的圖片，例如地圖與圖表，並允許這些部分使用二維捲動。這項例外只適用於地圖，不適用於頁面標題、搜尋、篩選器、結果文字、按鈕、AI 回答或詳細資訊卡片。在較窄的寬度或高倍縮放下，應把清單堆疊在地圖上方或下方，讓地圖保留在自己的可捲動區域，並把文字放在該區域之外。即使畫布只剩一個小面板，使用者仍應能完成任務。

失敗情況也需要同樣的分離。如果地圖圖磚沒有載入，結果清單、詳細資訊與主要動作仍應保留。明確說明地圖未能載入，並讓資料繼續可用。沒有文字的空白畫布是任務失敗，不是樣式問題。減少動態效果也屬於這裡。不要依賴很長的 fly-to 動畫來傳達選取了哪個地點。即使相機移動縮短或略過，也要更新選取狀態與清單。

無障礙互動式地圖應如何與 Kaleidr 配合？

把搜尋、篩選器、結果清單、詳細資訊、主要動作與狀態訊息保留在主應用程式頁面上。和地圖共享地點、路線、選取、篩選器與結果集識別碼。Kaleidr Studio 用來把團隊的想法轉成具有地點、內容與互動行為的地圖 (Kaleidr, 2026)。Viewer 透過 share id 嵌入已發布地圖，該嵌入不需要 publishable key (Kaleidr, 2026)。開發者文件把 Chat 描述為主應用程式地圖中的 Spatial AI，把 Viewer 描述為發布地圖，把 Tile 描述為設計完成的底圖，把 Editor 描述為繪製與編輯 (Kaleidr, 2026)。圍繞這些產品介面的無障礙操作路徑仍由主應用程式負責。

主應用程式頁面包含搜尋、篩選器、結果、詳細資訊、動作與狀態；中間是共享識別碼；右側是 Studio、Viewer、Chat 與地圖體驗。

主應用程式頁面負責搜尋、篩選器、結果清單、詳細資訊、動作與狀態訊息。共享識別碼把這個頁面連到 Studio、Viewer、Chat 與地圖。圖中的頁尾說明 Kaleidr 不會自動保證 WCAG 符合性。測試實際發布的體驗仍是發布者的責任。

範本或地圖元件可以提供基礎。無程式碼發布指南指出，一旦發布者加入色彩、內容與地圖互動行為，範本就無法保證符合性，因為符合性取決於實際發布的體驗 (Kaleidr, 2026)。使用鍵盤、螢幕閱讀器、縮放與窄版視窗測試完整任務。也要加入地圖無法載入的失敗情境。本文是實作指南，不是符合性稽核，也不是法律意見。

探索 Kaleidr Studio 以設計並發布地圖。閱讀開發者文件 以查看已記錄的 Chat、Viewer、Tile 與 Editor 產品介面。把結果清單與明確說出地點名稱的回答保留在主應用程式頁面，並綁定到地圖使用的同一個地點識別碼。

說明：Kaleidr 在創意與開發工作流程中使用 AI 輔助工具進行影像製作、內容優化與研究。

常見問題

鍵盤替代方案可以取代不需拖曳的指標操作路徑嗎？

不可以。WCAG 2.2 要求使用單一指標即可完成原本需要拖曳的操作，除非拖曳本身是必要的，或該行為由使用者代理決定。鍵盤存取是同一任務的另一項獨立要求。

地圖的重排例外也涵蓋搜尋與結果清單嗎？

不涵蓋。地圖與圖表可以保留二維捲動，但標題、搜尋、篩選器、結果、按鈕與 AI 回答，在頁面變窄或放大時仍必須可用。

Kaleidr 是否保證已發布地圖符合 WCAG？

不保證。Studio、Viewer 與 Chat 是產品介面。符合性取決於實際發布的頁面，包括標籤、對比、結果清單、狀態訊息與測試。

AI 地圖回答應該說「紅色圖釘」嗎？

不應該。應在文字中直接說出地點、相關狀態，以及距離或路線。地圖可以選取同一地點，但句子在沒有畫布時也必須能獨立成立。

References

World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation, December 12, 2024. Includes 2.4.11 Focus Not Obscured (Minimum), 2.4.12 Focus Not Obscured (Enhanced), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 1.4.1 Use of Color, 1.4.11 Non-text Contrast, and the 1.4.10 Reflow note that lists maps and diagrams. Accessed October 7, 2026. https://www.w3.org/TR/WCAG22/
Kaleidr. Embed Interactive Map on a Website. Asks for headings, summaries, and a location list outside the canvas. https://kaleidr.com/blog/how-to-embed-interactive-map-on-a-website
W3C Web Accessibility Initiative. Developing a Keyboard Interface. Distinguishes keyboard focus from selection. Accessed October 7, 2026. https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
W3C Web Accessibility Initiative. ARIA22: Using role=status to present status messages. An example technique, not a required implementation. Accessed October 7, 2026. https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22
Kaleidr. AI Map Maker for Branded Interactive Maps. Studio turns ideas into interactive maps with locations, content, and behavior. Accessed October 7, 2026. https://kaleidr.com/studio
Kaleidr Developer Docs. Viewer. Embeds a published map by its share id, and that embed does not require a publishable key. Accessed October 7, 2026. https://docs.kaleidr.com/viewer
Kaleidr Developer Docs. Introduction. Chat is Spatial AI in the host map, Editor is draw and edit, Tile is designed basemaps, and Viewer publishes a map. Accessed October 7, 2026. https://docs.kaleidr.com/
Kaleidr. Launch a No-Code Map Website. A template does not guarantee conformance of the experience a publisher ships. https://kaleidr.com/blog/launch-a-map-website-no-code

@misc{w3c_wcag22_2024,
  title  = {Web Content Accessibility Guidelines (WCAG) 2.2},
  author = {{World Wide Web Consortium}},
  year   = {2024},
  url    = {https://www.w3.org/TR/WCAG22/}
}

@misc{kaleidr_embed_map_2026,
  title  = {Embed Interactive Map on a Website},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://kaleidr.com/blog/how-to-embed-interactive-map-on-a-website}
}

@misc{w3c_keyboard_interface_2026,
  title  = {Developing a Keyboard Interface},
  author = {{World Wide Web Consortium}},
  year   = {2026},
  url    = {https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/}
}

@misc{w3c_aria22_2026,
  title  = {ARIA22: Using role=status to present status messages},
  author = {{World Wide Web Consortium}},
  year   = {2026},
  url    = {https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22}
}

@misc{kaleidr_studio_a11y_2026,
  title  = {AI Map Maker for Branded Interactive Maps},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://kaleidr.com/studio}
}

@misc{kaleidr_docs_viewer_a11y_2026,
  title  = {Viewer},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://docs.kaleidr.com/viewer}
}

@misc{kaleidr_docs_home_a11y_2026,
  title  = {Introduction},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://docs.kaleidr.com/}
}

@misc{kaleidr_launch_map_2026,
  title  = {Launch a No-Code Map Website},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://kaleidr.com/blog/launch-a-map-website-no-code}
}