无障碍基础
为图像添加替代文本，让网页更易于使用
无障碍基础 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 4 节课。
让网页更易于访问
可访问性基础
欢迎来到下一课！今天，我们将学习如何让所有人都能访问您的网页，包括残障人士。可访问性是构建易用网站的重要组成部分。
什么是可访问性？
可访问性确保所有用户，无论能力如何，都能与您的网页互动。这包括：
- 有视觉或听觉障碍的人。
- 使用屏幕阅读器或其他辅助技术的人。
- 使用键盘而不是鼠标浏览网站的人。
让我们学习如何让您的网页更具包容性！
为图片添加替代文本
在 <img> 标签中使用 alt 属性描述图片。这可以帮助屏幕阅读器向视障用户传达图片内容。
示例：
<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />
使用语义化 HTML
语义化标签（例如 <header>、<nav> 和 <footer>）可以帮助辅助技术理解网页结构。
示例：
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<footer>
<p>© 2024 My Blog</p>
</footer>
键盘导航
请确保所有交互元素（例如链接和按钮）都可以使用 Tab 键访问。使用 tabindex 属性控制制表顺序。
示例：
<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>
为输入框提供标签
使用 <label> 标签为输入字段提供清晰的说明。使用 for 属性将标签与输入框关联起来。
示例：
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
颜色对比度
确保文本与背景颜色之间有足够的对比度，让所有人都能轻松阅读您的内容。使用在线工具检查颜色对比度比例。
提示：高对比度可以提高视力障碍用户的可读性。
示例：
<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>
亲自试一试
让我们创建一个无障碍表单。下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>Accessible Form</title>
</head>
<body>
<h1>Sign Up</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<button type="submit">Sign Up</button>
</form>
</body>
</html>
无障碍回顾
做得很好！
恭喜您！您已经学会了如何让网页对所有人都更加易用。无障碍设计是现代网页开发的重要组成部分。在下一课中，我们将学习如何验证您的 HTML 代码，确保它符合网页标准。准备好进一步提升您的技能吧！
常见问题解答
「无障碍基础」课时是免费的吗？
是的 — 「无障碍基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 4 节课。
「无障碍基础」这节课中我会学到什么？
为图像添加替代文本，让网页更易于使用 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「无障碍基础」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。