关于样式化表单控件的可访问性的简短说明

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

样式和可访问性通常是相互矛盾的。Scott O’Hara 有这个仓库,它展示了如何在表单控件的上下文中将两者很好地结合在一起。

本地控件和样式化控件之间的权衡让我想起了 Eric Bailey 关于焦点样式的案例研究

一个常见的误解是焦点样式只能使用 outline 属性。值得注意的是,:focus 与任何其他选择器一样,这意味着它接受 CSS 属性的完整范围。我喜欢使用背景颜色、下划线和其他不会调整组件当前大小的技术,这样在激活选择器时就不会改变页面布局。

Scott 的仓库的优点在于它可以作为基线,可以将其提取到项目中并从那里进行自定义。有点像 WTF,表单?,但更明确地——咳咳——关注可访问性。样式也被考虑在内,但不是重点。

既然我们谈到这个话题,让我们不要忽视 Dave Rupert 的“可访问组件营养卡”。它最近也发布了,并且——除了是一个巧妙的想法之外——它确实是一个非常有用的参考,可以参考特定组件的可访问性期望。绝对值得收藏。🔖

直接链接 →