ARIA-hidden state is used to hide certain portion of content for assistive technology users. Use of CSS properties such as display: none or visibility: hidden hide the content from the browser, in most of the cases even assistive technologies also do not render the content to the user when these CSS properties are used. “Hidden†a HTML 5 Boolean attribute is introduced to hide text directly from the DOM. Some assistive technologies retrieve the WAI ARIA properties directly from the DOM while other few get the information from the platform accessibility supported by the browser. In any of the mechanisms use of ARIA-hidden property can be used in conjunction with the CSS hiding or HTML 5 hidden properties for an inclusive user experience.
Use of ARIA-hidden
ARIA-hidden state should be mentioned when the page contain functionalities such as tabs, accordions, hide/show or the functionality that shows the content on pressing a button , clicking a link etc. To show and hide the content ARIA-hidden attribute can be used.
ARIA-hidden has two states. ARIA-hidden=â€true†means content is not currently visible on the screen. ARIA-hidden=â€false†means content is visible. ARIA-hidden=â€false†is a default value and absence of false state does not impact. In other words aria-hidden=â€false†is equal to its absence.
ARIA-hidden can also be used for hiding the content only for screen reader users and can be made available for others, but use this method with utmost care. If the content or the meaning of the content is conveyed to the assistive technology user; to avoid redundancy for assistive technology user;, the content author have any other justifiable reason then use it.
ARIA-hidden (state) is compatible on all major desktop browsers. Tested 
on latest versions of Mozilla Firefox, Internet Explorer, Google Chrome on Windows with NVDA 2014.4 and JAWS 15. It is also supported on Safari for IOS 8.1 with Voiceover.