我在 An Event Apart 2022 丹佛会议上的一些收获

An Event Apart 2022 丹佛会议 昨天结束了。虽然这次我无法参加所有三天，但我确实赶上了昨天的大事件——太棒了。我不是很社交或外向，但这至少是我几年来参加的第一个会议，看到大家亲自见面非常令人耳目一新。

我当然做了笔记！我想我会在这里发布它们，因为分享是关爱。至少，这是我六岁的女儿昨天晚上让我吃甜点时告诉我的。

我将按演讲者进行分类。警告：我都是手写笔记，而且是一个很有视觉感的人，所以我的笔记往往不如大多数人那么...结构化。而且这些笔记只是我注意到的一些东西。它们甚至可能不是演示者主要的想法，但它们引起了我的注意！

Chris Coyier：网站现在很棒

Chris 之前做过这个演讲（我们上周才链接到它），但这次大幅扩展了它，特别是在 **容器相对单位** 上的细节，这些单位与 clamp() 结合使用，可以实现更精确的响应性，因为这些值相对于容器而不是视窗。因此，您知道我们经常将视窗宽度 (vh) 单位用于流畅的文字吗？

font-size: clamp(1rem, 1rem + 2vw, 2rem);

好吧，我们可以使用类似 **容器查询内联尺寸** (cqi) 的容器相对单位，其中 1cqi 等于容器内联尺寸的 1% (这是关于它的草案规范)

font-size: clamp(1rem, 1rem + 1cqi, 2rem);

Chris 还谈到了 **边缘托管** 的性能优势。这可能并不奇怪，因为他已经 写过 关于它 的文章 不止一次。即使是已经读过这些文章的人，我老实说也没有意识到边缘计算的完整概念。

这个想法简单得令人难以置信：全球 CDN 可以快速提供资源，因为它们在地理位置上靠近用户。这对于提供栅格图像来说是一种相当标准的做法。但它已经扩展到静态文件，例如为网站提供支持的相同的 HTML、CSS 和 JavaScript 文件——提前构建它们并从快速的全球 CDN 提供已经编译和优化的文件。这就是整个 Jamstack 概念！

但是，如果您仍然需要从它那里获得服务器响应呢？那就不太边缘化了，是吗？好吧，现在我们有了能够在单个 URL 上运行的处理程序，这些处理程序可以提前获取数据，并在渲染之前将其注入——直接从 CDN。当然，后台会发生一些额外的工作。尽管如此，我们可以动态获取数据，将其注入，预构建它，静态地按需提供它，并使其在地理位置上更靠近用户，这使得它速度惊人地快。

Tolu Adegbite：如何在 ARIA 中获胜并影响网络可访问性

天哪，这真是一个精彩的演讲！Tolu Adegbite 在 WAI-ARIA 上给我上了一课，我很难记下她分享的所有精华——角色！状态！标签！描述！所有内容都覆盖得非常好，而且我肯定我会反复参考这些内容。

但有一件特别引起我注意的事情是内联 SVG 的可访问性。即使 SVG 与其他类型的设计资源相关，但它毕竟是标记，使其与众不同，因为它 **并不总是被识别为图像**。

<!-- Image tag is easily recognized as an image -->
<img src="cat.svg" alt="An illustrated brown and white tabby kitten looking lovingly into the camera.">

<!-- Could be an image, maybe not? -->
<svg viewBox="0 0 100 100">
  <!-- etc. -->
</svg>

辅助技术更有可能通过为其提供适当的可访问角色和标签来将内联 SVG 识别为图像

<svg 
  role="image" 
  aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera."
  viewBox="0 0 100 100"
>
  <!-- etc. -->
</svg>

Miriam Suzanne：层叠的重要性

嘿，另一个 CSS-Tricks 校友！Miriam 一直在 层叠层规范 上投入大量时间和精力。她还在 CSS-Tricks 上写了一篇 关于它们的大指南，并在 An Event Apart 上谈论了它们。

对我来说，最深刻的是这是一个多么大的思维转变。这个概念本身并不复杂。在 CSS 文档顶部声明 @layer，按特异性顺序列出层，然后在这些层中编写样式。但是对于像我这样的老古董来说，我已经写了很长时间的 CSS 了，我必须习惯这样一个事实，层叠层使一个简单的类选择器能够胜过通常具有更高特异性的东西，比如 ID。

🤯

Miriam 还提醒大家，层叠层只是我们用来管理特异性的工具带中的一个工具，除了影响特异性的选择器（例如，:is()、:where() 和 :has()）。

哦，这是一个有趣的小细节。当 Miriam 讲述 CSS 中特异性的历史时，她回忆说，!important 最初是作为一种工具设计出来的，供用户覆盖用户代理和作者样式。但在后面的某个时候，我们已经采用它来强制作者样式排在最前面。层叠层有助于消除使用 !important 的借口必要性，因为它们赋予我们“**优先考虑层** 并 **保护继承**”的能力。

Miriam 说得真好！

Dave Rupert：解除您的可访问性积压

想象一下，有一天您醒来，发现您网站上有数百个关于报告问题的 GitHub 通知。您从哪里开始呢？也许关掉笔记本电脑，去做个根管治疗？这发生在 Dave 身上！自动可访问性审计返回了一堆错误，并将它们分配为 Dave 需要修复的工单。

但他注意到，在将这些问题的 Excel 电子表格移到 Notion 中以获得更好的视图、隐藏不必要的列、对所有内容进行分类以及以逻辑组显示结果后，出现了一种模式。**许多报告的问题是同一个问题在多个页面上重复出现。**仅仅因为自动测试返回了几个错误，并不意味着它们都是唯一的。这减少了很大一部分工单。

他继续展示了如何——在付出相对较少的努力后——积压的工单减少了近 50%。

这里有很多东西可以借鉴，特别是关于我们如何处理和组织工作。对我来说，最大的收获是 Dave 说我们必须强调个人和互动胜过流程和工具。扫描可访问性错误的工具很有用，但它们可能无法说明全部情况。与其相信它们的话，不如在深入混乱之前提出问题，并获得更多信息。

另外，在 Notion 中重新组织问题使 Dave 能够以一种清晰的方式对问题进行分组，从而表明他的产品积极歧视哪些残障人士，从而使他更加同情这些错误以及如何优先处理它们。

---

陈慧静在当天最后进行了一个虚拟会议，但坦白地说，我错过了一半左右，因为我当时正在进行走廊对话。这场对话非常值得，即使我错过了演讲，我也很沮丧。我会在它发布后观看视频！