Html 如何处理两个元素具有相同的可访问名称，但功能不同的情况？

我有一个正在开发的电子商务商店页面，其中有一个按钮，上面有“过滤器”一词，点击后，会向用户弹出一个过滤器模式。过滤器模式的顶部是一个标题，标题上有文本“过滤器”

过滤器

滤器

我读过关于可访问名称的文章，它说如果两个事物有相同的可访问名称，它应该做相同的事情。但是在这种情况下，过滤器按钮的自动生成名称将与过滤器标题相同，即使它们具有不同的功能（一个是功能按钮，另一个只是显示标题）

我的问题:

两个具有不同角色和功能的元素可以使用相同的可访问名称吗

如果没有，如何更改DOM以突出显示差异

---

你的例子没什么错，当人们谈论同名事物时，他们通常指的是超链接（因此，如果你两次使用同一超链接文本，它应该总是指向同一页面）或按钮等

在您的示例中，您使用一个按钮和一个标题，这些按钮和标题将由屏幕阅读器识别为按钮和标题，因此不会出现混淆

希望这能回答你的第一个问题

对于第二个问题，如果您确实发现您有相同的项目（例如，

）具有相同的名称，但您需要它们执行不同的操作，您可能需要添加一些额外的内容，以更详细地解释每个按钮的功能

例如，如果您有两个不同的库需要过滤，一个是关于树的，另一个是关于花的，您可以执行以下操作（尽管最好不要在视觉上隐藏文本，而是尽可能将其包含在可见文本中）：-

.gallery{
宽度：100%；
高度：200px；
背景:#666；
}
.视觉隐藏{
位置：绝对！重要；
高度：1px；
宽度：1px；
溢出：隐藏；
剪辑：rect（1px 1px 1px）；/*IE6，IE7*/
剪辑：rect（1px，1px，1px，1px）；
空白：nowrap；/*添加了行*/
}

树
过滤树
花
过滤花

太棒了！棒 极 了难以置信的非常感谢。

<button>Filter</button>

<div class="modal">
<h2>Filter</h2>
</div>