.NET 遺忘錄（五）：為非主流使用者而寫的 HTML——無障礙設計實戰

「非主流使用者」非指網紅造型，而是視障者、行動不便者、低頻寬用戶、舊裝置用戶。HTML 標準賦予的語意標籤與屬性，正是為他們設計的生命線。忽略它們，就是切斷他們存取資訊的管道。

1. <link media>：為終端適配樣式

<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="handheld.css" media="handheld" />
<link rel="stylesheet" href="tv.css" media="tv" />

瀏覽器依 media 屬性決定是否下載/套用。預設 media="all" 會導致列印/手持裝置載入無用樣式，浪費頻寬與渲染資源。

2. alt / title：螢幕閱讀器的眼睛

<img src="ivan.jpg" alt="伊萬輸球後臉露失望神情，點擊查看組圖" />
<a href="details.html" title="查看完整比賽分析">詳情</a>

• alt：圖片無法顯示時的替代文字，螢幕閱讀器必讀
• title：補充說明，滑鼠懸停顯示，輔助認知

禁忌：alt="" 留空、alt="image001.jpg" 檔名、裝飾性圖片未設 role="presentation" 或 alt=""。

3. 拒絕強制彈窗：認知負荷的殺手

window.open()、target="_blank" 強制開啟新視窗，視障使用者無法感知上下文切換，導致數十個分頁堆疊、無法導航。原則：由使用者決定是否新分頁（右鍵選單/快捷鍵），除非法律/安全強制要求（如 OAuth 登入）。

4. 大圖片流量節制：窮人的痛

• 提供縮圖 + 點擊載入原圖
• <img src="thumb.jpg" data-full="large.jpg"> 搭配 JS 懶載入
• 設定 loading="lazy"（現代瀏覽器原生支援）

5. 內容優先的 DOM 順序

<!-- 錯誤：導航優先，內容在後 -->
<div id="menu" style="float:right">...</div>
<div id="content">...</div>

<!-- 正確：內容優先，CSS 控制視覺順序 -->
<div id="content">...</div>
<div id="menu">...</div>

螢幕閱讀器/文字瀏覽器/搜尋引擎爬蟲均按 DOM 順序讀取。語意化 HTML + CSS 視覺重排，是無障礙與 SEO 的雙贏。

6. ASP.NET Label 的 AssociatedControlID

<asp:Label ID="lblUser" runat="server" 
    AssociatedControlID="txtUser" Text="使用者名稱：" />
<asp:TextBox ID="txtUser" runat="server" />

輸出 HTML <label for="txtUser">，螢幕閱讀器朗讀標籤時自動聚焦對應輸入框。缺少此屬性，<label> 退化為無語意 <span>。

7. 微觀細節清單

• 非連結文字勿加底線（誤導為超連結）
• 連結間距足夠（避免近視/手抖誤點）
• 避免紅綠色單獨表達狀態（紅綠色盲最普遍），搭配圖示/文字
• 表單錯誤訊息掛載 aria-live="polite" 即時宣告

結語

無障礙非功能附加，而是專業工程師的基本素養。語意化 HTML 成本極低，收益極大：服務弱勢族群、提升 SEO、簡化維護、符合法規（如美國 Section 508、歐盟 EN 301 549）。從今天開始，為每一個 <img> 寫 alt，為每一個 <label> 掛 for——這是對使用者最基本的尊重。