这个标题是对卡尔·萨根一句名言的幽默讽刺（外部链接）。它与我们今天进行的思维练习非常契合。当我们开始学习网络无障碍时，通常听到的第一件事是：ARIA的第一条规则是不要使用ARIA。还有：如果有原生元素，请使用该元素，而不是从头重新创建元素。但人们从来没有解释为什么要给出这样的建议，以及为什么我们不应该从头开始重新创建东西。我将尝试解释为什么从头开始重新创建某些组件通常是一个西西弗斯的任务（外部链接），以（主要）从头重新创建一个按钮为例。 牛顿的用户体验法则 原生元素对其行为有一套期望。它们遵循一些用户体验法则。（看看我做了什么？哈哈）用户在你的应用程序中期望以特定方式与元素交互，并期望该元素会以特定方式表现。作为参考，我们将使用以下链接作为按钮的基础定义、行为以及用户期望如何与之交互。 MDN上的按钮角色（外部链接） APG上的按钮模式（外部链接） ARIA规范上的按钮角色（外部链接） MDN上的按钮元素（外部链接） 网络内容无障碍指南（WCAG）2.2（外部链接） 这些参考资料为我们提供了以下要求列表。与这些项目一起，列出了代表该要求的WCAG成功标准（SC）。 具有按钮角色。（SC 4.1.2（外部链接）） 拥有可访问的标签。（SC 4.1.2（外部链接），和SC 1.3.1（外部链接）） 可聚焦。（SC 2.4.3（外部链接），和SC 2.4.7（外部链接）） 通过鼠标点击激活。 通过触摸激活。 通过手写笔和其他指针设备激活。 在聚焦时通过空格和回车键激活。（SC 2.1.1（外部链接）） 具有类型，并且：提交表单；重置表单；或者在处理相关表单时不执行任何操作。 在表单中参与命名和值，以及表单属性。（SC 4.1.2（外部链接）） 参与表单验证。（SC 3.3.1（外部链接）） 支持像禁用这样的状态。（SC 4.1.2（外部链接）） 支持新的API如弹出层API（外部链接）、调用命令API（外部链接）或兴趣调用者API（外部链接）。 如果这还没有让你害怕尝试从头实现一个按钮，那就系好安全带吧，因为我们将逐步查看这个列表，希望它能够劝阻你重新创建元素。 自定义元素核心 我们的自定义元素核心将是一个新标签。我们这样做是因为自定义标签（外部链接）默认表现得像<span>。这为我们提供了一个“空状态”来开始工作。然后我们添加一个按钮角色。现在它将在可访问性树中被曝光为一个按钮。 注意：由于两个原因，元素的样式会留给读者自己练习：这会使这篇博客文章的内容变得不必要的冗长。自定义元素的样式可以随意设置，没有一般限制。 <sagan-button role="button">从头开始的按钮</sagan-button> 目前为止一切顺利…… ARIA的周期表 我们的按钮还应该具有一个可访问的标签，该标签可以由开发者提供，或者作为最后的后备方案由元素内容派生出来。这里的问题特别是图标按钮。如果我们将我们的标记更新为如下内容： <sagan-button role="button">💩</sagan-button> 屏幕阅读器会将其读取为类似“按钮，屎堆”的内容。 这里有几个问题： 表情符号会被大声朗读，按照它们的完整法定名称（外部链接）。并非所有浏览器/操作系统都支持所有表情符号。它可能会显示为替换字符（外部链接）。这对用户没有任何提示，说明该按钮的功能。它开始不符合WCAG SC 2.4.6（外部链接）和SC 4.1.2（外部链接）。 为了解决这个问题，我们可以为按钮添加一个标签，并将表情符号标记为呈现性和/或隐藏，以便它不会被屏幕阅读器宣布。代码如下： <sagan-button role="button" aria-label="数据共享选项"> <span role="presentation" aria-hidden="true">💩</span> </sagan-button> 可聚焦的宇宙 组件现在看起来像一个按钮，也被宣布为按钮，但还不能与之交互。第一步是让元素可以通过键盘聚焦，为此，我们需要添加tabindex属性。这将使元素成为页面的标签顺序的一部分（外部链接），这意味着当用户按下Tab键时，他们将能够导航并到达该元素。 <sagan-button role="button" aria-label="数据共享选项" tabindex="0"> <span role="presentation" aria-hidden="true">💩</span> </sagan-button> 此处属性的值为0，以便元素将遵循页面的现有顺序，任何正值将使其跳到其他元素前面，并使页面的焦点全部移动，因此不建议使用（外部链接）。