Search code examples
accessibilitywai-ariascreen-readersjaws-screen-reader

Label html string being read by screen reader

I've got some dynamically generated html building a drop down menu using the Dojo library. I need to make my code Accessibility compliant and right now the screenreader looks at the menu item and reads it as plain html:

menu.addChild(new MenuItem({
        label: "<a onclick=window.location.href='sampleurl.com'
                   href="sampleurl.com">Sample Link</a> ...

Excuse the onclick, it's for a different issue, but what I'm getting is basically:

Tab down to first menu item

Screenreader: "Less than a onclick equals window dot location dot href equals sampleurl"... etc

I've tried using aria-hidden, but the screen reader just reads that as text, I'm using voice over on Mac OS, but I need it compliant for JAWS as well. Any tips or advice? Thanks!

Solution

  • label is used for the label (which can be in HTML), not for putting the full link html tag.

    See on the following page how to use the Dojo library to generate menu items: https://dojotoolkit.org/reference-guide/1.10/dijit/Menu.html

    Example:

    menu.addChild(new MenuItem({
    label: "Sample Link",
    onclick: function() {window.location.href='sampleurl.com';}}));