认识“包容性组件”：可访问、防弹的前端模式

如今，前端可访问性仍然有些神秘。 我们如何构建可访问的按钮和下拉菜单？ 对键盘友好的工具提示、选项卡和通知呢？ 还是包含手风琴、滑块、数据表和模态？ 让我们一起弄清楚。 认识包容性组件，这是我们用于构建完全可访问的数字产品的新手册。 下载免费示例 PDF (1.1 MB)。

关于本书

从本质上讲， Inclusive Components是一本详细、实用的手册，用于构建完全可访问的界面。 本书通过包容的视角研究了 12 种常见的界面模式——手风琴、表格、模式、通知、选项卡、切换以及介于两者之间的所有内容。 结果是我们每天创作、插入和使用的可访问且强大的组件。

多年来，专注于可访问性的经验丰富的前端开发人员 Heydon Pickering 一直在撰写有关可访问性解决方案的文章。 我们与 Heydon 合作编写了一本包含共同挑战和解决方案的书，这些年来他一直在精炼。

对于每个组件，深入探索都经过精心说明，所有解决方案都以防弹代码片段的形式提供，立即适用于您的工作。 奖励：您将学习如何在考虑到包容性设计的情况下构建自己的可访问组件——所有这些都在一本书中。 跳转到目录↓

332 页。 带有缝合装订和丝带页面标记的优质精装书。 该电子书以 PDF、ePUB、亚马逊 Kindle 的形式提供。 由海登编写和设计。 下载示例 PDF (1.1 MB)。

目录

每一章都处理一个单独的组成部分，说明不同和易受伤害的人可能会如何阅读和与之互动，以及如何更好地适应他们。 下载示例 PDF (1.1 MB)。

关于作者

Heydon Pickering (@heydonworks) 曾与 Paciello Group、BBC、Smashing Magazine 和 Bulb Energy 合作，担任设计师、工程师、作家、编辑和插画师。 他入围了 The Net Awards 的年度设计师。

Heydon 之前写过 Inclusive Design Patterns，销量超过 10,000 份。 这个头衔的收益被捐赠给了美国公民自由联盟和美国民主社会主义者，以帮助这些组织与法西斯主义作斗争并创建一个更具包容性的社会。

当被问及为什么决定写这本书时，Heydon 分享了以下内容：

“几年前，我对网页设计感到厌烦。 然后响应式设计出现了，给我带来了新的挑战。 它让我的生活和工作再次变得有趣。 然后我发现了网络可访问性的世界，我的热情再次被唤醒。 有些人似乎认为我做网络可访问性是因为我在道德上感到有义务，或者如果我不这样做我会感到内疚。

虽然我坚信各种各样的人都应该能够访问网络，但我也很感谢我遇到的网络可访问性挑战，并在本书中有所介绍，它们激励了我，并赋予了我的工作新的深度。

我写这本书是因为我想让你知道让你的界面更易于访问是多么有趣，以及你这样做的感觉是多么的有成就感。 感谢您阅读本文，希望您也阅读本书。”

感言

“Inclusive Components 通过真实世界的示例对可访问组件的开发进行了非常深入和彻底的解释。 Heydon Pickering 展示了几种替代方法并解释了每种方法的优缺点。 读书也是一种享受！”

— Artem Sapegin，Wayfair 前端开发人员

“Inclusive Components 充满了关于构建可访问 UI 的实用且全面的建议。 这是我在官方 WCAG 和 ARIA 文档之后的首选资源。 我发现它在构建我们的设计系统时非常有用！”

— Sarah Federman，高级前端开发人员

“Heydon 通过他在包容性组件方面的工作所取得的成就是一套实用、友好且平易近人的指南，它们不仅可以帮助您生成可访问的组件，还可以帮助您生成弹性和渐进的起点，帮助您构建更好的网站和 Web 应用程序一般的。 正是出于这个原因，我经常将这项工作描述为重要的学习材料。”

— Andy Bell，独立设计师和开发人员

为什么这本书可能适合你

魔鬼在细节中，通常您出于善意所做的事情会在不知不觉中施加可访问性障碍。 包容性组件适用于每个想要学习如何检测和解决工作中潜在的可访问性问题的前端开发人员。 本书将教你：

1. 如何使用<button>元素，如何将样式应用于切换按钮，以及如何标记它们。
2. 如何以包容的方式创建允许用户创建和删除内容的托管列表。
3. 如何解决和解决导航菜单和子菜单（又称“下拉菜单”）的可访问性问题。
4. 如何创建可访问且键盘友好的工具提示和切换提示。
5. 如何创建一个既可访问又可长期维护的“黑暗模式”主题。
6. 如何构建可访问的内容滑块以防止对运动敏感的人造成伤害。
7. 如何创建具有实时区域的包容性通知，以同时通过视觉和听觉渠道与您的用户交流。
8. 如何创建语义正确、响应迅速且可排序的数据表。
9. 如何在考虑性能和包容性设计的情况下构建可访问的对话框和模式对话框。
10. 如何创建和分组包容性卡片（例如预告片）。

技术细节

• 国际标准书号： 978-3-945749-82-1 （印刷版）
• 优质精装书，缝合装订，丝带页标记。
• 该电子书以 PDF、ePUB 和 Amazon Kindle 的形式从 Heydon 的网站提供。
• 来自德国的全球免费航空邮寄服务。 （检查您的交货时间。）
• 提供电子书和印刷版 + 电子书。

社区事务️

通过Inclusive Components ，我们试图创建一个非常专注的手册，其中包含适用的、长期有效的解决方案和策略，以创建可访问和包容的界面。

我们希望通过 Heydon 的书，您将能够在构建界面时做出更好的设计和编码决策。 也许它甚至会成为您每次需要构建这些常见 UI 组件之一时都会参考的参考书之一。

制作一本书需要相当多的时间，如果没有我们优秀社区的支持，我们无法完成。 非常感谢 Smashing 会员对我们冒险的持续支持。 因此，电子书对于Smashing Members来说是并且永远都是免费的。 此外，会员在购买印刷版时可以获得友好的折扣。

保持粉碎，感谢大家一直以来的支持！

更多粉碎书籍

推广最佳实践并为您提供应对日常编码和设计挑战的实用技巧一直是（并且将是）我们在 Smashing 所做的一切的核心。 在过去的几年里，我们很幸运能与一些来自网络社区的有才华、有爱心的人一起工作，将他们的丰富经验出版成经得起时间考验的书籍。 阿拉、亚当和安迪就是其中一些人。 你已经看过他们的书了吗？