具有扩展信息的标签列表中的标签的最佳实践语义和可访问元素是什么？
What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?
我正在网页上构建一个组件，该组件显示分配给您的个人资料的技能并提供交互式功能来管理标签。
我希望这些标签在语义上是准确的，并且对于那些没有 JavaScript 支持的人来说也可以访问。
目前，我正在考虑一个带有 hyperlink 的无序列表到一个页面，您可以在其中管理单个标签的值，禁用它或删除它，然后 return 到您要访问的页面
如果您启用了 JavaScript，我想就地启用该功能。
使用 hyperlink 作为包装器或按钮更好，还是有另一种方法可以处理这两种情况？
以下是隐藏功能可用的一些示例 on-hover:
这个来自 mikos.co.uk/tags/ - HTML 中的一个非常干净的实现，但使用 JavaScript 隐藏和显示扩展内容并使用内联样式。使用 CSS 和 CSS 过渡可以实现类似的效果，尤其是在悬停时。
SO 使用以下格式：
在这种格式中，标签 link 可以到达相应的页面，但是如果没有 JavaScript，扩展内容根本不可用。
这是使用的HTML。
这是扩展内容，悬停时附加到 body。
是否有最佳实践允许访问同一元素内的扩展信息或通过简单的方法从元素访问 return 到此元素）以便按顺序读取和导航，在语义上是准确且易于访问？
我正在考虑的功能包括：
- 删除，可以将用户带到删除页面
- 编辑，可以将用户带到编辑页面
- 禁用，可以将用户带到编辑页面的一部分
我想从导航到标签的人那里获得的信息：
- 标签名称
- 标签的含义
- 他们可以用标签做什么
- a link 执行搜索以匹配该标签
- a link 启用与该标签匹配的通知
- a link 查看与该标签匹配的最受欢迎的内容
- a link 查看谁最常使用该标签发布内容
考虑到如何读出以及如何实施，一些信息可能适合用 header 和部分的文章表示，即使它是一个次要的视觉元素，或者它可能用作定义列表。
欢迎任何指导。
更新： 来自：W3C
aria-owns (property)
#
Identifies an element (or elements) in order to define a visual,
functional, or contextual parent/child relationship between DOM
elements where the DOM hierarchy cannot be used to represent the
relationship. See related aria-controls.
The value of the aria-owns attribute is a space-separated list of
IDREFS that reference one or more elements in the document by ID. The
reason for adding aria-owns is to expose a parent/child contextual
relationship to assistive technologies that is otherwise impossible to
infer from the DOM.
Authors SHOULD NOT use aria-owns as a replacement for the DOM
hierarchy. If the relationship is represented in the DOM, do not use
aria-owns. Authors MUST ensure that an element's ID is not specified
in more than one other element's aria-owns attribute at any time. In
other words, an element can have only one explicit owner.
在这种情况下，元素不会直接分层，而是相关的。我相信下面的答案满足了我在这种情况下的需求。
What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?
当 link 使用键盘获得焦点时，必须可以访问扩展信息。
扩展信息必须可以在没有键盘的情况下访问（触摸屏、眼动追踪设备、声控设备...）
您提供的两个示例不符合这些要求。
我会说，如果标签名称已经是另一个页面的锚点，这将更加困难，因为每个标签名称需要两个 link（一个导致 "tag result page" , 和一个扩展额外信息）。
类似
<li>
<a href="/tags/strawberry">Strawberry</a>
<button title="View Strawberry tag details" aria-owns="strawberry-details">+</button>
<div class="details" id="strawberry-details">...</div>
</li>
我正在网页上构建一个组件，该组件显示分配给您的个人资料的技能并提供交互式功能来管理标签。
我希望这些标签在语义上是准确的，并且对于那些没有 JavaScript 支持的人来说也可以访问。
目前，我正在考虑一个带有 hyperlink 的无序列表到一个页面，您可以在其中管理单个标签的值，禁用它或删除它，然后 return 到您要访问的页面
如果您启用了 JavaScript，我想就地启用该功能。
使用 hyperlink 作为包装器或按钮更好，还是有另一种方法可以处理这两种情况？
以下是隐藏功能可用的一些示例 on-hover:
这个来自 mikos.co.uk/tags/ - HTML 中的一个非常干净的实现，但使用 JavaScript 隐藏和显示扩展内容并使用内联样式。使用 CSS 和 CSS 过渡可以实现类似的效果，尤其是在悬停时。
SO 使用以下格式：
在这种格式中，标签 link 可以到达相应的页面，但是如果没有 JavaScript，扩展内容根本不可用。
这是使用的HTML。
这是扩展内容，悬停时附加到 body。
是否有最佳实践允许访问同一元素内的扩展信息或通过简单的方法从元素访问 return 到此元素）以便按顺序读取和导航，在语义上是准确且易于访问？
我正在考虑的功能包括：
- 删除，可以将用户带到删除页面
- 编辑，可以将用户带到编辑页面
- 禁用，可以将用户带到编辑页面的一部分
我想从导航到标签的人那里获得的信息：
- 标签名称
- 标签的含义
- 他们可以用标签做什么
- a link 执行搜索以匹配该标签
- a link 启用与该标签匹配的通知
- a link 查看与该标签匹配的最受欢迎的内容
- a link 查看谁最常使用该标签发布内容
考虑到如何读出以及如何实施，一些信息可能适合用 header 和部分的文章表示，即使它是一个次要的视觉元素，或者它可能用作定义列表。
欢迎任何指导。
更新： 来自：W3C
aria-owns (property)
#
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. See related aria-controls.
The value of the aria-owns attribute is a space-separated list of IDREFS that reference one or more elements in the document by ID. The reason for adding aria-owns is to expose a parent/child contextual relationship to assistive technologies that is otherwise impossible to infer from the DOM.
Authors SHOULD NOT use aria-owns as a replacement for the DOM hierarchy. If the relationship is represented in the DOM, do not use aria-owns. Authors MUST ensure that an element's ID is not specified in more than one other element's aria-owns attribute at any time. In other words, an element can have only one explicit owner.
在这种情况下，元素不会直接分层，而是相关的。我相信下面的答案满足了我在这种情况下的需求。
What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?
当 link 使用键盘获得焦点时，必须可以访问扩展信息。
扩展信息必须可以在没有键盘的情况下访问（触摸屏、眼动追踪设备、声控设备...）
您提供的两个示例不符合这些要求。
我会说，如果标签名称已经是另一个页面的锚点，这将更加困难，因为每个标签名称需要两个 link（一个导致 "tag result page" , 和一个扩展额外信息）。
类似
<li>
<a href="/tags/strawberry">Strawberry</a>
<button title="View Strawberry tag details" aria-owns="strawberry-details">+</button>
<div class="details" id="strawberry-details">...</div>
</li>