具有扩展信息的标记列表中标记的最佳实践语义和可访问元素是什么？

Question

我正在网页上构建一个组件，该组件显示分配给您的个人资料的技能，并提供管理标记的交互式功能。

我希望这些标签在语义上准确，并且对于那些没有JavaScript支持的人来说也是可以访问的。

目前，我正在考虑一个无序列表，其中包含一个超链接到一个页面，您可以在该页面中管理该单个标记的值，禁用它或将其删除并返回到您所在的页面。

如果您启用了JavaScript，我想在原状中启用该功能。

使用超链接作为包装器或按钮是否更好？还是有另一种处理这两种情况的方法？

以下是悬停时隐藏功能的一些示例：

这是来自mikos.co.uk/tags/ - HTML中非常干净的实现，但使用JavaScript来隐藏和显示扩展内容并使用内联样式。使用CSS＆amp; amp;可以实现类似的效果。 CSS转换特别是在悬停时，也许。

SO使用以下格式：

在这种格式中，标签链接到相应的页面，但没有JavaScript，扩展内容根本不可用。

这是使用的HTML。

这是扩展内容，在悬停时附加到正文。

是否有一种最佳实践可以访问同一元素或元素中的扩展信息，并且可以轻松地返回到此元素），以便按顺序读取和导航，语义准确且可访问？< / p>

我正在考虑的功能包括：

1. 删除，可以让用户通过删除页面
2. 编辑，可以让用户进入编辑页面
3. 禁用，可以让用户访问编辑页面的一部分

我希望从导航到代码的人处获取信息：

1. 标记名称
2. 标签的含义
3. 他们可以用标签做什么
4. 执行搜索与该标记匹配的链接
5. 启用与该标记匹配的通知的链接
6. 指向与该标记匹配的最受欢迎内容的链接
7. 一个链接，查看哪些人最常使用该标记发布内容

考虑如何读出这个以及如何实现它，一些信息可能很好地表现为带有标题和部分的文章，即使它是一个次要的视觉元素，或者它可能作为一个定义列表。

欢迎任何指导。

更新来自：W3C

  

aria-own（财产）

     

＃

     

标识元素（或多个元素）以定义视觉效果，   DOM之间的功能或上下文父/子关系   DOM层次结构不能用于表示的元素   关系。参见相关的咏叹调控制。

     

aria-owns属性的值是以空格分隔的列表   IDREFS通过ID引用文档中的一个或多个元素。该   添加aria-owns的原因是暴露父/子上下文   与辅助技术的关系，否则是不可能的   从DOM推断。

     

作者不应该使用咏叹调作为DOM的替代品   层次结构。如果关系在DOM中表示，请不要使用   ARIA-拥有。作者必须确保未指定元素的ID   在任何时候，在多个其他元素的aria-owns属性中。在   换句话说，元素只能有一个显式所有者。

在这种情况下，元素不会立即分层，而是相关的。我相信下面的答案回答了我在这种情况下的需要。

Answer 1

  

带有扩展信息的标签列表中标签的最佳实践语义和可访问元素是什么？

1. 当链接使用键盘聚焦时，必须可以访问扩展信息。

2. 无需键盘即可访问扩展信息（触摸屏，眼动追踪设备，语音激活设备......）

您提供的两个示例无法满足这些要求。

我想说如果标签名称已经是另一个页面的锚点，那将会更加困难，因为这需要每个标签名称有两个链接（一个链接指向“标记结果页面”，另一个链接扩展额外页面）信息）。

像

这样的东西

<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>