javascript - aria-owns、aria-invalid、aria-expanded的解释和示例

Question

我正在查看一些代码，其中一个标签具有属性 aria-owns 和 aria-expanded。我用谷歌搜索了它们，但没有找到足够的细节来完全理解它们的作用。

有人可以解释一下这些特定属性的用途吗？我对 aria 属性的作用有一个大致的了解(我使用过 aria-labelledby)？

Answer 1

aria-labelledby

aria-labelledby 与 aria-label 具有相同的最终结果，即属性的值将由屏幕阅读器读取。不同之处在于 aria-label 的值是您要使用的标签，而 aria-labelledby 属性的值是对不同元素的 id 引用.其他元素的文本值将成为第一个元素的标签。

aria-owns

通常，元素的父子关系由 DOM 的层次结构隐含。但在某些情况下，将元素视为具有不同的父元素比从技术上讲它在 DOM 中更有意义，并且在这些情况下使用“aria-owns”。

很难为 aria-owns 描述一个简单的示例，但是当您在代码中查看它时，可以将其视为代码试图告诉您给定的小部件可以产生更多如果您将此元素视为其 ID 所指向的任何元素的父元素，这是有意义的。

aria-expanded

aria-expanded 更简单。它始终设置为 true 或 false(如果属性不在元素上，则假定为 false)。当屏幕阅读器导航到可以展开的元素(如包含嵌套菜单的菜单项)时，阅读“aria-expanded”标签可让用户知道连接的弹出部分是否已激活。

开发人员有责任在用户激活和停用可扩展元素时主动管理 aria-expanded 标签的状态。

有很多 aria 状态和属性可能会造成混淆。文档非常容易浏览，基础知识也不太复杂，所以不要害怕深入研究: https://www.w3.org/TR/wai-aria/states_and_properties