用 css 或 javascript 隐藏 Aria label

Question

我想隐藏一个 arialabel 而不修改它，所以只需在 css 或 javascript 中添加一些代码。我知道你可以将 display:none 用于 class 但是否有类似的标签选项？

这是我要隐藏的咏叹调 label。 它没有任何ID

// aria-label="Sign-up" href="/EN-CA/contact-sign-up/" title="Sign-up"> 注册 //

Answer 1

您应该可以使用display: none或visibility: hidden为此，但如果由于某种原因它不起作用，有一种方法可以隐藏 aria-labels。

使用aria-hidden="true" 。 例如， <p aria-hidden="true">Hidden Aria Label</p> 。

Answer 2

CSS

如果你想基于 aria-label 隐藏整个元素，你可以使用 CSS 来做到这一点，如果元素是一个锚<a>元素，你可以这样做：

a[aria-label="Sign-up"] {
    display: none;
}

如果它不是按钮，只需换掉它的任何元素（你没有提到你的问题中的 HTML 元素是什么）。

JavaScript

如果您只想删除属性（而不是完整元素）并且无法访问 HTML，则必须使用 JavaScript 而不是 CSS。

您尚未包含元素本身的 HTML，但您可以通过 aria 标签本身进行选择：

document.querySelector('aria-label[Sign-up]').removeAttribute('aria-label');

...如果这是您希望将其删除的页面上唯一的注册实例，这将正常工作。 如果页面上有多个实例，则需要执行以下操作：

document.querySelectorAll('aria-label[Sign-up]').forEach(label => {
    label.removeAttribute('aria-label');
})