請確認所有自訂控制項都具有適當的 role，以及任何必要的 ARIA 屬性，以便提供屬性和狀態。舉例來說，自訂核取方塊需要 role="checkbox" 和 aria-checked="true|false"，才能正確傳達其狀態。
瞭解如何使用 ARIA 和 HTML，瞭解在哪些情況下最能為自訂控制項提供缺少語意。
測試方式
如要檢查所有自訂互動式控制項是否具有適當的 ARIA 角色，請使用 Chrome 開發人員工具無障礙功能窗格或螢幕閱讀器測試頁面。
JAWS 和 NVDA 是兩個較受歡迎的 Windows 螢幕閱讀器。VoiceOver 是 macOS 內建的螢幕閱讀器。
您可以使用 CSS 為 <div> 和 <button> 元素設定樣式，以便傳達相同的視覺操作元素，但使用螢幕閱讀器時，體驗會截然不同。<div> 只是一般群組元素，因此螢幕閱讀器只會朗讀 <div> 的文字內容。<button> 會以「按鈕」的形式顯示，向使用者傳達更強烈的信號，讓他們知道這是可互動的項目。
另請參閱「語意和螢幕閱讀器」。
如何修正
解決這個問題的最佳做法是完全避免自訂互動式控制項。例如，將模擬按鈕的 <div> 替換為實際的 <button>。
<button>Learn more</button>
如果您必須使用 <div>，請新增 role="button" 和 aria-pressed="false"。
<div role="button" aria-pressed="false">Learn more</div>
螢幕閱讀器現在會朗讀 <div> 的角色和互動狀態。
重要性
如果您從未使用過輔助技術，可能不知道內容在輔助技術使用者身上的表現如何。理想情況下，您可以與經常使用輔助技術的使用者交談，並分享他們對網站或網頁應用程式效能的意見。
另一種瞭解輔助技術使用者如何體驗內容的方法，就是使用輔助技術進行測試。使用螢幕閱讀器可讓您更清楚瞭解內容的標示方式，以及瀏覽時是否有任何障礙物。
資源
您可以查看自訂控制項具有 ARIA 角色稽核的原始碼