CSS 可访问性 1
在第一个任务中，您会看到一个链接列表。但是，它们的可用性很差——没有任何方法可以真正区分它们是链接，或者用户当前聚焦的是哪个链接。请假设现有的带有 a 选择器的规则集是由某个 CMS 提供的，并且您无法更改它。
要完成此任务，请创建新规则，使链接的外观和行为类似于链接，并让用户能够区分列表中当前聚焦的链接。
html
<ul>
<li><a href="">Animals</a></li>
<li><a href="">Computers</a></li>
<li><a href="">Diversity and inclusion</a></li>
<li><a href="">Food</a></li>
<li><a href="">Medicine</a></li>
<li><a href="">Music</a></li>
</ul>
css
a {
text-decoration: none;
color: #666666;
outline: none;
}
/* Don't edit the above code! */
/* Add your code here */
点击此处显示解决方案
您完成的 CSS 可能看起来像这样
css
/* ... */
/* Don't edit the above code! */
li a {
text-decoration: underline;
color: rgb(150 0 0);
}
li a:hover,
li a:focus {
text-decoration: none;
color: red;
}
CSS 可访问性 2
在下一个任务中，您会看到一段简单的内容——只有标题和段落。文本的颜色和大小存在可访问性问题，我们希望您能修复它们。
完成任务
- 思考存在哪些问题，以及哪些指南规定了颜色和大小的可接受值。
- 更新 CSS 以使用新的颜色和字体大小值来解决问题。
- 测试代码以确保问题已得到解决。解释您使用哪些工具或方法来选择新值和测试代码。
html
<main>
<h1>I am the eggman</h1>
<p>
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm
hempen halter furl.
</p>
<h2>They are the eggman</h2>
<p>
Swab barque interloper chantey doubloon starboard grog black jack gangway
rutters.
</p>
<h2>I am the walrus</h2>
<p>
Deadlights jack lad schooner scallywag dance the hempen jig carouser
broadside cable strike colors.
</p>
</main>
css
/* Edit the CSS to fix the a11y problems */
main {
padding: 20px;
background-color: red;
}
h1,
h2,
p {
color: #999999;
}
h1 {
font-size: 2vw;
}
h2 {
font-size: 1.5vw;
}
p {
font-size: 1.2vw;
}
点击此处显示解决方案
- 问题是
- 根据 WCAG 标准 1.4.3 (AA) 和 1.4.6 (AAA)，颜色对比度不可接受。
- 文本大小使用
vw单位，这意味着大多数浏览器无法缩放。 WCAG 1.4.4 (AA) 指出文本应该可以缩放。
- 要修复代码，您需要
- 选择一组对比度更好的背景色和前景色。
- 使用不同的单位来调整文本大小（例如
rem或px），甚至可以使用vw和其他单位的组合来实现，如果您希望文本可缩放但仍相对于视口大小。
- 用于测试
- 您可以使用像 aXe、 Firefox Accessibility Inspector 这样的工具，或者像 WebAIM Contrast Checker 这样的独立网页工具来测试颜色对比度。
- 对于文本缩放，您需要先在浏览器中加载示例，然后尝试进行缩放。在 Safari 中，
vw单位的文本可以缩放，但在 Firefox 或基于 Chromium 的浏览器中则不行。
对于更新的代码，这样做可以修复颜色对比度
css
main {
padding: 20px;
background-color: red;
}
h1,
h2,
p {
color: black;
}
这样做可以解决字体大小问题
css
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1.2rem;
}
或者这样做，如果您想实现更巧妙的功能，提供可缩放的视口相对文本
css
h1 {
font-size: calc(1.5vw + 1rem);
}
h2 {
font-size: calc(1.2vw + 0.7rem);
}
p {
font-size: calc(1vw + 0.4rem);
}
JavaScript 可访问性 1
在我们最后的可用性任务中，您需要编写一些 JavaScript。我们有一个应用程序，它显示一个动物名称列表。点击其中一个动物名称会在列表下方的框中显示该动物的详细描述。
但它并不十分易于访问——目前只能用鼠标操作。我们希望您添加一些 HTML 和 JavaScript 来使其也支持键盘操作。
html
<section class="preview">
<div class="animal-list">
<h1>Animal summaries</h1>
<p>
The following list of animals can be clicked to display a description of
that animal.
</p>
<ul>
<li
data-description="A type of wild mountain goat, with large recurved horns, found in Eurasia, North Africa, and East Africa.">
Ibex
</li>
<li
data-description="A medium-sized marine mammal, similar to a manatee, but with a Dolphin-like tail.">
Dugong
</li>
<li
data-description="A rare marsupial, which looks rather like a tiny kangaroo, measuring around 50 to 75 centimeters.">
Quokka
</li>
</ul>
</div>
<div class="animal-description">
<h2></h2>
<p></p>
</div>
</section>
js
const listItems = document.querySelectorAll("li");
const descHeading = document.querySelector(".animal-description h2");
const descPara = document.querySelector(".animal-description p");
listItems.forEach((item) => {
item.addEventListener("mouseup", handleSelection);
});
function handleSelection(e) {
const heading = e.target.textContent;
const description = e.target.getAttribute("data-description");
descHeading.textContent = heading;
descPara.textContent = description;
}
点击此处显示解决方案
- 首先，您需要将
tabindex="0"添加到列表项中，使其可以通过键盘聚焦。 - 然后，您需要在
forEach()循环中添加另一个事件监听器，以便在选择列表项时代码能响应按键。最好让它响应特定按键，例如“Enter”，在这种情况下，以下内容可能比较合适
js
item.addEventListener("keyup", (e) => {
if (e.key === "Enter") {
handleSelection(e);
}
});