diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index 15f9e48d71083e..2f8d8dd413674b 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -10,6 +10,25 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
 
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
+function roleSupportsCheckedState( role ) {
+	return [
+		'checkbox',
+		'option',
+		'radio',
+		'switch',
+		'menuitemcheckbox',
+		'menuitemradio',
+		'treeitem',
+	].includes( role );
+}
+
 function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
@@ -35,6 +54,10 @@ function ComplementaryAreaToggle( {
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
 			aria-controls={ identifier.replace( '/', ':' ) }
+			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+			aria-checked={
+				roleSupportsCheckedState( props.role ) ? isSelected : undefined
+			}
 			onClick={ () => {
 				if ( isSelected ) {
 					disableComplementaryArea( scope );