Hide Aria label with css or javascript-CodePudding

I want to hide an arialabel without modifying it so just adding some code in css or javascript. I know that you can put display:none for a class but is there any similar options for labels ?

Here's the aria label I want to hide. It doesn't have any ID

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

CodePudding user response：

You should be able to use display: none or visibility: hidden for this but if it isn't working for some reason, there's a way to hide aria-labels.

Use aria-hidden="true". For example, <p aria-hidden="true">Hidden Aria Label</p>.

CodePudding user response：

CSS

If you want to hide the entire element based on the aria-label you can do that with CSS, if the element is a <button> you can do:

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

Just swap out whatever the element is if it isn't a button (you haven't mentioned what the HTML element is in your question).

JavaScript

If you want to remove just the attribute (not the full element) and you don't have access to the HTML you have to do this with JavaScript instead of CSS.

You haven't included the HTML of the element itself, but you can select by the aria label itself:

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

... if this is the only sign up instance on the page where you want it removed this will work fine. If you have multiple instances on the page you would need to do:

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