aria-expanded html 属性答案

【问题标题】：aria-expanded html attributearia-expanded html 属性
【发布时间】：2018-02-03 17:05:53
【问题描述】：

我目前正在制作导航栏并遇到了aria-expanded html 属性。我当然知道元素是用来让元素展开或折叠的。我能找到的信息很少，W3C docs 不是很清楚 IMO。

问题

这个属性究竟是如何工作的？

【问题讨论】：

该属性不会改变元素的视觉表现形式：“当作者使用可折叠内容时，例如隐藏导航菜单或内容列表时，触发链接或按钮应向屏幕阅读器用户指示下面的可折叠内容是处于展开状态还是处于折叠状态。aria-expanded 属性用于此目的。"
"我当然知道元素是用来让元素展开或折叠的" 不完全是。它用于通知屏幕阅读器该元素是否已展开（顺便说一下，它可以展开/折叠，否则盲人用户可能无法发现。）ARIA 属性对文档，它们是有关文档状态的信息提示。
@Andreas 所以这意味着您需要手动/“以编程方式”管理 aria-expanded 的值？

【解决方案1】：

aria-expanded attribute 只是用户代理的一个标志。它

指示该元素或其控制的另一个分组元素当前是展开还是折叠。

...该指示用于元素的内容，或者如果还指定了aria-controls，则用于目标元素。

您设置它的值以表明您对页面所做的操作（例如，您扩展或收缩了一个部分）。它没有任何与它相关的特定行为，它是为了让用户代理知道发生了什么，以便它可以为它的观众（他们可能有视力障碍并且需要一些其他迹象来表明某个部分是/不是）展开）。

【讨论】：

【解决方案2】：

ARIA 属性与可访问性有关。在这种特殊情况下，它是让使用辅助技术（例如屏幕阅读器）的用户知道元素是否被扩展。它对元素的样式没有任何原生影响，但您可以使用 CSS 属性选择器来定位它：[aria-expanded="true"]。您可以根据需要使用 JavaScript 切换值。

【讨论】：

【解决方案3】：

Aria 属性通常用于使残障人士可以访问 Web 应用程序。它们主要由屏幕阅读器用来确定如何处理 html 元素。

aria-expanded 属性提供有关元素是处于展开状态还是折叠状态的信息。

例如，如果您有一个包含文本的可折叠元素，那么当 aria-expanded 属性设置为 true 时，屏幕阅读器会知道该文本当前未显示在屏幕上。

【讨论】：

【解决方案4】：

如上所述here：

WAI-ARIA 是一个规范，定义了对可访问网络应用程序的支持。它定义了一堆标记扩展（主要作为 HTML5 元素上的属性），Web 应用程序开发人员可以使用这些扩展向屏幕阅读器等辅助技术提供有关各种元素语义的附加信息。

WAI 代表：Web Accessibility Initiative

ARIA 代表：Accessible Rich Internet Applications

希望对你有帮助

【讨论】：

【解决方案5】：

这取决于您的锚元素或任何其他元素是否处于活动状态，就像引导程序中的下拉菜单一样

当父级处于单击状态时，您想在父级上应用哪种颜色！

【讨论】：

我认为这实际上是一个尝试回答。但是为了更容易理解，一些改写会有所帮助。我推荐更多和更短的句子。一两个换行符也可能有帮助。也许卖掉感叹号并投资一些更沉默的标点符号。
没关系还是我应该改变流程
感谢您的努力。但对我来说（只是我的看法）清晰度和可读性并没有提高。除此之外，如果您引用（即使用引用格式），那么您可能希望将其归因于原作者。也许那个作者有一个很好的理由使用感叹号，但我在这里没有看到。
作为一个使用更多和更短的句子和格式的例子（尽管技术内容可能完全错误；这将说明我所说的“不清楚”的意思）：行为因元素而异活跃。当您的锚元素恰好处于活动状态时，它的行为......但是，如果任何其他元素处于活动状态，那么它的行为......将其与您使用引导程序中的下拉菜单时的行为进行比较。正如其他人（作者姓名）所描述的那样：“哪种颜色......”。
我真的不知道你所说的“流动”是什么意思。但猜测一下 - 是的，请更改它。