測試你的技能：HTML 可訪問性

此技能測試的目的是評估您是否理解了我們的 HTML：可訪問性的良好基礎 文章。

注意：您可以在此頁面上的互動式編輯器或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的 溝通渠道之一聯絡我們。

HTML 可訪問性 1

在此任務中，我們將測試您對文字語義的理解，以及為什麼它們有利於可訪問性。給定的文字是一個帶有操作按鈕的簡單資訊面板，但 HTML 非常糟糕。

我們希望您使用適當的語義 HTML 進行更新。您無需過多擔心重現完全相同的樣式和文字大小，只要語義良好即可。

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。

HTML 可訪問性 2

在第二個任務中，您有一個包含三個輸入欄位的表單。您需要

  • 在語義上將輸入與其標籤關聯。
  • 假設這些輸入將是更大表單的一部分，並將它們包裝在一個元素中，將它們全部關聯在一起作為一個相關的組。
  • 為該組提供一個描述/標題，總結所有資訊作為個人資料。

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。

HTML 可訪問性 3

在此任務中，您需要將段落中的所有資訊連結轉換為良好的、可訪問的連結。

  • 前兩個連結只是指向常規網頁。
  • 第三個連結指向 PDF，並且檔案很大——8MB。
  • 第四個連結指向 Word 文件，因此使用者需要安裝某種可以處理該文件的應用程式。

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。

HTML 可訪問性 4

在我們的最後一個 HTML 可訪問性任務中，您將獲得一個簡單的圖片庫，它存在一些可訪問性問題。您可以修復它們嗎？

  • 標題圖片存在可訪問性問題，相簿圖片也存在。
  • 您可以進一步處理標題圖片，並使用 CSS 實現它，以獲得更好的可訪問性。為什麼這樣更好，解決方案是什麼樣的？

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。