我最近收藏的一些关于无障碍性的文章

• “关于 display: contents 和 Chrome 的好消息” — Rachel Andrew 指出，使用 display: contents; 的无障碍性风险已在 Chrome 中修复。 问题在于，假设您有一个作为网格布局的父级 div，并且在内部有一个包含 <li> 元素的 <ul>，并且您希望 <li> 元素参与同一父级网格。 我们有子网格，但它并不完全相同。 您想要的只是假装 <ul> 不存在，并且 <li> 元素可以像其他任何东西一样在网格上存在。 问题是，如果您这样做，您就会抹去列表的可访问语义。 但现在不再如此了！
• “网格、内容重新排序和无障碍性”  — 说到网格和无障碍性，Rachel 再次通过此幻灯片向我们讲解，在使用现代布局技术时，内容的源顺序和显示顺序很容易发生偏差。 目前，解决方案基本上是不要这样做，但是 未来可能 有一种方法可以让浏览器更新标签顺序，以便在您大幅更改布局时，它在视觉上是合理的。
• “最实用的无障碍性测试工具和技术” — Atrem Sapegin 列出了一些优秀的工具，例如 eslint-plugin-jsx-a11y、storybook-addon-a11y、cypress-axe、对比度应用程序、Spectrum 浏览器扩展，以及……使用您的 Tab 键（哈哈）。
• ButtonBuddy — Stephanie Eckles 的工具，用于帮助生成按钮的 CSS。 但它的真正意义在于为您提供满足颜色对比度指南的自定义属性颜色。
• “您的锚点链接是否可访问？” — Amber Wilson 在标题中/通过标题遍历了锚点链接的五次迭代，然后才找到了一个好的方法，即使这样，也有一些问题需要解决。
• “不要在表单标签上使用 pointer-events: none” — 我对任何人都会这样做感到有些震惊，但事实证明，这是来自 Material Design 的“浮动标签”模式。 我认为这种模式太愚蠢了。 它实际上并没有节省任何空间，因为您无论如何都需要标签漂浮的空间。 天哪。
• “所有人的无障碍文本标签” — Sara Soueidan 测试了真实的无障碍软件以及它如何呈现常见的交互式元素。 例如，“阅读更多”链接不太有用（阅读更多什么？），而“添加到购物车”单独使用也不太有用（将什么添加到购物车？）。 例如，您可以为这些“添加到购物车”按钮添加商品名称，但不要将它放在按钮中间，因为这可能会导致问题。 将额外的文本放在末尾。