diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 44171d060f..e6cfd782be 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3078,8 +3078,8 @@ img {
 /* Metabox collapse arrow indicators */
 .js .sidebar-name .sidebar-name-arrow:before,
 .js .meta-box-sortables .postbox .toggle-indicator:before,
-.bulk-action-notice .toggle-indicator:before {
-	content: "\f142";
+.bulk-action-notice .toggle-indicator:before,
+.js .accordion-section .handlediv .sidebar-name-arrow:before {
 	display: inline-block;
 	font: normal 20px/1 dashicons;
 	speak: none;
@@ -3088,17 +3088,22 @@ img {
 	text-decoration: none !important;
 }
 
+/* Open state */
+.js .sidebar-name .sidebar-name-arrow:before,
+.js .meta-box-sortables .postbox .toggle-indicator:before,
+.bulk-action-notice .toggle-indicator:before,
+.js .accordion-section.open .handlediv .sidebar-name-arrow:before {
+	content: "\f142";
+}
+
+/* Closed state */
 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
-.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
+.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before,
+.js .accordion-section .handlediv .sidebar-name-arrow:before {
 	content: "\f140";
 }
 
-.js .sidebar-name .sidebar-name-arrow:before {
-	padding: 10px;
-	left: 0;
-}
-
 .js #widgets-left .sidebar-name .sidebar-name-arrow {
 	display: none;
 }
@@ -3141,6 +3146,36 @@ img {
 		0 0 2px 1px rgba(30, 140, 190, .8);
 }
 
+.js .metabox-holder .accordion-section .accordion-section-title:after {
+	content: none;
+}
+
+.js .metabox-holder .accordion-section .handlediv {
+	float: right;
+	position: relative;
+	top: 11px;
+	margin-right: 11px;
+	z-index: 2;
+}
+
+.js .metabox-holder .accordion-section .handlediv .sidebar-name-arrow:before {
+	width: 20px;
+	border-radius: 50%;
+	text-indent: -1px; /* account for the dashicon alignment */
+}
+
+.js .metabox-holder .accordion-section .handlediv:focus {
+	outline: none;
+	border: none;
+	box-shadow: none;
+}
+
+.js .metabox-holder .accordion-section .handlediv:focus .sidebar-name-arrow:before {
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 /* @todo: appears to be Press This only and overridden */
 #photo-add-url-div input[type="text"] {
 	width: 300px;
@@ -3238,7 +3273,9 @@ img {
 .nav-menus-php .item-edit:before,
 .widget-top .widget-action .toggle-indicator:before,
 .control-section .accordion-section-title:after,
-.accordion-section-title:after {
+.accordion-section-title:after,
+.accordion-section-arrow:after {
+	right: 0;
 	content: "\f140";
 	font: normal 20px/1 dashicons;
 	speak: none;
@@ -3298,7 +3335,8 @@ img {
 .control-section.open .accordion-section-title:after,
 #customize-info.open .accordion-section-title:after,
 .nav-menus-php .menu-item-edit-active .item-edit:before,
-.widget.open .widget-top .widget-action .toggle-indicator:before {
+.widget.open .widget-top .widget-action .toggle-indicator:before,
+.open .accordion-section-arrow:after {
 	content: "\f142";
 }
 
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index d06fc29f70..099bb7fb7d 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -193,11 +193,37 @@
 	box-sizing: border-box;
 }
 
-.sidebar-name-arrow {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
+.js .sidebar-name .handlediv {
+	float: right;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+}
+
+.js .sidebar-name .handlediv:focus {
+	box-shadow: none;
+	outline: none;
+}
+
+.js #widgets-left .sidebar-name .handlediv:focus .sidebar-name-arrow {
+	display: block;
+}
+
+.js .sidebar-name .handlediv:focus .sidebar-name-arrow:before {
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.js .sidebar-name .sidebar-name-arrow:before {
+	margin-top: 14px;
+	width: 20px;
+	border-radius: 50%;
+	text-indent: -1px; /* account for the dashicon alignment */
+}
+
+.js .widget-liquid-left .sidebar-name .sidebar-name-arrow:before {
+	margin-top: 7px;
 }
 
 .js .sidebar-name {
@@ -258,10 +284,6 @@ div#widgets-left .sidebar-name h3 {
 	margin: 0 10px 0 0;
 }
 
-#widgets-left .sidebar-name .sidebar-name-arrow:before {
-	padding: 9px;
-}
-
 #widgets-left .widgets-holder-wrap,
 div#widgets-left .widget-holder {
 	background: transparent;
@@ -351,10 +373,6 @@ div#widgets-right .sidebar-name h3 {
 	padding: 15px 7px;
 }
 
-div#widgets-right .sidebar-name .sidebar-name-arrow:before {
-	top: 2px;
-}
-
 div#widgets-right .widget-top {
 	padding: 0;
 }
diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
index 87236d4846..2620dac74c 100644
--- a/src/wp-admin/includes/template.php
+++ b/src/wp-admin/includes/template.php
@@ -1161,9 +1161,12 @@ function do_accordion_sections( $screen, $context, $object ) {
 					}
 					?>
 					<li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
-						<h3 class="accordion-section-title hndle" tabindex="0">
+						<button type="button" class="handlediv button-link" aria-expanded="true">
+							<span class="screen-reader-text"><?php echo sprintf( __( 'Toggle panel: %s' ), esc_html( $box['title'] ) ); ?></span>
+							<span class="sidebar-name-arrow" aria-hidden="true"></span>
+						</button>
+						<h3 class="accordion-section-title hndle">
 							<?php echo esc_html( $box['title'] ); ?>
-							<span class="screen-reader-text"><?php _e( 'Press return or enter to open this section' ); ?></span>
 						</h3>
 						<div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
 							<div class="inside">
diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php
index e6af6e7677..408165c8be 100644
--- a/src/wp-admin/includes/widgets.php
+++ b/src/wp-admin/includes/widgets.php
@@ -80,7 +80,10 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
 	if ( $sidebar_name ) {
 		?>
 		<div class="sidebar-name">
-			<div class="sidebar-name-arrow"><br /></div>
+			<button type="button" class="handlediv button-link" aria-expanded="true">
+				<span class="screen-reader-text"><?php echo sprintf( __( 'Toggle panel: %s' ), $sidebar_name ); ?></span>
+				<span class="sidebar-name-arrow" aria-hidden="true"></span>
+			</button>
 			<h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
 		</div>
 		<?php
diff --git a/src/wp-admin/js/accordion.js b/src/wp-admin/js/accordion.js
index af6281546f..6eb919aa8b 100644
--- a/src/wp-admin/js/accordion.js
+++ b/src/wp-admin/js/accordion.js
@@ -33,7 +33,7 @@
 	$( document ).ready( function () {
 
 		// Expand/Collapse accordion sections on click.
-		$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
+		$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title, .handlediv', function( e ) {
 			if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
 				return;
 			}
diff --git a/src/wp-admin/widgets.php b/src/wp-admin/widgets.php
index db4459b387..ade84bbdb1 100644
--- a/src/wp-admin/widgets.php
+++ b/src/wp-admin/widgets.php
@@ -387,7 +387,10 @@
 <div id="widgets-left">
 	<div id="available-widgets" class="widgets-holder-wrap">
 		<div class="sidebar-name">
-			<div class="sidebar-name-arrow"><br /></div>
+			<button type="button" class="handlediv button-link" aria-expanded="true">
+				<span class="screen-reader-text">Toggle panel: <?php _e( 'Available Widgets' ); ?></span>
+				<span class="sidebar-name-arrow" aria-hidden="true"></span>
+			</button>
 			<h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
 		</div>
 		<div class="widget-holder">