How to provide a meaningful text equivalent for the canvas element for accessibility RRS feed

  • Question

  • We're getting an accessibility violation that canvas elements should provide a meaningful text equivalent. There's no accessible name on the canvas element itself but there is a div with a tabindex and aria-label, unfortunately, since that div lacks a role not all the assistive technology is reading it.

    Testing with JAWS on Edge and Chrome the aria-label is read when navigating with the tab key but not when exploring the page with the arrow keys. NVDA does read it either way.

    We tried overwriting the inaccessible HTML with our own javascript but since we don't know when the map will load we're having trouble. Any ideas? 

    Friday, September 11, 2020 12:19 AM

All replies

  • Hi Jana,

    I reached out to our Maps Control Team and they have the following insights for you:

    Arrow keys are accessible so long as the map canvas / mapFocus element is in focus.

    Reading the post it sounds like they need to be able to modify the ‘mapFocus’ DOM element to add a role for the device they are using. This isn’t normally a requirement for accessibility to my knowledge. But if they need to do this, I did a quick test and they can achieve this with the following snippet on loading the load:

    function () { 
    document.getElementById('mapFocus').setAttribute('role', 'link');          

    They should be able to set the role of the mapFocus element as needed.



    Monday, September 14, 2020 6:52 PM