diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index d06bebedbd..867ce6bf14 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -865,8 +865,6 @@ hr {
 	border-bottom: 1px solid #fafafa;
 }
 
-.widget-control-remove,
-.widget-control-remove:focus,
 .row-actions span.delete a,
 .row-actions span.trash a,
 .row-actions span.spam a,
@@ -893,14 +891,10 @@ span.required,
 #media-items a.delete:hover,
 #media-items a.delete-permanently:hover,
 #nav-menu-footer .menu-delete:hover {
-	color: #f00;
+	color: #dc3232;
 	border: none;
 }
 
-.widget-control-remove:hover {
-	color: #f00;
-}
-
 /*------------------------------------------------------------------------------
   3.0 - Actions
 ------------------------------------------------------------------------------*/
@@ -3244,25 +3238,24 @@ img {
 
 /* @todo: can we use a common class for these? */
 .nav-menus-php .item-edit:before,
-.widget-top a.widget-action:after,
+.widget-top .widget-action .toggle-indicator:before,
 .control-section .accordion-section-title:after,
 .accordion-section-title:after {
-	right: 0;
 	content: "\f140";
-	border: none;
-	background: none;
 	font: normal 20px/1 dashicons;
 	speak: none;
 	display: block;
-	padding: 0;
-	text-indent: 0;
-	text-align: center;
-	position: relative;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-decoration: none !important;
 }
 
+.widget-top .widget-action .toggle-indicator:before {
+	padding: 1px 2px 1px 0px;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+}
+
 .handlediv,
 .postbox .handlediv.button-link,
 .item-edit,
@@ -3288,15 +3281,7 @@ img {
 	color: #23282d;
 }
 
-.widget-top a.widget-action:after {
-	padding: 1px 2px 1px 0px;
-	margin-top: 10px;
-	margin-right: 10px;
-	-webkit-border-radius: 50%;
-	border-radius: 50%;
-}
-
-.widget-top a.widget-action:focus:after {
+.widget-top .widget-action:focus .toggle-indicator:before {
 	-webkit-box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30,140,190,.8);
@@ -3315,7 +3300,7 @@ 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 a.widget-action:after {
+.widget.open .widget-top .widget-action .toggle-indicator:before {
 	content: "\f142";
 }
 
@@ -3594,8 +3579,8 @@ img {
 	/* @todo: evaluate - most of these were likely replaced by dashicons */
 	.curtime #timestamp,
 	#screen-meta-links a.show-settings,
-	.widget-top a.widget-action,
-	.widget-top a.widget-action:hover,
+	.widget-top .widget-action,
+	.widget-top .widget-action:hover,
 	.sidebar-name-arrow,
 	.sidebar-name:hover .sidebar-name-arrow,
 	.meta-box-sortables .postbox:hover .handlediv,
diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index c42fa54e2b..f2186fbb2f 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -153,7 +153,7 @@
 	text-align: center;
 }
 
-.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
+.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before {
 	content: "\f142";
 }
 
@@ -271,17 +271,18 @@
 	display: inline-block;
 	font-size: 20px;
 	line-height: 1;
-	text-indent: -1px; /* account for the dashicon alignment */
 }
 
 .rtl .wp-customizer .toggle-indicator {
 	text-indent: 1px; /* account for the dashicon alignment */
 }
 
-.wp-customizer .toggle-indicator:after {
+.wp-customizer .menu-item .item-edit .toggle-indicator:before,
+#available-menu-items .accordion-section-title .toggle-indicator:before {
 	content: "\f140";
+	display: block;
+	padding: 1px 2px 1px 0px;
 	speak: none;
-	vertical-align: top;
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 	color: #72777c;
@@ -494,13 +495,13 @@
 	content: none !important;
 }
 
-#available-menu-items .accordion-section-title:hover .toggle-indicator:after,
-#available-menu-items .button-link:hover .toggle-indicator:after,
-#available-menu-items .button-link:focus .toggle-indicator:after {
+#available-menu-items .accordion-section-title:hover .toggle-indicator:before,
+#available-menu-items .button-link:hover .toggle-indicator:before,
+#available-menu-items .button-link:focus .toggle-indicator:before {
 	color: #23282d;
 }
 
-#available-menu-items .open .accordion-section-title .toggle-indicator:after {
+#available-menu-items .open .accordion-section-title .toggle-indicator:before {
 	content: "\f142";
 	color: #23282d;
 }
@@ -837,7 +838,7 @@ li.assigned-to-menu-location .add-new-menu-item {
 .wp-customizer .menu-item .submitbox .submitdelete:focus,
 .customize-screen-options-toggle:focus:before,
 #customize-controls .customize-info .customize-help-toggle:focus:before,
-.wp-customizer button:focus .toggle-indicator:after,
+.wp-customizer button:focus .toggle-indicator:before,
 .menu-delete:focus,
 .menu-item-bar .item-delete:focus:before,
 #available-menu-items .item-add:focus:before {
diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css
index 687c9f85f4..428c45564a 100644
--- a/src/wp-admin/css/customize-widgets.css
+++ b/src/wp-admin/css/customize-widgets.css
@@ -89,15 +89,15 @@
 	line-height: 16px;
 }
 
-.customize-control-widget_form.expanded a.widget-action:after {
+.customize-control-widget_form.expanded .widget-action .toggle-indicator:before {
 	content: "\f142";
 }
 
-.customize-control-widget_form.wide-widget-control a.widget-action:after {
+.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before {
 	content: "\f139";
 }
 
-.customize-control-widget_form.wide-widget-control.expanded a.widget-action:after {
+.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before {
 	content: "\f141";
 }
 
@@ -438,9 +438,13 @@ body.adding-widget #customize-preview {
 	.last-widget {
 		margin-bottom: 15px;
 	}
+	/* This rule reduces the widgets titles height. */
 	.widget-title h3 {
 		padding: 13px 15px;
 	}
+	.widget-top .widget-action {
+		padding-bottom: 8px;
+	}
 	.widget-reorder-nav span {
 		height: 39px;
 	}
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index f0be076c0e..ae28a38e7f 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -14,12 +14,13 @@
 	background: #f7f7f7;
 }
 
-.widget-top a.widget-action,
-.widget-top a.widget-action:hover {
-	-webkit-box-shadow: none;
-	box-shadow: none;
+.widget-top .widget-action {
+	border: 0;
+	margin: 0;
+	padding: 10px;
+	background: none;
+	cursor: pointer;
 	outline: none;
-	text-decoration: none;
 }
 
 .widget-title h3,
@@ -50,7 +51,7 @@
 }
 
 .deleting .widget-title,
-.deleting .widget-top a.widget-action:after {
+.deleting .widget-top .widget-action .toggle-indicator:before {
 	color: #a0a5aa;
 }
 
diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php
index fe2a957fa7..e6af6e7677 100644
--- a/src/wp-admin/includes/widgets.php
+++ b/src/wp-admin/includes/widgets.php
@@ -219,7 +219,10 @@ function wp_widget_control( $sidebar_args ) {
 	echo $sidebar_args['before_widget']; ?>
 	<div class="widget-top">
 	<div class="widget-title-action">
-		<a class="widget-action hide-if-no-js" href="#available-widgets"></a>
+		<button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
+			<span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
+			<span class="toggle-indicator" aria-hidden="true"></span>
+		</button>
 		<a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">
 			<span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span>
 			<span class="add"><?php _ex( 'Add', 'widget' ); ?></span>
@@ -250,8 +253,8 @@ function wp_widget_control( $sidebar_args ) {
 
 	<div class="widget-control-actions">
 		<div class="alignleft">
-		<a class="widget-control-remove" href="#remove"><?php _e('Delete'); ?></a> |
-		<a class="widget-control-close" href="#close"><?php _e('Close'); ?></a>
+			<button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> |
+			<button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button>
 		</div>
 		<div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
 			<?php submit_button( __( 'Save' ), 'primary widget-control-save right', 'savewidget', false, array( 'id' => 'widget-' . esc_attr( $id_format ) . '-savewidget' ) ); ?>
diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index b482e8d607..df4c8d777b 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/wp-admin/js/customize-widgets.js
@@ -952,7 +952,7 @@
 			var self = this, $removeBtn, replaceDeleteWithRemove;
 
 			// Configure remove button
-			$removeBtn = this.container.find( 'a.widget-control-remove' );
+			$removeBtn = this.container.find( '.widget-control-remove' );
 			$removeBtn.on( 'click', function( e ) {
 				e.preventDefault();
 
@@ -988,7 +988,7 @@
 			} );
 
 			replaceDeleteWithRemove = function() {
-				$removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
+				$removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the button as "Delete"
 				$removeBtn.attr( 'title', l10n.removeBtnTooltip );
 			};
 
@@ -1367,7 +1367,7 @@
 		 * @param {Object} args  merged on top of this.defaultActiveArguments
 		 */
 		onChangeExpanded: function ( expanded, args ) {
-			var self = this, $widget, $inside, complete, prevComplete, expandControl;
+			var self = this, $widget, $inside, complete, prevComplete, expandControl, $toggleBtn;
 
 			self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
 			if ( expanded ) {
@@ -1386,6 +1386,7 @@
 
 			$widget = this.container.find( 'div.widget:first' );
 			$inside = $widget.find( '.widget-inside:first' );
+			$toggleBtn = this.container.find( '.widget-top button.widget-action' );
 
 			expandControl = function() {
 
@@ -1399,6 +1400,7 @@
 				complete = function() {
 					self.container.removeClass( 'expanding' );
 					self.container.addClass( 'expanded' );
+					$toggleBtn.attr( 'aria-expanded', 'true' );
 					self.container.trigger( 'expanded' );
 				};
 				if ( args.completeCallback ) {
@@ -1428,10 +1430,10 @@
 					expandControl();
 				}
 			} else {
-
 				complete = function() {
 					self.container.removeClass( 'collapsing' );
 					self.container.removeClass( 'expanded' );
+					$toggleBtn.attr( 'aria-expanded', 'false' );
 					self.container.trigger( 'collapsed' );
 				};
 				if ( args.completeCallback ) {
diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js
index aa439ea552..77cf8f92fa 100644
--- a/src/wp-admin/js/widgets.js
+++ b/src/wp-admin/js/widgets.js
@@ -41,7 +41,8 @@ wpWidgets = {
 		$(document.body).bind('click.widgets-toggle', function(e) {
 			var target = $(e.target),
 				css = { 'z-index': 100 },
-				widget, inside, targetWidth, widgetWidth, margin;
+				widget, inside, targetWidth, widgetWidth, margin,
+				toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
 
 			if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
 				widget = target.closest('div.widget');
@@ -60,10 +61,21 @@ wpWidgets = {
 						css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';
 						widget.css( css );
 					}
-					widget.addClass( 'open' );
-					inside.slideDown('fast');
+					/*
+					 * Don't change the order of attributes changes and animation:
+					 * it's important for screen readers, see ticket #31476.
+					 */
+					toggleBtn.attr( 'aria-expanded', 'true' );
+					inside.slideDown( 'fast', function() {
+						widget.addClass( 'open' );
+					});
 				} else {
-					inside.slideUp('fast', function() {
+					/*
+					 * Don't change the order of attributes changes and animation:
+					 * it's important for screen readers, see ticket #31476.
+					 */
+					toggleBtn.attr( 'aria-expanded', 'false' );
+					inside.slideUp( 'fast', function() {
 						widget.attr( 'style', '' );
 						widget.removeClass( 'open' );
 					});
@@ -78,6 +90,7 @@ wpWidgets = {
 			} else if ( target.hasClass('widget-control-close') ) {
 				widget = target.closest('div.widget');
 				widget.removeClass( 'open' );
+				toggleBtn.attr( 'aria-expanded', 'false' );
 				wpWidgets.close( widget );
 				e.preventDefault();
 			} else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) {
@@ -92,7 +105,7 @@ wpWidgets = {
 			wpWidgets.appendTitle( this );
 
 			if ( $this.find( 'p.widget-error' ).length ) {
-				$this.find( 'a.widget-action' ).trigger('click');
+				$this.find( '.widget-action' ).trigger( 'click' ).attr( 'aria-expanded', 'true' );
 			}
 		});
 
@@ -182,6 +195,7 @@ wpWidgets = {
 
 				if ( inside.css('display') === 'block' ) {
 					ui.item.removeClass('open');
+					ui.item.find( '.widget-top button.widget-action' ).attr( 'aria-expanded', 'false' );
 					inside.hide();
 					$(this).sortable('refreshPositions');
 				}
@@ -254,7 +268,7 @@ wpWidgets = {
 				}
 
 				if ( addNew ) {
-					$widget.find( 'a.widget-action' ).trigger('click');
+					$widget.find( '.widget-action' ).trigger( 'click' );
 				} else {
 					wpWidgets.saveOrder( $sidebar.attr('id') );
 				}
@@ -492,7 +506,10 @@ wpWidgets = {
 
 	close : function(widget) {
 		widget.children('.widget-inside').slideUp('fast', function() {
-			widget.attr( 'style', '' );
+			widget.attr( 'style', '' )
+				.find( '.widget-top button.widget-action' )
+					.attr( 'aria-expanded', 'false' )
+					.focus();
 		});
 	},
 
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 2410b9208c..80ecd0718b 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -242,7 +242,7 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-link-delete:hover,
 .wp-core-ui .button-link-delete:focus {
-	color: #f00;
+	color: #dc3232;
 }
 
 .ie8 .wp-core-ui .button-link:focus {