Aria-hidden = true inside app

Im have a chart component in my web app that has role="application"

to enable full keyboard support. It contains elements that represent visual information (such as a legend) and should not be read by a screen reader as this can be confusing. All necessary information is stored in the elements and read so that the user can understand the content. Therefore, I want to hide these elements.

<div class="chart" role="application" tabindex="0">
    <div class="legend" role="presentation" aria-hidden="true">
        Some text to explain the visual that 
        shouldn´t be read by any screenreader...
    </div>
    <div class="content">
        <!-- content ... -->
    </div>
</div>

      

        
        
        
      

    

But when the chart gets focus, a screen reader (NVDA 2014.4 or JAWS 16.0.1516 combined with IE11) reads the text all inside the chart - regardless of whether it is present aria-hidden="true"

, and also role="presentation"

, In Firefox, it works as it should.

Any ideas about this?