打造無障礙擴充功能

對許多使用者來說，無障礙設計就是使用者介面，因此功能通常十分適合不需要存取性擴充功能的使用者使用。所使用的技巧各不相同。至少要使用高對比度。影片應加上字幕。圖片應包含 alt 屬性。

但如前所述，這只是最小值。後續章節會說明其他技術。

實作無障礙功能的方式有幾種，但最簡單的方式是使用標準 HTML 控制項，尤其是輸入元素。這些控制項如下圖所示。

如要將其他元素設為可存取，請使用 ARIA 屬性。這些屬性會向螢幕閱讀器提供網頁功能及控制項目前狀態的相關資訊。我們來看個例子

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

根據預設，HTML DOM 中唯一可接收鍵盤焦點的元素，包括錨點、按鈕和表單控制項。幸好，在 HTML 元素上設定 tabIndex 屬性可讓該元素接收鍵盤焦點。例如：

<div tabindex="0">I can receive focus with the tab key.</div>

如需實作這些技術和其他資訊的操作說明，請參閱支援無障礙功能。