文章以戏谑方式探讨了网页无障碍设计中的常见建议：优先使用原生元素而非重新创建。作者通过重新创建按钮的示例，解释了为何从头构建组件是徒劳的，因为原生元素遵循用户预期的行为规律，而自定义实现难以完全满足这些期望。

好的，这是根据您的要求，对原文进行的中文重述：

标题： 从头创建一个按钮，就像创造宇宙一样复杂

核心观点： 文章通过详细演示从零开始用自定义元素模拟一个原生HTML按钮的复杂性，来论证为什么在Web开发中应优先使用语义化的原生HTML元素，而不是重新发明轮子。

主要内容：

文章开篇引用卡尔·萨根的名言，比喻从头创建按钮是一项艰巨的任务。作者指出，在Web无障碍（Accessibility）学习中，常听到“ARIA的第一条规则就是不要使用ARIA”以及“有原生元素就用原生元素”的建议，但很少有人解释背后的原因。

作者以“从零开始（大部分）重建一个按钮”为例，说明为何这是项西西弗斯式的任务。一个原生按钮需要满足一系列复杂的无障碍要求，包括：

1. 具有正确的角色（role）。
2. 拥有可访问的标签。
3. 能够获得焦点。
4. 支持鼠标、触摸、触控笔等多种点击方式。
5. 支持键盘（空格键和回车键）激活。
6. 具有表单相关属性（如type, form, name, value等），并能参与表单提交、重置和验证。
7. 支持disabled等状态。
8. 支持较新的API（如Popover API）。

文章随后逐步演示了如何用自定义HTML元素（<sagan-button>）来模拟这些功能：

• 基础结构： 创建一个自定义标签，并赋予其role="button"。
• 可访问标签： 处理图标按钮等场景，确保屏幕阅读器能正确读出按钮用途，而非无意义的emoji。
• 焦点管理： 通过tabindex="0"使元素可被键盘聚焦。
• 交互事件： 添加mouseup、touchend、pointerup等事件监听器。
• 键盘交互： 添加keyup和keydown事件监听器，分别处理空格键和回车键的激活逻辑。
• 状态管理： 实现disabled属性，同步更新aria-disabled和CSS状态。
• 表单交互： 实现type、form、formaction、formmethod等一系列表单相关属性，以及表单验证API（如checkValidity、setCustomValidity）。
• 事件监听器管理： 为了确保自定义的默认行为（如激活、表单提交）能按正确顺序执行，需要包装原生的addEventListener方法，并处理on*属性事件监听器。

文章指出，即使完成了上述所有工作，仍有一些API（如Popover API）未被覆盖。最终，这个自定义按钮组件的JavaScript代码接近500行，而一个原生<button>元素则完全不需要任何JavaScript代码。

结论：

作者强烈建议开发者使用语义化的HTML。除非绝对必要，否则不要重新发明轮子。这样做不仅工作量巨大，而且维护成本高，最终只能实现部分功能，得不偿失。

常见问题解答（FAQ）摘要：

• 问：如果只需要部分功能呢？ 答：即使只用部分功能，语义化HTML也更易于维护，且未来需要其他功能时，平台已原生支持。
• 问：如果原生元素无法满足品牌配色需求呢？ 答：现代浏览器中，样式化表单元素已不再是难题。如果样式化困难，应重新考虑设计模式，因为不可访问的页面可能面临法律风险。
• 问：如果框架对原生元素支持不好呢？ 答：应尽可能在代码中使用更多语义化HTML并进行测试。
• 问：如果AI生成的代码不可访问怎么办？ 答：文章建议参考相关解决方案。

根据评论内容，总结如下：

主要观点与论据：

1. 讽刺与批评当前网页开发实践（评分：无）

   • 评论1指出，这篇讽刺文章不幸地反映了许多网站的实际运作方式。
   • 评论8表示，非网页开发者误以为这是严肃建议，质疑语义化网页是否真的不好。
   • 关键引用：artisinal: "I love how this clearly satirical piece unfortunately is how a lot of websites operate."；leecommamichael: "I'm not a web guy, so I'm not really even sure why this is sarcastic, isn't semantic web good?"

2. 原生HTML元素缺失导致重复造轮子（评分：无）

   • 评论2认为，由于原生HTML元素不支持某些功能（如带服务器端过滤的组合框），开发者不得不重新实现。
   • 评论10指出，Apple/Webkit阻止对原生HTML元素的自定义扩展，否则可用简单代码实现。
   • 关键引用：mireq2: "Many re-implementations are result of missing native elements."；karhuton: "Apple/Webkit is blocking custom element extension on native HTML elements."

3. AI技术改变开发方式（评分：无）

   • 评论5认为，AI可在几分钟内完成此类工作，框架和依赖已被自定义“从头开始”创建取代。
   • 评论7提到，AI屏幕阅读器和代理将使无障碍合规问题在3年内变得无关紧要。
   • 关键引用：poisonborz: "Now with AI doing this work is a minute... We should readjust our sensibilities to that."；noduerme: "AI screen readers and agents are going to make the whole point moot."

4. 无障碍与可用性争议（评分：无）

   • 评论6指出，默认按钮比扁平设计快20%，但开发者仍偏好外观而非可用性。
   • 评论11批评，无障碍标准（如WCAG）有时导致不良结果，APCA对比度标准可能更优。
   • 关键引用：dlcarrier: "a default button is about 20% faster than the flat nonsense... we still prefer looks over usability."；nxc18: "well-meaning accessibility folks to drive to bad outcomes to meet some standard."

5. 技术实现细节（评分：无）

   • 评论13指出文章中的事件处理bug：onpointerup与mouse/touch事件不互斥，可能导致按钮动作触发两次。
   • 评论14幽默地引用经典“从零开始造按钮”梗。
   • 关键引用：pverheggen: "The implementation assumes that onpointerup is mutually exclusive... the button action will fire twice."；otikik: "If you wish to make a button from scratch."

平衡性总结： - 支持方：认为文章讽刺了过度工程化，强调原生HTML的重要性。 - 反对方：指出原生元素不足，AI可简化开发，无障碍标准存在缺陷。 - 中立：关注技术细节和实际实现问题。