I have an Angular web app and I use a 3rd party component that outputs an element with the aria-hidden="true" attribute. This element is not supposed to be visible. According to MDN, the aria-hidden should be supported by all browsers and does not require additional styles to be functional.

I created this simple example. Please give it a try and let me know if you can see the aria hidden element.

I also tried to create a plain HTML file to test the aria-hidden attribute and the element is still shown. I test the page in both Chrome and Edge. Now I wonder if aria-hidden is widely supported.

CodePudding user response：

aria-hidden="true" is only for accessibility -- for a typical user this will have no effect.

You can add hidden to your element!

Otherwise style="display: none" or style="visibility: hidden" depending on your needs. The visibility option will not not change the flow of the page, so element will still affect the layout around but it just won't be visible, almost like zero opacity

Also this nothing to do with Angular, you should remove the tag!

CodePudding user response：

Tags prefixed with aria- are meant to help assistive technologies understand your website. As written in the MDN article you linked, the aria-hidden tag does not actually affect the visibility on screen.

The presence of the aria-hidden attribute hides content from assistive technology but doesn't visually hide anything.