使用CSS来强制使用可访问性

2021-06-25 19:13:44

我是咏叹调第一个规则的大支持者(不要使用咏叹调)。但是,ARIA为HTML没有为HTML提供了很多,例如复杂的小部件和HTML没有本地的状态信息。

除非他们正在检查浏览器跨浏览器或使用屏幕读取器套件测试,否则很多信息都可以隐藏到普通开发人员。这是我总是提倡让您的风格依赖于DOM的结构和属性的原因之一,以便在某些东西不对劲时使其更容易发现。

在我看来,它也是一种减少表面积的方法,以便获得可访问性错误。如果您的排序图标方向键入了以编程方式传达该状态的ARIA属性,则获得ARIA属性错误将有两个效果 - 破碎的接口和奇怪的图标。解决辅助功能问题将解决视觉样式。

这一切都不是新的。其他人已经谈过,书面和编码了。自从21世纪的第一个十年来,自从属性选择器支持以来,我已经被视为理所当然。但我经常与那些没有来自同一个地方的CSS的人一起工作。

而不是讲述概念,让我抛出一些例子。每个链接到博客文章,其中我解释了样式,选择器如何键入HTML,它们有助于支持的WCAG成功标准,如果有任何GOTCHAS。请至少阅读这些帖子的链接部分以获取更多详细信息。

在我的帖子后响应表中,我使用以下CSS来确保未剪裁内容,除非键盘用户将可以访问,而不为屏幕阅读器用户创建混乱的混乱:

在公开内存小部件中,以下CSS仅在正确设置触发器(假设它是先前兄弟姐妹)时隐藏内容以传达IT控件的内容:

按钮[aria-algended =" false"] + * { 显示:无; } 按钮[aria-algended] + * { / * Don' t需要任何东西。 * / }

在写入可排序表列时,我不会在CSS中详细介绍,但选择器在依赖于Sort属性时非常清晰:

[aria-sort ="升序"]>按钮svg.asc { 中风:var( - col-header-color); 填充:var( - col-header-color); } [aria-sort ="下降"]>按钮svg.des { 中风:var( - col-header-color); 填充:var( - col-header-color); }

我的受损文本Boxen凭借ARIA属性依赖于本机HTML属性,例如当控件的状态无效时:

当然,我涵盖了最常见的一个,在链接+披露小部件导航中显示了一组导航链接中的当前页面:

对于扭曲,更可访问的骨骼使用CSS在ARIA支持中使用CSS来击球:

我一次又一次地遇到的挑战是与不知道CSS的开发人员,无论是全部还是很好。他们是否依赖于CSS-In-JS方法,或者像Tailwind或Bem这样的类驱动的模型,我发现他们首先努力了解使用CSS的概念,因为我概述了,但随后如何在他们的工具中编写语法让它工作。

我没有取笑Tailwind或Bem(虽然我可能已经做过这一点)。我不知道语法(我也不知道SCS,SMACS,SASS,SFPD等),而且由于我的CSS知识年龄较大,并且到处都是工作以来,我没有动力。

我鼓励你读回应。我提出的大部分建议将无法与Taiwwind的结构合作。大部分反馈都归结为服务静态CSS文件(在观察布局冲突时)或使用@layer指令集成这些样式,将其放入所需的生成的Tailwind文件中的位置。

Phil Wolstenholme立即开始提供反馈,然后用Tailwind-Temply反馈后直接写了一篇文章:将尾风样式绑定到Aria属性。

如果您使用Tailwind,我鼓励您阅读它(然后也许在那里或这里留下评论的评论)。如果您不使用Tailwind,也许其中一些概念可以应用于您的选择工具。

基于整体响应,我自己的挖掘成BEM,它看起来像我概述的选择器远远超出了这些工具所提供的范围。对于其他工具,我鼓励您在评论中提供自己的经验。

看,我不能继续给你免费代码。有一天,我会死。

许多全球咏叹调状态(但不是属性)很大,就像造型的钩子一样。熟悉跨小部件和其他用途的所有aria状态和属性也可以方便。

每次提出反映某事物的状态或属性的风格(开放,封闭,扩展,崩溃,关闭,检查,禁用,忙,锁定,选择,无法控制地),请不要使用类。至少不是起初。看看潜在的HTML发生的程序化变化,这会发生这种情况。

尝试使用它作为您的造型挂钩。在某种程度上写它,如果这种更改不会发生这种变化,你的风格也不是。

就像每个问题看起来像钉子时,当您只有锤子时,每个布局或样式或窗口小部件挑战都看起来像是在选择一些自我描述的实用程序 - 首先CSS工具时使用类解决的东西。或javascript。

如果您使用这些工具,您仍然需要知道CSS。最重要的是,您可能需要知道工具的语法,以便包含超出他们提供的所提供的任何CSS。

如果您掌握了构建这些工具,请考虑如何推广促进和强化良好和可访问的HTML语法的CSS。

如果您正在构建这些工具,因为您只知道如何使用类样式,那么请先返回并学习CSS。和HTML。和aria。和wcag。和可访问性。也许抛出一些微型数据格式。然后将该体验置于您想要构建的工具中。

除了旁边,我对尾风有一个内置偏见。不是因为技术;我看到这件事一遍又一遍地出现,他们都有有限的保质期。我的问题是它的创造者如何选择与在线的人们联系,他们甚至不是批评者,同时在其主页上的其他方法上争吵。如同一位老板。

很多人喜欢工具,很多人都没有。 我对这场战斗没有兴趣。 如果你被冒犯了某人不喜欢你的工具,那么你需要选择通过别的东西来定义自己的自我价值。 也许是一个体育特许经营权(如我们在水牛城)。 您可以使用这些HTML标记和属性:< href ="" 标题=""> < abbr标题=""> <首字母缩略词标题=""> < b> < blockquote cite =""> < cite> <代码> < del datetime =""> < em> < i> < q cite =""> < s> <罢工> <强壮>