Javascript aria 扩展的 html 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48599822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
aria-expanded html attribute
提问by Willem van der Veen
I am currently making a navbar and came accross the aria-expandedhtml attribute. I know of course that the element is used to let an element either expand or collapse. I could find very little information with regard to this and the W3C docsaren't that clear IMO.
我目前正在制作一个导航栏并且遇到了aria-expandedhtml 属性。我当然知道元素用于让元素展开或折叠。我能找到的关于此的信息很少，而且W3C 文档在 IMO 中也不是那么清楚。
Question
题
How does this attribute work exactly?
这个属性究竟是如何工作的？
回答by T.J. Crowder
The aria-expandedattributeis simply a flag for the user agent. It
该aria-expanded属性只是用户代理的标志。它
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
指示元素或其控制的另一个分组元素当前是展开还是折叠。
...where that indication is for the element's contents, or if aria-controlsis also specified, for the target element.
...该指示用于元素的内容，或者如果aria-controls还指定，则用于目标元素。
You set its value to indicate what you've done to the page (e.g., you've expanded or contracted a section). It doesn't have any particular behavior associated with it, it's for letting the user agent know what's going on so it can interpret that for its audience (who may be vision-impaired and need some other indication that a section is/isn't expanded).
您可以设置它的值来表明您对页面做了什么（例如，您扩展或收缩了一个部分）。它没有任何与之相关的特定行为，它是为了让用户代理知道发生了什么，以便它可以为其受众（可能有视力障碍并且需要一些其他指示一个部分是/不是）进行解释展开）。
回答by chriskirknielsen
ARIA attributes are related to accessibility. In this particular case, it's to let users with assistive technology (e.g. screen readers) know whether an element is expanded or not. It does not have any native effect on the styling of the element, but you can target that with CSS attribute selectors: [aria-expanded="true"]. You can toggle the value with JavaScript as needed.
ARIA 属性与可访问性相关。在这种特殊情况下，它是让具有辅助技术（例如屏幕阅读器）的用户知道元素是否被展开。它没有对元素的造型任何原生的效果，但你可以定位与CSS属性选择：[aria-expanded="true"]。您可以根据需要使用 JavaScript 切换该值。
回答by dstrants
As mentioned here:
正如这里提到的：
WAI-ARIA is a spec defining support for accessible web apps. Tt defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers.
WAI-ARIA 是定义对可访问 Web 应用程序的支持的规范。Tt 定义了一堆标记扩展（主要作为 HTML5 元素的属性），Web 应用程序开发人员可以使用这些扩展来向屏幕阅读器等辅助技术提供有关各种元素语义的附加信息。
Hope it helps
希望能帮助到你
回答by dybzon
Aria attributes in general are used to make web applications accessible to people with disabilities. They are used primarily by screen readers to determine how to treat html elements.
Aria 属性通常用于使残障人士可以访问 Web 应用程序。它们主要由屏幕阅读器用来确定如何处理 html 元素。
The aria-expanded attribute provides information about whether an element is in an expanded or collapsed state.
aria-expanded 属性提供有关元素是处于展开状态还是折叠状态的信息。
For example, if you have a collapsible element which contains a text, then a screen reader would know that the text is not currently displayed on the screen when the aria-expanded attribute is set to true.
例如，如果您有一个包含文本的可折叠元素，那么当 aria-expanded 属性设置为 true 时，屏幕阅读器将知道该文本当前未显示在屏幕上。
回答by Sumit
It depends on whether your anchor element or any other element is active, Just like dropdown from bootstrap then
这取决于您的锚元素或任何其他元素是否处于活动状态，就像 bootstrap 中的下拉菜单一样
which color you wants to apply on the parent while it is on clicked state!
当它处于单击状态时，您想在父项上应用哪种颜色！
