diff --git a/js/CheckBox.js b/js/CheckBox.js index 7359f4b7..405f864d 100644 --- a/js/CheckBox.js +++ b/js/CheckBox.js @@ -46,6 +46,10 @@ define( function( require ) { tandem: Tandem.tandemRequired(), phetioType: TCheckBox, + // a11y + tagName: 'input', + inputType: 'checkbox', + /* * {function( {Node} checkBox, {boolean} enabled ) } * Strategy for controlling the check box's appearance, excluding any content. @@ -128,6 +132,11 @@ define( function( require ) { } ); this.addInputListener( this.checkBoxButtonListener ); + // a11y - input listener for the pDOM + this.addAccessibleInputListener( { + change: this.fire + }); + // @private - sync with property this.checkBoxCheckedListener = function( checked ) { self.checkedNode.visible = checked; diff --git a/js/RadioButton.js b/js/RadioButton.js index 24079ba2..0b9aefaa 100644 --- a/js/RadioButton.js +++ b/js/RadioButton.js @@ -31,7 +31,11 @@ define( function( require ) { options = _.extend( { cursor: 'pointer', tandem: Tandem.tandemRequired(), - enabled: true + enabled: true, + + // a11y + tagName: 'input', + inputType: 'radio' }, options ); assert && assert( !options.phetioValueType, 'phetioValueType should be specified in the property, not RadioButton options' ); @@ -71,6 +75,15 @@ define( function( require ) { } ); this.addInputListener( buttonListener ); + // a11y - input listener for the pDOM + this.addAccessibleInputListener( { + change: function( ) { + if ( self.domElement.value === 'on' ) { + fire(); + } + } + } ); + this.mutate( options ); this.disposeRadioButton = function() {