<h1 id="0401-wcag-網頁可用性規範"><a aria-hidden="true" class="anchor-heading" href="#0401-wcag-網頁可用性規範"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>0401-WCAG 網頁可用性規範</h1>
<h2 id="網頁的可用性和可讀性"><a aria-hidden="true" class="anchor-heading" href="#網頁的可用性和可讀性"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>網頁的可用性和可讀性</h2>
<p>當設計網頁或應用程式時，使用適當的顏色和對比度可以幫助提高可用性和可讀性，尤其對視力受損的使用者更加重要。</p>
<p>W3C 所提出的 Web Content Accessibility Guidelines (WCAG) 定義了三個級別的要求，</p>
<p>分別是 A、AA 和 AAA 級，針對顏色和對比度的要求如下：</p>
<ul>
<li>WCAG A 級</li>
</ul>
<p>所有非純裝飾的文本（例如，段落和標題）必須有足夠的對比度，以便在正常閱讀條件下閱讀。
對比度應達到至少 <code>4.5:1</code>，對於大型文本（大於14pt或加粗16pt）應達到至少 <code>3:1</code>。</p>
<ul>
<li>WCAG AA 級</li>
</ul>
<p>所有文本必須符合WCAG A級的要求。
對比度應達到至少 <code>4.5:1</code>，對於大型文本（大於14pt或加粗16pt）應達到至少 <code>3:1</code>。
預錄的音訊和視訊媒體必須有文字備註，以幫助視力障礙使用者了解其內容。</p>
<ul>
<li>WCAG AAA 級</li>
</ul>
<p>所有文本必須符合 WCAG AA 級的要求。
對比度應達到至少 <code>7:1</code>，對於大型文本（大於14pt或加粗16pt）應達到至少 <code>4.5:1</code>。
所有視訊媒體必須有閱讀傳譯，以幫助聽力障礙使用者了解其內容。
需要提供其他輔助功能，例如語音控制、鍵盤操作等，以提高可用性。</p>
<h2 id="w3c-測試與評估"><a aria-hidden="true" class="anchor-heading" href="#w3c-測試與評估"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>W3C 測試與評估</h2>
<p><a href="https://www.w3.org/WAI/test-evaluate/preliminary/">測試與評估 - W3C</a></p>
<ul>
<li>簡單檢查 - 第一次審查 (Easy Checks - A First Review)</li>
<li><a href="https://www.w3.org/WAI/ER/tools/">評估工具 (Evaluation Tools)</a></li>
<li>一致性評估、報告 (Conformance Evaluation, Reports)</li>
<li>結合專業知識 (Using Combined Expertise)</li>
<li>涉及使用者 (Involving Users)</li>
</ul>
<p>雖然 w3c <a href="https://www.w3.org/WAI/demos/bad/after/survey">Keyboard access and visual focus</a> 的地方做得很好，但 w3c 的網站沒有到 google lighthouse 100 xD
<img src="/assets/images/2023-04-01-22-13-26.png"></p>
<h2 id="a11y-accessibility"><a aria-hidden="true" class="anchor-heading" href="#a11y-accessibility"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>a11y (accessibility)</h2>
<p>以上規範都是為了可用性 (a11y) 這邊有關於是障朋友如何使用網頁的影片。</p>
<p><a href="https://www.youtube.com/watch?v=dEbl5jvLKGQ">視障者使用網頁閱讀軟體</a></p>
<p>來源: <a href="https://onward.justia.com/accessibility-for-websites-a11y/">Accessibility For Websites (A11y)</a></p>
<p>螢幕閱讀器可以下載這套 google 推薦的免費軟體 <a href="https://www.nvaccess.org/download/">NVDA</a> 來用。</p>
<h2 id="小結"><a aria-hidden="true" class="anchor-heading" href="#小結"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>小結</h2>
<p>A11y 得分高，通常 google SEO 也會不低。</p>
<p>但如果要有精美 UI 又要針對視障或聽障朋友開發網頁還蠻難的。因為同樣工作時間內要做比較多事。</p>
<p>按 tab 可以閱讀所有連結和文字內容可參考: <a href="https://www.president.gov.tw/">中華民國總統府網頁</a></p>
<p><img src="/assets/images/2023-04-01-23-17-53.png"></p>
<blockquote>
<p>但 A11y 分數不高阿...</p>
</blockquote>
<p><img src="/assets/images/2023-04-01-23-35-01.png"></p>
<blockquote>
<p>白宮的 100 分，而且按 tab 可以瀏覽到所有地方! 以後要做 a11y 絕對首先參考白宮，哈哈。</p>
</blockquote>
<p>以開發角度來看用 tab 鍵切換區塊，tab 是照著 html 的順序去讀的，一開始設計畫面就要想好 tab 的移動方向，然後工程師開發的同時也要檢查，同時也要用 Lighthouse 做檢查xD。更進階的話，要找使用者來測試並根據問題做調整。</p>

0401-WCAG 網頁可用性規範

Dendron 官網: https://wiki.dendron.so/