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

Question

我有一个 e-commerce 商店页面正在开发中，其中有一个带有单词 "filter" 的按钮，单击该按钮时，会向用户弹出一个过滤器模式。在过滤器模式的顶部是一个带有文本 "filter" 的标题。

<button>Filter</button>

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

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

我的问题：

具有不同角色和功能的两个元素可以使用相同的易访问名称吗？
如果不是，我该如何更改 DOM 以突出显示差异？

Answer 1

您的示例没有问题，当人们谈论具有相同名称的事物时，他们通常指的是超链接（因此，如果您两次使用相同的超链接文本，它应该始终指向同一页面）或按钮等

在您的示例中，您使用了一个按钮和一个标题，它们将被屏幕识别 reader 为按钮和标题，因此不会造成混淆。

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

关于你的第二个问题，如果你确实遇到过这样的情况：你有相同的物品（例如 <button>），但你需要它们来执行你可能想要的不同操作添加一些额外的 visually hidden text 来更详细地解释每个按钮的作用。

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

.gallery{
    width: 100%;
    height: 200px;
    background: #666;
}
.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<h2>Trees</h2>
<button>Filter <span class="visually-hidden">Trees</span></button>
<div class="gallery"></div>

<h2>Flowers</h2>
<button>Filter <span class="visually-hidden">Flowers</span></button>
<div class="gallery"></div>

您会看到这两个按钮在视觉上是相同的，但在屏幕上 reader 该按钮具有额外的信息，可以清楚地区分两个按钮。

如果使用模态框，请确保在按钮上使用 aria-expanded、aria-controls，并确保将焦点置于模态框内。如果您在这些方面需要帮助，请提出另一个问题。

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

How do you handle situations where 2 elements have the same accessible name, but different functoinality?

html

accessibility

wai-aria