Using Custom Properties for Accessibility Labels

GoJS
1

I’m implementing accessibility features for interactive elements within my node templates. I’m using a custom property with underscore prefix to store ARIA labels:

$(go.Panel, 'Auto',

    {

        name: 'endNodeButton',

        _ariaLabel: 'focus is on the end node', // custom property for screen reader

        click: function(e, obj) {

            console.log('Button clicked');

        }

    },

    // ... shapes

)

Then in my keyboard handler, I read this property:

labelElement.textContent = obj._ariaLabel;

Is this the recommended approach for storing custom accessibility metadata on GraphObjects?

2

Yes, you could do that.

Are you aware of the new accessibility features in GoJS 3.1? I don’t think they will interfere with what you are doing (just my guess), but you should be aware of the functionality built into the new CommandHandler.

3

Thank you for confirming this approach!

I wanted to clarify how the underscore prefix works for custom properties. From my testing, I found that:

  • Without underscore (ariaLabel): GoJS throws an error like “Unknown property: ariaLabel” because it validates against known GoJS properties

  • With underscore (_ariaLabel): GoJS skips validation and sets it as a plain JavaScript property, which I can then access via obj._ariaLabel

So the underscore prefix acts as an “escape hatch” that tells GoJS: “This is a user-defined property, don’t validate it.”

Is this the correct understanding of how GoJS handles underscore-prefixed properties?

4

That is correct.

Most developers these days are using tools such as TypeScript (which did not exist when we released GoJS 1.0) and smart editors, and thus they are not using GraphObject.make as you are, so they get compile or edit time errors when setting mis-named properties to mis-typed values. That is why we added the GraphObject.attach method. GraphObject | GoJS API

Your code could instead be:

new go.Panel('Auto', {
    name: 'endNodeButton',
    click: (e, obj) => {
      console.log('Button clicked');
    }
  })
  .attach({
    _ariaLabel: 'focus is on the end node', // custom property for screen reader
  })
  .add(
    // ... shapes
  )

Also, have you looked at the accessibility features in GoJS 3.1? If you use them, it is fairly easy to help screen readers.

1 Like