測試你的技能：CSS 和 JavaScript 無障礙性

在第一個任務中，您將看到一個連結列表。但它們的無障礙性非常差——您無法真正識別出它們是連結，也無法知道使用者當前關注的是哪個連結。

我們希望您假設現有的使用a選擇器的規則集是由某個 CMS 提供的，您無法更改它——相反，您需要建立新的規則，使連結看起來像連結，並且使用者能夠辨別它們在列表中的位置。

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

在接下來的任務中，您將看到一些簡單的內容——只有標題和段落。文字的顏色和大小存在無障礙性問題；我們希望您

1. 解釋問題是什麼，以及哪些指南規定了顏色和大小的允許值。
2. 為顏色和字型大小選擇新的值來解決問題。
3. 使用這些新值更新 CSS 以解決問題。
4. 測試程式碼以確保問題已解決。解釋您使用哪些工具或方法來選擇新值並測試程式碼。

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

在我們的最後一個任務中，您需要進行一些 JavaScript 操作。我們有一個簡單的應用程式，它顯示了一個動物名稱列表。點選其中一個動物名稱，將在列表下方的一個框中顯示該動物的詳細描述。

但它不是非常無障礙——在當前狀態下，您只能用滑鼠操作它。我們希望您在 HTML 和 JavaScript 中新增內容，以使其也支援鍵盤操作。