如果您看过什么是可访问性，以及为什么它很重要？这节课，那么您就知道，数字可访问性是一个广泛的概念；其核心是确保尽可能多的人能够使用网络。
除了法律和商业方面的因素之外，最重要的是，遵循可访问性指南可以让所有人的浏览体验变得更好。
创建可访问主题、插件或网站的最简单方法，就是从一开始就考虑可访问性。在规划阶段就将其纳入其中，并让同事（以及客户）了解相关知识。这样，您不仅能在一开始就发现错误，还能提前避免许多错误。
在本课中，您将学习可访问 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>我的网站</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a>
<li><a href="#about">关于</a>
<li><a href="#services">服务</a>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<h2>首页</h2>
<p>这是首页部分，您可以在这里找到介绍性内容。</p>
<form name="Just a button">
<button type="button">点击我！</button>
</form>
</article>
<article id="about">
<h2>关于</h2>
<p>本部分包含有关网站或其背后的个人/公司的信息。</p>
<p><a href="https://example.com">查看他们的完整资料</a></p>
</article>
<article id="services">
<h2>服务</h2>
<p>您可以在这里找到所提供服务的详细信息。</p>
</article>
<article id="contact">
<h2>联系</h2>
<form action="#" method="post" name="contact" autocomplete="on">
<fieldset>
<legend>让我们聊聊</legend>
<div><label for="name">姓名：</label></div>
<div><input type="text" id="name"></div>
<div><label for="email">电子邮件：</label></div>
<div><input type="email" id="email"></div>
<div><label for="message">消息：</label></div>
<div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
<div><input type="submit" value="提交"></div>
</fieldset>
</form>
</article>
</main>
<footer>
<p>© 2024 我的网站</p>
</footer>
</body>
</html>
现在，使用类似Web Accessibility Checker的在线工具检查代码，看看是否显示任何可访问性问题。
问题通常会在您添加样式、脚本或媒体资源时开始出现。作为现代 WordPress 主题开发者，您主要会使用这些技术——例如基于 React 的区块、使用 PHP 创建的样式以及从 theme.json 生成的 CSS。
关键是在编码和设计时保持对可访问性的意识。
让我们看看一些技巧和最佳实践，开发者和设计师在创建自定义区块、模板和样式时可以遵循这些做法。
语义化 HTML
不要把所有内容都用 <div> 元素包裹起来，而应使用 HTML 中具有语义或含义的元素。
这可以帮助您避免不必要的复杂代码，以及“重新发明轮子”之类的麻烦。
地标
地标是定义页面结构的一种方式。它们可以帮助屏幕阅读器更轻松地浏览内容。
例如，不要只使用几个 <div> 及其类：
<div class="header">
<h1>欢迎来到我的网站</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</div>您可以为相关部分使用地标。
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>如果您通过站点编辑器设计或创建主题，也可以在那里设置地标。
要将 Group、Row 和 Stack 区块定义为内容分区元素，请选择区块，打开Settings ，然后展开Advanced 部分。
向下滚动，并根据区块的作用和位置，在 HTML ELEMENT中选择 header、main、section、article、aside 或 footer。
标题
向模板添加标题时，请始终按正确顺序使用标题，从 H2 开始，依次直到 H6。
在站点编辑器中，点击Document Overview > Outline，检查是否遗漏了某个级别，或一切是否都处于正确状态。
按钮与链接
设计用户操作时，请考虑以下有关使用按钮和链接的事项：
- 如果您希望用户完成某项操作，请使用 button 元素。
- 如果您希望用户导航到其他页面，请使用锚元素（<a>）。
- 如果需要让链接看起来像按钮，例如着陆页上的行动号召，请使用 CSS 为其设置样式。
表单
如果您在主题中设计表单，请遵循以下指南：
始终将表单放在 form 元素中。
始终为输入字段设置正确的 type 和匹配的属性。例如，如果将输入的 type 定义为 tel，移动设备上就会显示数字键盘。
<input type="tel" name="phone" id="phone" required>不要仅依赖占位符文本来说明输入字段的用途；始终使用可访问的标签。
对于任何搜索表单，请使用 search 元素。
设计登录表单时，可以使用 autocomplete 属性帮助密码管理器填写表单。
<input type="password" autocomplete="current-password">默认情况下，大多数浏览器会在获得焦点的元素上显示焦点环。
如果您想更改焦点环的显示方式，请使用 :focus-visible 伪类，但不要完全移除焦点环。
颜色
创建具有足够对比度的可访问颜色调色板。
编辑模板时，如果使用的文本颜色和背景颜色对比度不足，WordPress 会向您发出警告。
不要仅通过颜色传达信息。例如，不要只用颜色标记链接，也要以相同方式定义焦点状态。如有疑问，请查看默认的 HTML 链接和焦点样式，并遵循这些样式。
排版
设置字体大小时，请使用 rem 等相对单位，避免使用 px。
将内容宽度限制在 50 到 70 个字符之间；character 或 ch 单位非常适合这一用途。
根据字体大小使用足够的行间距。
优先考虑用户偏好
响应式设计的基础是媒体查询，它有助于改善用户体验。
某些媒体查询（如 prefers-color-scheme 或 prefers-reduced-motion）与可访问性直接相关，而使用 pointer、hover 或 scripting 等查询，则可以根据设备调整组件的行为。
ARIA 解决方案
ARIA 是Accessible Rich Internet Applications framework的缩写，通常被认为是让 HTML 内容对屏幕阅读器更加可访问的一种快捷方式。
不过，使用 ARIA 最重要的规则是，只有在确实需要时才使用它。理想情况下，应始终使用 HTML 自身的功能向屏幕阅读器传达内容的含义。
错误使用 ARIA 属性会降低可访问性，因此除非您无法控制 HTML 或需要处理动态内容，否则应避免使用这些属性。
如需更多信息，请参阅 MDN 的WAI-ARIA 基础知识。
总结与延伸阅读
可访问性是一个持续的过程。即使是很小的改进，也能为您网站的访客带来巨大的变化，而且不会产生任何负面影响。它绝不会让用户体验变差。
如需进一步学习，请参阅 W3C Web Accessibility Initiative (WAI) 教程。