HTML 可访问性 1
在本任务中，我们将测试您对语义 HTML 的理解，以及为什么它对可访问性有益。给定的文本是一个带有操作按钮的信息面板，但 HTML 非常糟糕。
要完成任务，请更新标记以使用适当的语义 HTML。您不必过于担心重现完全相同的外观和文本大小，只要语义是好的即可。
html
<font size="7">Need help?</font> <br /><br />
If you have any problems with our products, our support center can offer you all
the help you need, whether you want:
<br /><br />
1. Advice choosing a new product
<br />
2. Tech support on an existing product
<br />
3. Refund and cancellation assistance
<br /><br />
<font size="5">Contact us now</font>
<br /><br />
Our help center contains live chat, email addresses, and phone numbers.
<br /><br />
<div class="button">Find Contact Details</div>
<br />
<font size="5">Find out answers</font>
<br /><br />
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
<br /><br />
<div class="button">Access Forums</div>
css
.button {
color: white;
background-color: blue;
border-radius: 10px;
width: 170px;
padding: 10px;
text-align: center;
}
点击此处显示解决方案
您完成的 HTML 应该看起来像这样
html
<h2>Need help?</h2>
<p>
If you have any problems with our products, our support center can offer you
all the help you need, whether you want:
</p>
<ul>
<li>Advice choosing a new product</li>
<li>Tech support on an existing product</li>
<li>Refund and cancellation assistance</li>
</ul>
<h3>Contact us now</h3>
<p>Our help center contains live chat, email addresses, and phone numbers.</p>
<button>Find Contact Details</button>
<h3>Find out answers</h3>
<p>
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
</p>
<button>Access forums</button>
加分项
- 仅使用
<button>，而不是<button class="button">（重复语义是不必要的），并更新 CSS 选择器以确保按钮仍然可以应用样式。 - 使用无序列表，而不是有序列表——项目列表实际上不需要有任何顺序。
HTML 可访问性 2
在第二个任务中，您有一个包含三个输入字段的表单。
完成任务
- 将输入字段与其标签进行语义关联。
- 假设这些输入字段将成为一个更大的表单的一部分，并将它们包装在一个元素中，将它们全部关联为一个相关的组。
- 为该组提供一个描述/标题，概括所有信息为个人数据。
html
<form>
<ul>
<li>
Name
<input type="text" name="name" />
</li>
<li>
Age
<input type="number" name="age" />
</li>
<li>
Email address
<input type="email" name="email" />
</li>
</ul>
</form>
css
form {
width: 400px;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
点击此处显示解决方案
您完成的 HTML 应该看起来像这样
html
<form>
<fieldset>
<legend>Personal data</legend>
<ul>
<li>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</li>
<li>
<label for="age">Age</label>
<input type="number" name="age" id="age" />
</li>
<li>
<label for="email">Email address</label>
<input type="email" name="email" id="email" />
</li>
</ul>
</fieldset>
</form>
HTML 可访问性 3
在此任务中，您需要将段落中的所有信息链接转换为良好、可访问的链接。
- 前两个链接只是指向常规网页。
- 第三个链接指向一个 PDF 文件，而且很大——8MB。
- 第四个链接指向一个 Word 文档，因此用户需要安装某种可以处理该文档的应用程序。
要完成任务，请根据上述描述相应地更新链接。
html
<p>
For more information about our activities, check out our fundraising page
(<a href="/fundraising" target="_blank">click here</a>), education page
(<a href="/education" target="_blank">click here</a>), sponsorship pack
(<a href="/resources/sponsorship.pdf" target="_blank">click here</a>),
and assessment sheets
(<a href="/resources/assessments.docx" target="_blank">click here</a>).
</p>
注意：起始代码中的链接设置了 target="_blank" 属性，因此当您单击它们时，它们会尝试在新标签页中打开链接的页面，而不是在同一个标签页中。这严格来说不是最佳实践，但我们在这里这样做是为了让页面不会在 MDN Playground 的输出 <iframe> 中打开，从而使您的示例代码消失！
点击此处显示解决方案
您完成的 HTML 应该看起来像这样
html
<p>
For more information about our activities, check out our
<a href="/fundraising" target="_blank">fundraising page</a>,
<a href="/education" target="_blank">education page</a>,
<a href="/resources/sponsorship.pdf" target="_blank"
>sponsorship pack (PDF, 8MB)</a
>, and
<a href="/resources/assessments.docx" target="_blank"
>assessment sheets (Word document)</a
>.
</p>
HTML 可访问性 4
在我们最后的 HTML 可访问性任务中，您将看到一个图像库，其中存在一些可访问性问题。您能修复它们吗？
- 标题图片存在可访问性问题，图库图片也存在。
- 您可以进一步改进标题图片，并使用 CSS 来实现它，以获得更好的可访问性。您将如何创建这样的解决方案？
更新代码以修复上述问题。
html
<header>
<img
src="https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png"
alt="A star that I use to decorate my page" />
<h1>Groovy images</h1>
</header>
<main>
<img
src="https://mdn.github.io/shared-assets/images/examples/ballon-portrait.jpg" />
<img
src="https://mdn.github.io/shared-assets/images/examples/grapefruit-slice.jpg" />
</main>
css
body {
width: 400px;
margin: 0 auto;
}
main img {
display: block;
width: 250px;
margin: 20px auto;
box-shadow: 5px 5px 0 black;
}
header {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
点击此处显示解决方案
可访问性问题是
- 标题图片是装饰性的，因此不需要 alt 文本。使用装饰性 HTML 图片的最佳解决方案是设置
alt=""，这样屏幕阅读器就不会读出任何内容——而不是描述或图片文件名。它不是内容的一部分。 - 图库图片需要 alt 文本，并且它们是内容的一部分。
更新后的 HTML 可能看起来像这样
html
<header>
<img
src="https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png"
alt="" />
<h1>Groovy images</h1>
</header>
<main>
<img
src="https://mdn.github.io/shared-assets/images/examples/ballon-portrait.jpg"
alt="a hot air balloon covered in a blue and while checked pattern" />
<img
src="https://mdn.github.io/shared-assets/images/examples/grapefruit-slice.jpg"
alt="A cross-section of the middle of a pink grapefruit" />
</main>
使用 CSS 背景图片来实现标题背景图片会更好。为此，您需要从标记中删除第一个 <img> 元素，并向 CSS 添加如下规则：
css
h1 {
background: url("https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png")
no-repeat left;
padding-left: 50px;
}