無障礙網頁

地圖

本章節使用 https://mn.gov/mnit/about-mnit/accessibility/maps/web.jsp 當教材。

跟圖表一樣，本篇聚焦在網頁地圖特別該注意的地方。

製作無障礙互動式地圖要點

  • 地圖目的明確，非必要的資訊不要呈現

  • 確保遵循網頁無障礙指南

  • 確保多種輸入裝置都可使用

  • 注意內容邏輯順序

  • 盡量使用原生 HTML 撰寫

  • 支援動態內容

  • 趁早測試、頻繁測試

細節

  • 主題：地圖一定都有一個主題，資料的提供也都圍繞在這主題上，避免不必要得資訊影響

  • 標題：提供此主題代表的文字

  • 區域：地圖初始化時，請聚焦在主題的區域

  • 顏色：符合規範，不能只以顏色作為區分依據

  • 樣式：可使用不同背景 pattern 等方式區隔資訊

  • 圖例：提供地圖元件所代表的意義。另外圖例的大小，最好等於在地圖上展示的大小。

  • 文字：

    • 大小最好要有 16px 以上

    • 且不要使用陰影等阻礙資訊的裝飾

    • 盡量使用完整且明確文字描述

  • 符號與關聯：符號或提示與現實世界的物品可以聯想的到，若符號不足以表達，請佐以文字一起展示。

  • 邊界：若有必要，提供有清楚可區分邊界的樣式。

  • 描述：需要提供長描述或表格顯示資料。

  • 搜尋：提供快捷鍵搜尋資訊。

  • 快捷鍵：提供鍵盤快捷鍵設定說明與操作動作。

  • 匯出：輸出檔案盡量選擇無太多圖層的檔案，例如 PDF，且提供至少一種開放格式。

  • 互動：

    • 鍵盤可操作。

    • 注意螢幕報讀順序。

    • 提供可調整的功能，例如放大縮小、拖曳或鍵盤移動地圖、回到中心點、切換圖磚等。

    • 使用 aria 補充狀態，例如點擊地標後開啟的小框框 popups 或是動態內容改變，可以使用 aria-live 表示狀態。

<!--Context change example for a popup using the ARIA-live attribute-->
<div id="popup" aria-live="assertive">
    <p>Map item description</p>
</div>

<!--ARIA alert role-->
<h2 role="alert">
    The form was not be submitted because the "name" field is blank.
</h2>

參考來源

Previous圖表Next推薦框架

Last updated