💡 文章重點摘要：在金融機構、醫療院所、政府機關或大型商場官網中，經常需要使用互動式平面圖或組織架構圖，並要求通過 WCAG 網頁內容無障礙指南（Level AA） 稽核。許多前端工程師雖然懂得用 HTML map 標籤（
<map>）搭配<area>畫出點擊熱區，卻在無障礙檢測時慘遭滑鐵盧：視障使用者按Tab鍵時焦點在畫面上劇烈亂跳、螢幕閱讀器只唸出冰冷的網址、或者低視能用戶放大畫面後焦點框與底圖完全錯位。本文將從瀏覽器無障礙樹（Accessibility Tree）與 W3C WCAG 2.2 Technique H24 官方規範切入，帶你徹底掌握 HTML map 標籤 的螢幕閱讀器播報邏輯與無障礙實戰技巧！
⚡ 快速簡單使用（30 秒複製即用範本）
如果你想立刻寫出一段 100% 符合 WCAG 2.2 Level AA 無障礙標準 的 HTML map 標籤 影像地圖（支援 NVDA / VoiceOver 語音播報、符合由左至右／由上而下的鍵盤 Tab 焦點順序，並附帶無障礙純文字備援導覽），請直接複製下方範本修改：
<figure class="a11y-map-container" aria-labelledby="map-heading">
<h2 id="map-heading">門診大樓一樓平面導覽圖</h2>
<!-- 1. 底圖 <img>：alt 必須說明「整張地圖的總體用途」，告知視障用戶後方包含可點擊熱區 -->
<img
src="/images/clinic-floor-plan-800x400.webp"
alt="門診大樓一樓平面配置圖，後方包含掛號處、藥局與急診室 3 個可點擊導覽區域"
width="800"
height="400"
usemap="#clinic-a11y-map"
>
<!-- 2. 熱區容器 <map>：內部 <area> 的排列順序，必須嚴格遵循視覺「由上而下、由左至右」順序！ -->
<map name="clinic-a11y-map" id="clinic-a11y-map">
<!-- 左側區域 (X: 20~240) 排第一順位的 Tab 焦點 -->
<area
shape="rect"
coords="20,40,240,360"
href="/departments/registration"
alt="一樓左側：門診掛號與批價櫃檯（服務時間 08:00 至 21:00）"
>
<!-- 中央區域 (X: 280~520) 排第二順位的 Tab 焦點 -->
<area
shape="rect"
coords="280,40,520,360"
href="/departments/pharmacy"
alt="一樓中央：門診藥局領藥處（提供無障礙低櫃檯服務）"
>
<!-- 右側區域 (X: 560~780) 排第三順位的 Tab 焦點 -->
<area
shape="rect"
coords="560,40,780,360"
href="/departments/emergency"
alt="一樓右側：24 小時急診室入口與無障礙坡道"
>
</map>
<!-- 3. WCAG 友善雙保險：提供顯式純文字清單，照顧不習慣操作影像熱區的鍵盤與行動端用戶 -->
<figcaption>
<nav aria-label="門診大樓一樓快速文字導覽">
<ul>
<li><a href="/departments/registration">門診掛號與批價櫃檯</a></li>
<li><a href="/departments/pharmacy">門診藥局領藥處</a></li>
<li><a href="/departments/emergency">24 小時急診室入口</a></li>
</ul>
</nav>
</figcaption>
</figure>💡 3 秒修改重點：
<img>與<area>的alt職責不同：<img alt>描述「整張地圖是什麼」；<area alt>描述「點這個熱區會去哪裡／代表什麼部門」（遵循 W3C WCAG Technique H24）。- DOM 順序決定
Tab鍵順序：瀏覽器不會根據coords座標幫你排序焦點，請務必按照視覺由上而下、由左至右的順序撰寫<area>！
一、 5 秒快速索引：影像地圖在無障礙樹（Accessibility Tree）的角色分工表
在先前的系列文章中，我們探討過 HTML map 標籤與 DOM 樹的跨節點映射關係，以及 HTML map 標籤在 SEO 爬蟲索引的權重機制。而在無障礙網頁（Web Accessibility，簡稱 a11y）領域，我們則要關注瀏覽器如何根據 W3C HTML-AAM 1.0（HTML Accessibility API Mappings） 將影像地圖轉換給螢幕閱讀器（如 NVDA、JAWS、VoiceOver）：
| HTML 元素與屬性 | W3C HTML-AAM 對應角色 (ARIA Role) | 螢幕閱讀器（NVDA / VoiceOver）播報行為 | 對應之 WCAG 2.2 核心成功準則 |
|---|---|---|---|
<img usemap="#..."> | role="img"（圖像容器） | 進入影像地圖前，先朗讀 <img alt="..."> 作為整張地圖的背景脈絡介紹。 | SC 1.1.1 非文字內容 (Level A)：提供圖片整體替代文字。 |
<map name="..."> | 無獨立 ARIA 角色（透明邏輯群組） | 本身不發聲，作為將內部 <area> 子節點掛載至對應 <img> 的橋樑。 | — |
<area href="..." alt="..."> | role="link"（超連結節點） | 每次按下 Tab 鍵聚焦時，播報：「[alt 文字]，連結（Link）」，並可列入連結清單（Insert + F7）。 | SC 1.1.1 非文字內容 (Level A)、SC 2.4.4 連結目的 (Level A)。 |
<area>（未寫 href 屬性） | generic / 無角色（死節點） | 完全無法被鍵盤 Tab 聚焦，螢幕閱讀器直接跳過不播報。 | SC 2.1.1 鍵盤可操作 (Level A)：所有互動熱區必須具備 href。 |
<area> 的 DOM 排列順序 | 決定 tabindex 自然巡覽序列 | 嚴格按照 HTML 原始碼中 <area> 出現的先後順序依序聚焦（完全無視 coords 座標數字！）。 | SC 2.4.3 焦點順序 (Level A)：焦點移動順序必須符合視覺與語意邏輯。 |
二、 螢幕閱讀器與鍵盤使用者如何「巡覽」一張 map 影像地圖？
一般明眼使用者看平面圖時，眼球是「二維空間跳躍（2D Spatial Scanning）」——哪裡顏色鮮豔就先看哪裡，再用滑鼠直接點選。
然而，全盲的螢幕閱讀器使用者與依賴鍵盤導航（Keyboard-Only）的肢體障礙使用者，操作網頁時是「一維線性巡覽（1D Linear Navigation）」——他們透過反覆按下 Tab 鍵（或螢幕閱讀器的下一項元素快捷鍵），沿著 DOM 樹中的可聚焦節點一步一步前進。
讓我們透過下方的 Mermaid 流程圖，剖析當使用者按下 Tab 鍵進入一張 HTML map 標籤 影像地圖時，瀏覽器內部的無障礙運作管線：
從上圖可以歸納出兩個影響無障礙體驗的決定性關鍵：
- 聽覺導航仰賴「雙層
alt協作」：如果沒有<img alt>，視障者突然聽到一堆部門連結，卻不知道這是一張「一樓平面配置圖」；反之，如果有了<img alt>卻漏寫<area alt>，視障者知道這裡有張平面圖，按Tab進去卻只聽到zone-1.html、zone-2.html，依然形同迷航。 - 視覺鍵盤導航仰賴「清晰的高對比焦點外框（Focus Indicator）」：對於「不使用滑鼠、但看得見螢幕」的鍵盤使用者（如手部運動神經受損或習慣純鍵盤操作的工程師），當他們按
Tab鍵聚焦到某個<area>時，全靠圖片上浮現的 Focus Outline 來判斷目前停在哪個熱區上。
三、 生產級無障礙實戰：結合 SVG 高對比焦點框與 aria-live 即時語音面板
在實務專案中，瀏覽器原生為 <area> 繪製的預設焦點外框（預設為細小的虛線或單色框）往往非常隱蔽——一旦底圖顏色較深或線條複雜，鍵盤使用者按 Tab 時根本看不出焦點跳到哪裡（直接違反 WCAG 2.2 SC 2.4.7 焦點可見 與 SC 2.4.11 焦點外觀）。
同時，由於 <area> 在 CSS 中屬於 display: none 的非盒模型節點，我們無法直接對 area:focus 設定 background-color 或 box-shadow。
常見的解決思路是什麼？
我們可以在圖片上方疊加一層設為 pointer-events: none 與 aria-hidden="true" 的透明 <svg> 畫布，並監聽 <map> 內 <area> 的 focus 與 blur 事件，當鍵盤聚焦到任一熱區時：
- 在
<svg>上根據該<area>的coords即時畫出高對比雙層聚焦框與半透明高亮遮罩（照顧弱視與鍵盤使用者）； - 同步更新下方的
aria-live="polite"狀態面板（照顧螢幕閱讀器與認知輔助使用者）。
1. 完整 HTML + CSS + JavaScript 無障礙實戰範例
<!-- 檔案名稱：accessible-campus-image-map.html -->
<section class="campus-map-section" aria-labelledby="campus-map-title">
<h2 id="campus-map-title">校區無障礙設施互動導覽圖</h2>
<p id="campus-map-desc">
提示：您可使用滑鼠點選圖中設施，或按鍵盤 <kbd>Tab</kbd> 鍵依序巡覽各區域並按 <kbd>Enter</kbd> 前往詳情頁。
</p>
<!-- 影像地圖與 SVG 焦點高亮疊加容器 -->
<div class="map-stage" id="map-stage">
<img
src="/images/campus-map-600x360.webp"
alt="校區無障礙設施平面圖，依序包含行政大樓無障礙電梯、圖書館視障資源中心與體育館復健泳池 3 個導覽區"
width="600"
height="360"
usemap="#campus-a11y-map"
aria-describedby="campus-map-desc"
id="campus-img"
>
<!-- 視覺輔助層：設為 aria-hidden="true" 與 pointer-events: none，專門為鍵盤 Focus 繪製高對比高亮框 -->
<svg
class="focus-overlay-svg"
id="focus-overlay"
viewBox="0 0 600 360"
aria-hidden="true"
focusable="false"
></svg>
<!-- 熱區容器 <map>：嚴格依視覺「由左至右」順序排列 <area> -->
<map name="campus-a11y-map" id="campus-a11y-map">
<area
shape="rect"
coords="30,50,190,310"
href="/facilities/admin-elevator"
alt="第一區（左側）：行政大樓 — 設有語音播報無障礙電梯與輪椅坡道"
data-zone-title="行政大樓（無障礙電梯／坡道）"
data-zone-detail="入口位於大樓南側，坡道斜率 1:12，電梯具備點字按鈕與樓層語音提示。"
>
<area
shape="circle"
coords="310,180,85"
href="/facilities/library-braille"
alt="第二區（中央）：總圖書館 1 樓 — 視障資源中心與擴視機設備室"
data-zone-title="總圖書館（視障資源中心）"
data-zone-detail="配備點字觸摸顯示器、桌上型擴視機與 NVDA 專用導覽工作站。"
>
<area
shape="poly"
coords="430,60,570,60,585,180,570,300,430,300"
href="/facilities/gym-pool"
alt="第三區（右側）：體育館 — 無障礙升降入水池與通用更衣室"
data-zone-title="體育館（無障礙復健泳池）"
data-zone-detail="池畔配置電動移位升降椅，並設有無門檻無障礙淋浴間與求助鈴。"
>
</map>
</div>
<!-- 無障礙即時狀態面板：aria-live="polite" 會在不打斷原本連結播報的前提下，補充朗讀設施詳情 -->
<div
id="a11y-status-box"
class="a11y-status-box"
role="status"
aria-live="polite"
aria-atomic="true"
>
目前尚未選取區域。請使用 Tab 鍵或滑鼠移至上方地圖熱區檢視無障礙設施詳情。
</div>
</section>
<style>
.map-stage {
position: relative;
display: inline-block;
max-width: 100%;
}
.map-stage img {
display: block;
max-width: 100%;
height: auto;
}
.focus-overlay-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 不阻擋底層 <area> 的滑鼠點擊 */
}
/* 符合 WCAG 2.2 SC 2.4.11 Focus Appearance 的雙色高對比高亮框（白底黑框 + 藍色半透明填色） */
.a11y-highlight-shape {
fill: rgba(37, 99, 235, 0.28);
stroke: #ffffff;
stroke-width: 6px;
paint-order: stroke;
filter: drop-shadow(0 0 2px #0f172a);
}
.a11y-status-box {
margin-top: 12px;
padding: 12px 16px;
border-left: 4px solid #2563eb;
background-color: #f8fafc;
color: #0f172a;
font-size: 1rem;
}
</style>
<script>
const mapEl = document.getElementById('campus-a11y-map');
const overlaySvg = document.getElementById('focus-overlay');
const statusBox = document.getElementById('a11y-status-box');
/**
* 根據 <area> 的 shape 與 coords，在 SVG 覆蓋層繪製高對比視覺焦點圖形
*/
function renderFocusShape(area) {
overlaySvg.innerHTML = '';
const shape = (area.getAttribute('shape') || 'rect').toLowerCase();
const nums = (area.getAttribute('coords') || '').split(',').map(Number);
const ns = 'http://www.w3.org/2000/svg';
let svgEl = null;
if (shape === 'rect' && nums.length >= 4) {
svgEl = document.createElementNS(ns, 'rect');
svgEl.setAttribute('x', nums[0]);
svgEl.setAttribute('y', nums[1]);
svgEl.setAttribute('width', nums[2] - nums[0]);
svgEl.setAttribute('height', nums[3] - nums[1]);
svgEl.setAttribute('rx', '6');
} else if (shape === 'circle' && nums.length >= 3) {
svgEl = document.createElementNS(ns, 'circle');
svgEl.setAttribute('cx', nums[0]);
svgEl.setAttribute('cy', nums[1]);
svgEl.setAttribute('r', nums[2]);
} else if (shape === 'poly' && nums.length >= 6) {
svgEl = document.createElementNS(ns, 'polygon');
const pairs = [];
for (let i = 0; i < nums.length; i += 2) {
pairs.push(`${nums[i]},${nums[i + 1]}`);
}
svgEl.setAttribute('points', pairs.join(' '));
}
if (svgEl) {
svgEl.setAttribute('class', 'a11y-highlight-shape');
overlaySvg.appendChild(svgEl);
}
}
function handleActivateZone(event) {
const area = event.target.closest('area');
if (!area) return;
renderFocusShape(area);
statusBox.textContent = `📍 目前聚焦區域：${area.dataset.zoneTitle} — ${area.dataset.zoneDetail}`;
}
function handleClearZone() {
overlaySvg.innerHTML = '';
}
// 同時支援鍵盤 Tab 聚焦 (focusin/focusout) 與滑鼠懸停 (mouseover/mouseout)
mapEl.addEventListener('focusin', handleActivateZone);
mapEl.addEventListener('mouseover', handleActivateZone);
mapEl.addEventListener('focusout', handleClearZone);
mapEl.addEventListener('mouseout', handleClearZone);
</script>2. 預期無障礙執行結果（Expected Screen Reader & Keyboard Output）
當視障或鍵盤使用者開啟 NVDA / VoiceOver 並按下 Tab 鍵依序進入該元件時，實際的語音與視覺回饋如下：
[第 1 次按 Tab 進入第一區]
- 視覺畫面：圖片左側「行政大樓」周圍立即亮起 6px 高對比白邊與藍色半透明遮罩。
- 螢幕閱讀器播報：
1. (主連結語音) "第一區（左側）：行政大樓 — 設有語音播報無障礙電梯與輪椅坡道，連結"
2. (aria-live 接續補充) "📍 目前聚焦區域：行政大樓（無障礙電梯／坡道） — 入口位於大樓南側，坡道斜率 1:12，電梯具備點字按鈕與樓層語音提示。"
[第 2 次按 Tab 進入第二區]
- 視覺畫面：高對比高亮框平滑移至圖片中央圓形「總圖書館」區域。
- 螢幕閱讀器播報：
1. (主連結語音) "第二區（中央）：總圖書館 1 樓 — 視障資源中心與擴視機設備室，連結"
2. (aria-live 接續補充) "📍 目前聚焦區域：總圖書館（視障資源中心） — 配備點字觸摸顯示器、桌上型擴視機與 NVDA 專用導覽工作站。"四、 影像地圖無障礙（a11y）最常踩中的 4 大致命地雷
在進行政府標案（台灣數位發展部無障礙網頁標章）或跨國企業 WCAG 2.2 AA 稽核時，以下 4 個與 <map> / <area> 相關的錯誤是最常被開立缺失單的雷區：
地雷 1：area 的 DOM 順序與畫面座標順序錯置，引發「鍵盤焦點亂跳（Focus Jumping）」
許多工程師在用線上工具圈選 <area> 座標時，想到哪裡就先畫哪裡——例如先畫右下角的「急診室」、再畫左上角的「掛號處」、最後畫中間的「藥局」。
讓我們透過 Mermaid 對比圖，看看這會對鍵盤使用者造成多麼嚴重的認知混亂（直接違反 WCAG SC 2.4.3 焦點順序 Focus Order）：
- 正確工程規範：無論你是用什麼順序圈選出座標的，寫入
<map>時，務必將<area>標籤按照畫面視覺的「由上而下（Top-to-Bottom）、由左至右（Left-to-Right）」順序重新排好！千萬不要企圖用正整數tabindex="1",tabindex="2"去硬改順序（這會破壞全頁自然焦點流）。
地雷 2：把 img alt 設為空字串 alt=""，或將 area alt 複製貼上成同一句話
根據 W3C WCAG 2.2 Technique H24 官方技術規範，影像地圖是由「一張宿主圖片」加上「多個獨立熱區連結」所組成的複合元件，兩者的 alt 缺一不可且職責截然不同：
<!-- ❌ 致命錯誤 1：以為有寫 <area alt> 就把 <img alt=""> 留空（視障者不知道這張圖是什麼地圖） -->
<img src="taiwan-mrt.png" usemap="#mrt-map" alt="">
<!-- ❌ 致命錯誤 2：把所有 <area alt> 全部複製貼上成「捷運路線圖」（視障者聽到 5 個一模一樣的連結！） -->
<map name="mrt-map">
<area shape="rect" coords="10,10,100,100" href="/red-line" alt="捷運路線圖">
<area shape="rect" coords="120,10,200,100" href="/blue-line" alt="捷運路線圖">
</map>
<!-- 🟢 正確寫法：<img> 介紹地圖全貌，<area> 精準描述各別熱區目的地 -->
<img src="taiwan-mrt.png" usemap="#mrt-map" alt="台北捷運路網導覽圖：請按 Tab 鍵選擇欲查詢的捷運路線">
<map name="mrt-map" id="mrt-map">
<area shape="rect" coords="10,10,100,100" href="/red-line" alt="淡水信義線（紅線）各站時刻表與轉乘資訊">
<area shape="rect" coords="120,10,200,100" href="/blue-line" alt="板南線（藍線）各站時刻表與轉乘資訊">
</map>地雷 3：為尚未開放的熱區寫 area href="#" 或 area 卻不加說明
在活動網站或分階段上線的導覽圖中，常有部分區域屬於「敬請期待（尚未開放點擊）」：
- 若直接寫
<area shape="rect" coords="..." alt="第二期館場">（不寫href）：因為沒有href，該<area>不會進入鍵盤Tab序列，螢幕閱讀器完全不會唸出這塊區域的存在，造成視障者獲得的資訊比明眼人少。 - 若寫
<area shape="rect" coords="..." href="#" alt="第二期館場">：視障者按Enter點下去後畫面毫無反應（或頁面跳回頂部），卻不知道為什麼點不進去。
- 解決思路：
- 將尚未開放的區域直接寫入宿主
<img alt="...（註：北側第二期館場預計於 12 月開放）">的整體說明文字中，不要為非互動區域建立假的<area href="#">空連結；或者在下方的純文字備援清單中以一般<li>第二期館場（預計 12 月開放）</li>呈現。
- 將尚未開放的區域直接寫入宿主
地雷 4：RWD 圖片縮放時未同步更新 area coords，導致低視能用戶放大畫面時焦點框嚴重錯位
根據 WCAG 2.2 SC 1.4.4（調整文字大小） 與 SC 1.4.10（重排 Reflow），無障礙網頁必須支援低視能（Low Vision）使用者將瀏覽器畫面縮放至 200% 甚至 400%，或在窄螢幕裝置上檢視。
然而，HTML 原生的 <area coords="x1,y1,x2,y2"> 是以圖片原始像素尺寸寫死的固定常數！當 <img> 因為 CSS max-width: 100%; height: auto; 在小視窗或高倍率縮放下改變了渲染寬度（例如從 800px 縮成 400px），瀏覽器原生的 <area> 焦點框與點擊座標並不會自動縮小 50%，而是繼續畫在原本 800px 的座標上，導致鍵盤焦點框直接飛出圖片外面！
- 解決思路：
若專案使用<map>且圖片會隨容器寬度響應式縮放，務必掛載一段輕量的ResizeObserver腳本，在圖片尺寸變更時動態按比例重算coords（或如上一節實戰範例搭配viewBox自動等比縮放的<svg>）：
/**
* 讓 <map> 內所有 <area coords> 隨 <img> 實際渲染寬度自動等比例縮放，確保無障礙焦點框 100% 對齊
*/
function enableResponsiveImageMap(imgEl, mapEl) {
const naturalWidth = Number(imgEl.getAttribute('width')) || imgEl.naturalWidth;
if (!naturalWidth) return;
const areas = [...mapEl.querySelectorAll('area[coords]')];
// 先備份原始基準座標至 data-original-coords
areas.forEach((area) => {
if (!area.dataset.originalCoords) {
area.dataset.originalCoords = area.getAttribute('coords');
}
});
const observer = new ResizeObserver(() => {
const scale = imgEl.clientWidth / naturalWidth;
if (scale <= 0) return;
areas.forEach((area) => {
const orig = area.dataset.originalCoords.split(',').map(Number);
const scaled = orig.map((val) => Math.round(val * scale));
area.setAttribute('coords', scaled.join(','));
});
});
observer.observe(imgEl);
}五、 上線前必查：HTML map 無障礙網頁 5 點檢驗清單
在將包含 HTML map 標籤 的網頁送交無障礙檢測（如 Freego、axe DevTools、Lighthouse Accessibility）或部署上線前，請逐一勾選確認以下 5 點：
- ☐ 1. 雙層
alt替代文字完整且不重複（WCAG H24）：宿主<img alt>是否清楚說明整張地圖的主題？每一個<area alt>是否皆精準描述該熱區的獨立功能或目的地，且無空白或重複複製貼上？ - ☐ 2.
<area>的 DOM 順序符合視覺動線（WCAG 2.4.3）：連續按下鍵盤Tab鍵時，畫面上的焦點框移動順序是否嚴格遵循「由上而下、由左至右」的合理邏輯，不會在圖片四角劇烈跳躍？ - ☐ 3. 所有互動
<area>皆具備有效href（WCAG 2.1.1）：確認所有可操作熱區皆擁有真實的href屬性（無漏寫href導致鍵盤無法聚焦，亦無濫用href="#"死連結）。 - ☐ 4. 鍵盤焦點外框具備高對比可視性（WCAG 2.4.7 / 2.4.11）：在深色或複雜底圖上按
Tab鍵巡覽時，焦點框是否清晰可見（建議搭配 SVG 雙色高對比外框與aria-live狀態提示）？ - ☐ 5. 支援 RWD 座標等比縮放與純文字導覽備援：當瀏覽器縮放至
200%或於手機窄螢幕檢視時，熱區座標是否已透過ResizeObserver同步縮放？圖片下方是否附帶等效的<ul><li><a>純文字快速導覽連結？
六、 總結與系列總回顧
透過這三篇針對 HTML map 標籤（<map> 與 <area>） 的深度實戰系列文，我們從底層原理一路打通到了生產環境合規：
- DOM 樹與事件篇（新手必學 HTML map 標籤）：釐清了視覺宿主
<img>與邏輯容器<map>在 DOM 樹中的分離映射，以及為何點擊事件必須綁定在<map>而非<img>上。 - 搜尋引擎 SEO 篇（HTML map 標籤在 SEO 的致命盲點）：掌握了 Googlebot 如何將
<area alt>視為錨點文字（Anchor Text）傳遞內部連結權重。 - 無障礙網頁 a11y 篇（本篇）：學會了如何透過雙層
alt分工、DOM 焦點順序控制、SVG 高對比焦點疊加層與ResizeObserver座標同步，讓視障與鍵盤使用者也能享受零障礙的互動導覽體驗！
七、 參考資料與權威規範延伸閱讀
- W3C WAI Tutorials: Image Maps (官方無障礙影像地圖實作指南) — W3C Web Accessibility Initiative 針對客戶端影像地圖（
<map>與<area>）的官方無障礙設計教學。 - W3C WCAG 2.2 Technique H24: Providing text alternatives for the area elements of image maps — WCAG 2.2 官方審核技術規範，詳列
<img alt>與<area alt>的必填標準與檢測流程。 - W3C HTML Accessibility API Mappings (HTML-AAM 1.0) — 官方定義
<area href>如何映射為無障礙樹中的role="link"及 Accessible Name 計算優先順序。 - MDN Web Docs:
<area>: The Image Map Area element (Accessibility concerns) — Mozilla 開發者文件關於<area>鍵盤焦點、替代文字與響應式座標的注意事項。
發表迴響