如果你看过《什么是无障碍，以及为什么它很重要》这节课，你就会知道数字无障碍是一个广义术语，意味着确保尽可能多的人能够使用网络。
这涉及法律和商业层面的影响，但更重要的是，无障碍指南能保证每个人都能获得更好的浏览体验。
提供无障碍主题、插件或网站最简单的方法就是从一开始就考虑它。在规划阶段就将其纳入，并教育同事（和客户）。这样，你不仅能尽早发现错误，实际上还能预防许多错误。
在本课中，你将学习无障碍 HTML 的基础知识，以及如何将它们应用到你的 WordPress 主题中。
基础知识
HTML 既强大又易于访问。
自己试试看：打开你的代码编辑器，创建一个有效的 HTML 页面——正确标记了地标、标题、文本、按钮、链接、表单等。
如果你愿意，可以使用下面的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a>
<li><a href="#about">About</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<h2>Home</h2>
<p>This is the home section where introductory content can be found.</p>
<form name="Just a button">
<button type="button">Click Me!</button>
</form>
</article>
<article id="about">
<h2>About</h2>
<p>This section contains information about the website or the person/company behind it.<p><a href="https://example.com">Visit their full profile</a></p>
</article>
<article id="services">
<h2>Services</h2>
<p>Details about the services offered can be found here.</p>
</article>
<article id="contact">
<h2>Contact</h2>
<form action="#" method="post" name="contact" autocomplete="on">
<fieldset>
<legend>Let's chat</legend>
<div><label for="name">Name:</label></div>
<div><input type="text" id="name"></div>
<div><label for="email">Email:</label></div>
<div><input type="email" id="email"></div>
<div><label for="message">Message:</label></div>
<div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
<div><input type="submit" value="Submit"></div>
</fieldset>
</form>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
现在，通过在线无障碍检查器（如 Web Accessibility Checker）运行这段代码，你会注意到它检测到零个无障碍问题。
问题通常出现在你添加样式、脚本或媒体资源之后。作为现代 WordPress 主题的开发者，这些正是你会用到的技术——基于 React 的区块、PHP 注入的模板，以及从 theme.json 编译而来的 CSS。
关键在于你在编码和设计时要时刻注意无障碍性。
让我们探讨一些开发者和设计师在创建自定义区块、模板和模板部件时可以采用的技巧和最佳实践。
语义化 HTML
不要用 <div> 元素包裹所有内容，而是利用 HTML 中具有语义意义的元素。
这将为你省去那些为了把轮子重新发明成矩形而采用的变通方法。
地标
地标是一种定义页面结构的方式。它们帮助屏幕阅读器更轻松地浏览内容。
例如，与其只定义一堆带有类的 div：
<div class="header">
<h1>Welcome to My Website</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">Home</a>
<li><a href="#about">About</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
你可以为相关部分使用地标。
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a>
<li><a href="#about">About</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
如果你在站点编辑器中设计或构建主题，也可以在那里设置地标。
要将组、行和堆叠区块定义为内容分区元素，请选择该区块，打开区块设置，然后展开高级部分。
向下滚动，根据区块的功能和位置，将HTML 元素设置为 header、main、section、article、aside 或 footer。
标题
在模板中添加标题时，始终按正确顺序使用标题，从 H2 开始，依次递减到 H6。
在站点编辑器中，点击文档概览 > 大纲，检查你是否跳过了某个级别，或者一切是否设置正确。
按钮与链接
在设计用户操作时，考虑以下关于使用按钮或链接的要点：
- 如果你希望访客执行某个操作，请使用
button 元素。
- 当你希望他们导航到另一个页面时，请使用
anchor 元素（<a>）。
- 如果链接应该看起来像按钮，例如在落地页上的行动号召按钮，那么就用 CSS 来设置样式。
表单
如果你在主题中设计任何表单，请遵循以下指南：
始终将表单包裹在 form 元素中。
在 input 字段上，始终设置适当的类型和匹配的属性。例如，将输入类型定义为 tel，会在移动设备上显示数字键盘。
<code><input type="tel" name="phone" id="phone" required>
不要依赖占位符文本来告诉用户输入字段的用途，始终提供可访问的标签。
对任何搜索表单使用 search 元素。
在设计登录表单时，你可以使用 autocomplete 属性来帮助密码管理器填写表单。
<code><input type="password" autocomplete="current-password">
默认情况下，大多数浏览器会在元素获得焦点时显示焦点环。
如果你想更改这些焦点环的显示方式，请使用 :focus-visible 伪类，并且不要完全移除焦点环。
颜色
务必创建具有足够对比度的无障碍调色板。
在编辑模板时，当你设置的文本和背景颜色组合未能满足要求时，WordPress 会发出警告。
不要仅使用颜色来传达信息。例如，链接应通过颜色以外的其他方式标记，焦点状态也是如此。如有疑问，请参考默认的 HTML 链接和焦点样式，并遵循它们。
排版
使用相对单位（如 rem）设置合适的字体大小，尽量避免使用 px。
将内容宽度限制在 50 到 70 个字符之间；字符单位或 ch 单位非常适合此用途。
根据字体大小使用适当的行间距。
尊重用户偏好
媒体查询是响应式设计的基石，有助于创造更好的用户体验。
某些媒体查询类型（如 prefers-color-scheme 或 prefers-reduced-motion）明确以无障碍性为驱动，但还有 pointer、hover 或 scripting 等类型，可根据用户设备调整组件的行为。
ARIA 的变通方法
ARIA 是 可访问的富互联网应用程序 框架的缩写，常被引用为一种快速让 HTML 内容对屏幕阅读器更友好的方法。
然而，ARIA 最重要的规则是：只有在绝对必要时才使用它。理想情况下，你应该始终使用 HTML 功能来提供屏幕阅读器所需的语义，以便向用户说明正在发生什么。
误用的 aria 属性会使事情变得更不无障碍，因此除非你无法控制 HTML 或需要处理动态生成的内容，否则请避免使用它们。
有关更多信息，请务必访问 MDN 的 WAI-ARIA 基础知识部分。
总结与进一步阅读
无障碍性是一项永无止境的工作。即使是一个小小的改进，也能为你的网站访客带来巨大变化，而且它没有任何负面影响。它绝不会让他们的体验变得更糟。
要了解更多信息，请访问 W3C 网络无障碍倡议（WAI）的教程部分。