瞭解無障礙功能

身心障礙者通常會使用哪些工具來瀏覽網頁？

請選取所有正確答案。

點字輸出裝置

螢幕閱讀器

擴充基座

作業系統設定

在網路上推動變革的有效方式為何？

請選取所有正確答案。

在社群媒體上抱怨。

提起訴訟。

直接與該公司的開發人員聯絡。

無障礙網頁內容指引的最高等級為何？

AAA 級

A Level

風暴

可操作性的例子有哪些？

請選取所有正確答案。

所有影片都有控制選項。

使用者有充足時間填寫表單。

所有有效元素都支援鍵盤和觸控螢幕。

使用簡單的語言。

下列何者是建立無障礙按鈕的最佳做法？

<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div>

<a id="saveChanges" aria-label="Some awesome article title">Go to shop</a>

<button id="saveChanges" type="button">Go to shop</button>

你的網站是多語言線上教科書，一個網頁上會顯示多種語言。如何以最佳方式告知輔助技術複製內容的語言？

為 <html> 設定主要 lang，並為含有其他語言內容的元素設定其他語言。

別擔心，AT 可以自動讀取每種語言。

在 <html> 元素中加入所有語言。例如 <html lang="en,lt,pl,pt">

在白色背景上，下列哪種 `:focus` CSS 樣式最容易辨識？

outline: 0.5rem solid yellow;

background-color:black;

outline: none; text-decoration:none; background:none;

text-decoration: dotted underline 2px blue;

略過連結的用途是什麼？

協助鍵盤使用者略過多餘或無用的連結群組。

協助鍵盤使用者略過不感興趣的內容。

使用 JavaScript 變更元素樣式的最佳方式為何？

使用 JavaScript 切換元素的類別，並將樣式新增至 CSS 樣式表。

使用 JavaScript 直接在 HTML 元素中套用動態樣式。

所有 JavaScript 動作是否都支援鍵盤使用者？

是，所有動作都會自動支援鍵盤使用者。

可以，但可能需要額外作業。

否，您只能使用語意 HTML 支援鍵盤使用者。

如何讓複雜圖片更容易存取？

請選取所有正確答案。

並在文章後續內容中加入說明。

新增完整說明的長篇替代文字。

在圖片中加入 aria-describedby 屬性。

如需較長的說明，請使用連結。

單獨使用顏色無法充分識別文件。還有哪些方式能幫助讀者辨識 UI 元素？

圖案

文字

圖示

以上皆是

我們可以建構哪些項目，反映動作的作業系統設定？

@prefers-reduced-motion

JavaScript 切換

為確保文案可讀性，文案和背景之間應一律使用高對比。

否

是

哪些字型最符合無障礙設計原則？

無障礙字體。

Arial 和 Verdana 等系統字型。

這不重要。

下列哪種表單輸入方式最容易存取？

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>

Email address: <input type="email" required>

<label>Email address: <input type="email" required></label>

<label>Email address: <input type="email" required autocomplete="email"></label>

無障礙元件是否一律可供使用者存取？

否，您必須先測試元件。

可以，您無須額外作業即可使用這些元件。

您應進行哪種測試，確保網站易於存取？

請選取所有正確答案。

自動化測試

手動測試

使用者測試

輔助技術測試

評估測試。

自動測試會偵測到哪些錯誤？

請選取所有正確答案。

具包容性的用詞

缺少替代文字

色彩對比問題

描述性表單標籤

ARIA 錯誤

哪些元素需要符合 WCAG 色彩對比標準？

圖示

標題

內文

以上皆是

測試無障礙功能時，最好使用哪種螢幕閱讀器？

沒有

JAWS

旁白

Orca

使用輔助技術進行測試的目的是什麼？

測試網站或應用程式是否有瑕疵。

體驗輔助技術使用者所見的內容。

身心障礙者通常會使用哪些工具來瀏覽網頁？

在網路上推動變革的有效方式為何？

無障礙網頁內容指引的最高等級為何？

可操作性的例子有哪些？

下列何者是建立無障礙按鈕的最佳做法？

你的網站是多語言線上教科書，一個網頁上會顯示多種語言。如何以最佳方式告知輔助技術複製內容的語言？

在白色背景上，下列哪種 :focus CSS 樣式最容易辨識？

略過連結的用途是什麼？

使用 JavaScript 變更元素樣式的最佳方式為何？

所有 JavaScript 動作是否都支援鍵盤使用者？

如何讓複雜圖片更容易存取？

單獨使用顏色無法充分識別文件。還有哪些方式能幫助讀者辨識 UI 元素？

我們可以建構哪些項目，反映動作的作業系統設定？

為確保文案可讀性，文案和背景之間應一律使用高對比。

哪些字型最符合無障礙設計原則？

下列哪種表單輸入方式最容易存取？

無障礙元件是否一律可供使用者存取？

您應進行哪種測試，確保網站易於存取？

自動測試會偵測到哪些錯誤？

哪些元素需要符合 WCAG 色彩對比標準？

測試無障礙功能時，最好使用哪種螢幕閱讀器？

使用輔助技術進行測試的目的是什麼？

在白色背景上，下列哪種 `:focus` CSS 樣式最容易辨識？