10.1 Accessibility
可達性 (accessibility) 在現代網頁設計中是很重要的一環。它確保所有用戶，包括具有特殊需求的人，能夠輕鬆地與網頁進行互動。
實現這一目標的關鍵工具之一是 ARIA 屬性 (Accessible Rich Internet Applications)，它們改善了網頁內容的可達性，使其對諸如螢幕閱讀器等輔助技術更為清晰易懂。
什麼是 ARIA？
ARIA (Accessible Rich Internet Applications) 是一組特殊屬性，可以添加到 HTML 元素中以提高其可達性。這些屬性提供了關於元素結構和行為的額外資訊，幫助輔助技術更好地解釋和互動網頁內容。
改善文本可讀性的主要 ARIA 屬性：
aria-label 屬性
aria-label 屬性用於向元素提供一個文本標籤，這個標籤將由螢幕閱讀器讀取。當元素沒有可見的標籤或需要更詳細的描述時，此屬性特別有用。
使用範例：
<button aria-label="關閉對話框">X</button>
aria-labelledby 屬性
aria-labelledby 屬性使用標籤的 id 來連接元素與頁面上的另一個標籤。這在需要將元素與已存在的標籤連接以提供上下文和描述時非常有用。
使用範例：
<h2 id="section-title">章節標題</h2>
<p aria-labelledby="section-title">這是與章節標題相關的段落文本。</p>
aria-describedby 屬性
aria-describedby 屬性將元素與包含描述的其他一個或多個元素進行連接，使用它們的 id。此屬性對於提供給元素額外的資訊或上下文非常有用。
使用範例：
<input type="text" aria-describedby="input-description">
<p id="input-description">請輸入你的名字。</p>
10.2 Role
role 屬性
role 屬性定義了元素的角色，指示輔助技術如何解釋該元素。有很多角色，如 button、navigation、main、article 等等。
使用範例：
<nav role="navigation">
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#contact">聯繫方式</a></li>
</ul>
</nav>
aria-live 屬性
aria-live 屬性用於動態更新的內容。它告訴螢幕閱讀器元素中的內容已更改，需要被讀出來。值包括 off、polite 和 assertive。
使用範例：
<div aria-live="polite">
<p>這裡將顯示重要信息。</p>
</div>
aria-hidden 屬性
aria-hidden 屬性指示輔助技術該元素是否應對用戶可達。值 true 將元素從輔助技術中隱藏，而值 false 則使其可達。
使用範例：
<div aria-hidden="true">
<p>這段文本將對螢幕閱讀器隱藏。</p>
</div>
aria-expanded 屬性
aria-expanded 屬性指示元素是否展開或摺疊。它經常用於控制元素，如"手風琴"和下拉選單。
使用範例：
<button aria-expanded="false" aria-controls="menu">選單</button>
<ul id="menu" hidden>
<li><a href="#item1">項目 1</a></li>
<li><a href="#item2">項目 2</a></li>
<li><a href="#item3">項目 3</a></li>
</ul>
aria-controls 屬性
aria-controls 屬性指示當前元素控制哪個元素。它與 aria-expanded 屬性等一起使用，用於創建互動式控制元素。
使用範例：
<button aria-controls="content" aria-expanded="false">顯示/隱藏</button>
<div id="content" hidden>
<p>隱藏內容。</p>
</div>
GO TO FULL VERSION