From 226dc751549bb3a13283d77aadcd4ffa34b4d3d7 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Fri, 7 Jun 2019 20:43:26 +0000
Subject: [PATCH] Accessibility: Improve accessibility of all the media views
 form controls.

- changes the media views form controls to have explicitly associated labels with for/id attributes
- adds a few missing labels / aria-labels
- improves a few existing labels / aria-labels
- improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- improves the image custom size input fields and their labelling
- adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies
- swaps the columns source order in the image details template, to make visual and DOM order match
- swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
- gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
- makes the "upload-ui" consistent across the media views
- hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner
- adds comments to all the media templates to clarify their usage
- slightly increases vertical spacing between form fields in the media sidebar
- removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
- removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.


git-svn-id: https://develop.svn.wordpress.org/trunk@45499 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../vendor/mediaelement/wp-mediaelement.css   |   8 +-
 src/js/media/views/embed/url.js               |  11 +-
 src/js/media/views/frame/image-details.js     |   4 +-
 .../views/settings/attachment-display.js      |   4 +-
 src/wp-admin/css/media.css                    |  18 +-
 src/wp-admin/includes/image-edit.php          |  49 +-
 src/wp-admin/includes/media.php               |   2 +-
 src/wp-includes/css/buttons.css               |   1 -
 src/wp-includes/css/media-views.css           | 393 ++++-----
 src/wp-includes/media-template.php            | 771 ++++++++++--------
 10 files changed, 644 insertions(+), 617 deletions(-)

diff --git a/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css b/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css
index c8a08194e1..e9dc52c958 100644
--- a/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css
+++ b/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css
@@ -67,9 +67,9 @@
 	overflow: visible;
 }
 
-.media-embed-details .embed-media-settings .setting span {
-	max-width: 400px;
-	width: auto;
+.media-embed-details .embed-media-settings .setting span:not(.button-group) {
+	max-width: 400px; /* Back-compat for pre-5.3 */
+	width: auto; /* Back-compat for pre-5.3 */
 }
 
 .media-embed-details .embed-media-settings .checkbox-setting span {
@@ -94,7 +94,7 @@
 }
 
 .media-embed-details .setting .remove-setting {
-	padding: 0;
+	padding: 5px 0;
 }
 
 .media-embed-details .setting a:hover {
diff --git a/src/js/media/views/embed/url.js b/src/js/media/views/embed/url.js
index ed485d6aa6..d27b93caa3 100644
--- a/src/js/media/views/embed/url.js
+++ b/src/js/media/views/embed/url.js
@@ -1,5 +1,6 @@
 var View = wp.media.View,
 	$ = jQuery,
+	l10n = wp.media.view.l10n,
 	EmbedUrl;
 
 /**
@@ -13,17 +14,17 @@ var View = wp.media.View,
  * @augments Backbone.View
  */
 EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
-	tagName:   'label',
+	tagName:   'span',
 	className: 'embed-url',
 
 	events: {
-		'input':  'url',
-		'keyup':  'url',
-		'change': 'url'
+		'input': 'url'
 	},
 
 	initialize: function() {
-		this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
+		this.$input = $( '<input id="embed-url-field" type="url" />' )
+			.attr( 'aria-label', l10n.insertFromUrlTitle )
+			.val( this.model.get('url') );
 		this.input = this.$input[0];
 
 		this.spinner = $('<span class="spinner" />')[0];
diff --git a/src/js/media/views/frame/image-details.js b/src/js/media/views/frame/image-details.js
index 5188a8907f..a270df8875 100644
--- a/src/js/media/views/frame/image-details.js
+++ b/src/js/media/views/frame/image-details.js
@@ -134,7 +134,7 @@ ImageDetails = Select.extend(/** @lends wp.media.view.MediaFrame.ImageDetails.pr
 			items: {
 				back: {
 					text:     l10n.back,
-					priority: 20,
+					priority: 80,
 					click:    function() {
 						if ( previous ) {
 							frame.setState( previous );
@@ -147,7 +147,7 @@ ImageDetails = Select.extend(/** @lends wp.media.view.MediaFrame.ImageDetails.pr
 				replace: {
 					style:    'primary',
 					text:     l10n.replace,
-					priority: 80,
+					priority: 20,
 					requires: { selection: true },
 
 					click: function() {
diff --git a/src/js/media/views/settings/attachment-display.js b/src/js/media/views/settings/attachment-display.js
index 584c8458ae..0d8eadfb92 100644
--- a/src/js/media/views/settings/attachment-display.js
+++ b/src/js/media/views/settings/attachment-display.js
@@ -66,7 +66,7 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
 			attachment = this.options.attachment;
 
 		if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
-			$input.addClass( 'hidden' );
+			$input.closest( '.setting' ).addClass( 'hidden' );
 			return;
 		}
 
@@ -82,7 +82,7 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
 			$input.prop( 'readonly', 'custom' !== linkTo );
 		}
 
-		$input.removeClass( 'hidden' );
+		$input.closest( '.setting' ).removeClass( 'hidden' );
 
 		// If the input is visible, focus and select its contents.
 		if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index d7b8af268b..23796aacc2 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -374,12 +374,11 @@
 }
 
 .drag-drop .drag-drop-inside {
-	margin: 70px auto 0;
+	margin: 60px auto 0;
 	width: 250px;
 }
 
 .drag-drop-inside p {
-	color: #a0a5aa;
 	font-size: 14px;
 	margin: 5px 0;
 	display: none;
@@ -480,7 +479,6 @@ border color while dragging a file over the uploader drop area */
 	color: #c00;
 }
 
-.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 	display: none;
 }
@@ -1031,7 +1029,6 @@ border color while dragging a file over the uploader drop area */
 	display: block;
 }
 
-#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
 #poststuff .imgedit-group-top h2 {
 	display: inline-block;
 	margin: 0;
@@ -1109,6 +1106,10 @@ span.imgedit-scale-warn {
 	margin: 8px 0;
 }
 
+.imgedit-save-target legend {
+	font-weight: 600;
+}
+
 .imgedit-group {
 	margin-bottom: 8px;
 	padding: 10px;
@@ -1126,7 +1127,6 @@ span.imgedit-scale-warn {
 	display: inline-block;
 	width: 7px;
 	text-align: center;
-	vertical-align: middle;
 	font-size: 13px;
 	color: #444;
 }
@@ -1190,10 +1190,6 @@ audio, video {
 		font-size: 16px;
 		padding: 6px 10px;
 	}
-
-	.imgedit-applyto .imgedit-label {
-		vertical-align: middle;
-	}
 }
 
 /**
@@ -1232,10 +1228,6 @@ audio, video {
 		height: 40px;
 	}
 
-	.upload-php .media-modal-close .media-modal-icon {
-		margin: 9px 10px;
-	}
-
 	.edit-attachment-frame .edit-media-header .right:before,
 	.edit-attachment-frame .edit-media-header .left:before {
 		line-height: 40px !important;
diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index e1ae86b607..4fd3208934 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -64,16 +64,14 @@ function wp_image_editor( $post_id, $msg = false ) {
 		<fieldset class="imgedit-scale">
 		<legend><?php _e( 'New dimensions:' ); ?></legend>
 		<div class="nowrap">
-		<label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
+		<label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
 		<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
-		</label>
-		<span class="imgedit-separator">&times;</span>
-		<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
+		<span class="imgedit-separator" aria-hidden="true">&times;</span>
+		<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
 		<input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
-		</label>
 		<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
 		<input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
-		 </div>
+		</div>
 		</fieldset>
 
 		</div>
@@ -124,26 +122,22 @@ function wp_image_editor( $post_id, $msg = false ) {
 	<fieldset class="imgedit-crop-ratio">
 		<legend><?php _e( 'Aspect ratio:' ); ?></legend>
 		<div class="nowrap">
-		<label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
+		<label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
 		<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
-		</label>
-		<span class="imgedit-separator">:</span>
-		<label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
+		<span class="imgedit-separator" aria-hidden="true">:</span>
+		<label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
 		<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
-		</label>
 		</div>
 	</fieldset>
 
 	<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
 		<legend><?php _e( 'Selection:' ); ?></legend>
 		<div class="nowrap">
-		<label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
+		<label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
 		<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
-		</label>
-		<span class="imgedit-separator">&times;</span>
-		<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
+		<span class="imgedit-separator" aria-hidden="true">&times;</span>
+		<label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
 		<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
-		</label>
 		</div>
 	</fieldset>
 
@@ -168,19 +162,22 @@ function wp_image_editor( $post_id, $msg = false ) {
 
 	<div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
 	<fieldset>
-		<legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
+		<legend><?php _e( 'Apply changes to:' ); ?></legend>
 
-		<label class="imgedit-label">
-		<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
-		<?php _e( 'All image sizes' ); ?></label>
+		<span class="imgedit-label">
+			<input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
+			<label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
+		</span>
 
-		<label class="imgedit-label">
-		<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
-		<?php _e( 'Thumbnail' ); ?></label>
+		<span class="imgedit-label">
+			<input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
+			<label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
+		</span>
 
-		<label class="imgedit-label">
-		<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
-		<?php _e( 'All sizes except thumbnail' ); ?></label>
+		<span class="imgedit-label">
+			<input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
+			<label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
+		</span>
 	</fieldset>
 	</div>
 	</div>
diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
index 89b2604e64..cee20f4683 100644
--- a/src/wp-admin/includes/media.php
+++ b/src/wp-admin/includes/media.php
@@ -2072,7 +2072,7 @@ wpUploaderInit = <?php echo wp_json_encode( $plupload_init ); ?>;
 	?>
 <div id="drag-drop-area">
 	<div class="drag-drop-inside">
-	<p class="drag-drop-info"><?php _e( 'Drop files here' ); ?></p>
+	<p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
 	<p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
 	<p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
 	</div>
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 45dab454ef..523daa8352 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -309,7 +309,6 @@ TABLE OF CONTENTS:
 	display: inline-block;
 	border-radius: 0;
 	margin-right: -1px;
-	z-index: 10;
 }
 
 .wp-core-ui .button-group > .button-primary {
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 9673699f4d..e755edddbb 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -18,11 +18,22 @@
 	-webkit-overflow-scrolling: touch;
 }
 
-.media-modal legend,
+.media-modal legend {
+	padding: 0;
+	font-size: 13px;
+}
+
 .media-modal label {
 	font-size: 13px;
 }
 
+.media-modal .legend-inline {
+	position: absolute;
+	transform: translate(-100%, 50%);
+	margin-left: -1%;
+	line-height: 1.2;
+}
+
 .media-frame input,
 .media-frame textarea {
 	padding: 6px 8px;
@@ -30,8 +41,10 @@
 
 .media-frame select,
 .wp-admin .media-frame select {
+	padding: 2px;
 	line-height: 2;
-	margin-top: 3px;
+	height: 28px;
+	vertical-align: middle;
 }
 
 .media-frame a {
@@ -92,11 +105,6 @@
 	border-color: #5b9dd9;
 }
 
-.media-frame select {
-	height: 24px;
-	padding: 2px;
-}
-
 .media-frame input:disabled,
 .media-frame textarea:disabled,
 .media-frame input[readonly],
@@ -121,7 +129,12 @@
 	color: #72777c;
 }
 
-.media-frame .hidden {
+/*
+ * In some cases there's the need of higher specificity,
+ * for example higher than `.media-embed .setting`.
+ */
+.media-frame .hidden,
+.media-frame .setting.hidden {
 	display: none;
 }
 
@@ -234,10 +247,6 @@
 	width: calc(48% - 12px);
 }
 
-.media-modal-content .media-toolbar-primary .media-button {
-	float: right;
-}
-
 .media-modal-content .attachments-browser .search {
 	width: 100%;
 }
@@ -321,25 +330,6 @@
 	bottom: 0;
 }
 
-.media-sidebar .sidebar-title {
-	font-size: 20px;
-	margin: 0;
-	padding: 12px 10px 10px;
-	line-height: 28px;
-}
-
-.media-sidebar .sidebar-content {
-	padding: 0 10px;
-	margin-bottom: 130px;
-}
-
-.media-sidebar .search {
-	display: block;
-	width: 100%;
-}
-
-.media-sidebar h3, /* Back-compat for pre-4.4 */
-.image-details h3, /* Back-compat for pre-4.4 */
 .media-sidebar h2,
 .image-details h2 {
 	position: relative;
@@ -355,21 +345,27 @@
 	display: block;
 	float: left;
 	width: 100%;
+	margin: 0 0 10px;
+}
+
+.media-sidebar .collection-settings .setting {
 	margin: 1px 0;
 }
 
-.media-sidebar .setting label,
-.attachment-details .setting label {
-	display: block;
+.media-sidebar .setting.has-description,
+.attachment-details .setting.has-description {
+	margin-bottom: 5px;
 }
 
-.media-sidebar .setting .link-to-custom,
-.attachment-details .setting .link-to-custom {
+.media-sidebar .setting .link-to-custom {
 	margin: 3px 2px 0;
 }
 
-.media-sidebar .setting span,
-.attachment-details .setting span {
+.media-sidebar .setting span, /* Back-compat for pre-5.3 */
+.attachment-details .setting span, /* Back-compat for pre-5.3 */
+.media-sidebar .setting .name,
+.media-sidebar .setting .value,
+.attachment-details .setting .name {
 	min-width: 30%;
 	margin-right: 4%;
 	font-size: 12px;
@@ -381,8 +377,11 @@
 	max-width: 80px;
 }
 
-.media-sidebar .setting select,
-.attachment-details .setting select {
+.media-sidebar .setting .value {
+	text-align: left;
+}
+
+.media-sidebar .setting select {
 	max-width: 65%;
 }
 
@@ -399,8 +398,13 @@
 	padding: 0;
 }
 
-.media-sidebar .setting span,
-.attachment-details .setting span,
+.media-sidebar .setting span, /* Back-compat for pre-5.3 */
+.attachment-details .setting span, /* Back-compat for pre-5.3 */
+.media-sidebar .setting .name,
+.media-sidebar .setting .value,
+.media-sidebar .checkbox-label-inline,
+.attachment-details .setting .name,
+.attachment-details .setting .value,
 .compat-item label span {
 	float: left;
 	min-height: 22px;
@@ -410,6 +414,10 @@
 	color: #666;
 }
 
+.media-sidebar .checkbox-label-inline {
+	font-size: 12px;
+}
+
 .compat-item label span {
 	text-align: right;
 }
@@ -450,7 +458,7 @@
 	clear: both;
 	font-size: 12px;
 	font-style: normal;
-	margin-bottom: 0.5em;
+	margin-bottom: 10px;
 }
 
 .media-sidebar .setting textarea,
@@ -460,11 +468,6 @@
 	resize: vertical;
 }
 
-.media-sidebar select,
-.attachment-details select {
-	margin-top: 3px;
-}
-
 .compat-item {
 	float: left;
 	width: 100%;
@@ -759,8 +762,7 @@
 	max-height: 100%;
 }
 
-.media-frame-content .crop-content .upload-errors
-{
+.media-frame-content .crop-content .upload-errors {
 	position: absolute;
 	width: 300px;
 	top: 50%;
@@ -940,11 +942,6 @@
 	transform: translate( -50%, -70% );
 }
 
-.ie8 .wp-core-ui .attachment img.icon {
-	top: 20%;
-	position: relative;
-}
-
 .wp-core-ui .attachment .filename {
 	position: absolute;
 	left: 0;
@@ -1201,7 +1198,6 @@
 	max-width: 400px;
 }
 
-.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
 .uploader-inline .media-uploader-status h2 {
 	display: none;
 }
@@ -1289,21 +1285,39 @@
 	word-wrap: break-word;
 }
 
-.uploader-window {
-	position: fixed;
+/**
+ * Window and Editor uploaders used to display "drop zones"
+ */
+.uploader-window,
+.wp-editor-wrap .uploader-editor {
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: rgba(0, 86, 132, 0.9);
-	z-index: 250000;
-	display: none;
 	text-align: center;
-	opacity: 0;
+	display: none;
+}
+
+.uploader-window {
+	position: fixed;
+	z-index: 250000;
+	opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
 	transition: opacity 250ms;
 }
 
-.uploader-window-content {
+.wp-editor-wrap .uploader-editor {
+	position: absolute;
+	z-index: 99998; /* under the toolbar */
+	background: rgba(150, 150, 150, 0.9);
+}
+
+.uploader-window,
+.wp-editor-wrap .uploader-editor.droppable {
+	background: rgba(0, 86, 132, 0.9);
+}
+
+.uploader-window-content,
+.wp-editor-wrap .uploader-editor-content {
 	position: absolute;
 	top: 10px;
 	left: 10px;
@@ -1312,17 +1326,29 @@
 	border: 1px dashed #fff;
 }
 
-.uploader-window h3, /* Back-compat for pre-4.4 */
-.uploader-window h1 {
-	margin: -0.5em 0 0;
+/* uploader drop-zone title */
+.uploader-window h1, /* Back-compat for pre-5.3 */
+.uploader-window .uploader-editor-title,
+.wp-editor-wrap .uploader-editor .uploader-editor-title {
 	position: absolute;
 	top: 50%;
 	left: 0;
 	right: 0;
-	transform: translateY( -50% );
-	font-size: 40px;
+	transform: translateY(-50%);
+	font-size: 3em;
+	line-height: 1.3;
+	font-weight: 600;
 	color: #fff;
-	padding: 0;
+	margin: 0;
+	padding: 0 10px;
+}
+
+.wp-editor-wrap .uploader-editor .uploader-editor-title {
+	display: none;
+}
+
+.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
+	display: block;
 }
 
 .uploader-window .media-progress-bar {
@@ -1366,7 +1392,6 @@
 	margin: 0 0 4em;
 }
 
-.uploader-inline h3, /* Back-compat for pre-4.4 */
 .uploader-inline h2 {
 	font-size: 20px;
 	line-height: 1.4;
@@ -1389,7 +1414,6 @@
 }
 
 .uploader-inline p {
-	font-size: 12px;
 	margin: 0.5em 0;
 }
 
@@ -1580,15 +1604,15 @@
 .attachment-details .settings-save-status {
 	float: right;
 	text-transform: none;
-	z-index: 10;
+	font-weight: 400;
 }
 
 .attachment-details .settings-save-status .spinner {
+	float: none;
 	margin-left: 5px;
 }
 
 .attachment-details .settings-save-status .saved {
-	float: right;
 	display: none;
 }
 
@@ -1597,7 +1621,7 @@
 }
 
 .attachment-details.save-complete .settings-save-status .saved {
-	display: block;
+	display: inline-block;
 }
 
 .attachment-info {
@@ -1704,10 +1728,6 @@
 	overflow: hidden;
 }
 
-.attachment-display-settings h4 {
-	margin: 1.4em 0 0.4em;
-}
-
 .collection-settings {
 	overflow: hidden;
 }
@@ -1717,7 +1737,8 @@
 	margin-right: 8px;
 }
 
-.collection-settings .setting span {
+.collection-settings .setting span, /* Back-compat for pre-5.3 */
+.collection-settings .setting .name {
 	min-width: inherit;
 }
 
@@ -1772,7 +1793,6 @@
 	margin: 0;
 }
 
-.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
 .media-modal .imgedit-group-top h2,
 .media-modal .imgedit-group-top h2 .button-link {
 	display: inline-block;
@@ -1783,7 +1803,6 @@
 	margin-top: 3px;
 }
 
-.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
 .media-modal .imgedit-group-top h2 a,
 .media-modal .imgedit-group-top h2 .button-link {
 	text-decoration: none;
@@ -1839,7 +1858,6 @@
 	margin-bottom: 16px;
 }
 
-
 /**
  * Embed from URL and Image Details
  */
@@ -1855,12 +1873,16 @@
 
 .media-frame .embed-url input {
 	font-size: 18px;
-	padding: 12px 14px;
+	padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
 	width: 100%;
 	min-width: 200px;
 	box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
+.media-frame .embed-url input::-ms-clear {
+	display: none; /* the "x" in IE 11 conflicts with the spinner */
+}
+
 .media-frame .embed-url .spinner {
 	position: absolute;
 	top: 32px;
@@ -1878,7 +1900,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 16px 16px 32px;
+	padding: 0 16px 32px;
 	overflow: auto;
 }
 
@@ -1941,7 +1963,6 @@
 	left: 0;
 }
 
-.image-details .column-settings h3, /* Back-compat for pre-4.4 */
 .image-details .column-settings h2 {
 	margin: 20px;
 	padding-top: 20px;
@@ -1992,22 +2013,14 @@
 	content: "\f142";
 }
 
-.image-details .embed-media-settings .size {
-	margin-bottom: 4px;
-}
-
-.image-details .custom-size span {
-	display: block;
-}
-
-.image-details .custom-size label {
+.image-details .custom-size label, /* Back-compat for pre-5.3 */
+.image-details .custom-size .custom-size-setting {
 	display: block;
 	float: left;
 }
 
-.image-details .custom-size span small {
-	color: #555d66; /* #f3f3f3 background */
-	font-size: inherit;
+.image-details .custom-size .custom-size-setting label {
+	float: none;
 }
 
 .image-details .custom-size input {
@@ -2019,10 +2032,8 @@
 	margin: 26px 6px 0 6px;
 }
 
-.image-details .custom-size:after {
-	content: "";
-	display: table;
-	clear: both;
+.image-details .custom-size .description {
+	margin-left: 0;
 }
 
 .media-embed .thumbnail {
@@ -2049,7 +2060,8 @@
 	overflow: hidden;
 }
 
-.media-embed .setting {
+.media-embed .setting,
+.media-embed .setting-group {
 	width: 100%;
 	margin: 10px 0;
 	float: left;
@@ -2057,6 +2069,10 @@
 	clear: both;
 }
 
+.media-embed .setting-group .setting:not(.checkbox-setting) {
+	margin: 0;
+}
+
 .media-embed .setting.has-description {
 	margin-bottom: 5px;
 }
@@ -2066,7 +2082,8 @@
 	font-style: normal;
 }
 
-.image-details .embed-media-settings .setting {
+.image-details .embed-media-settings .setting,
+.image-details .embed-media-settings .setting-group {
 	float: none;
 	width: auto;
 }
@@ -2080,11 +2097,11 @@
 }
 
 .media-embed .setting input[type="text"],
-.media-embed .setting textarea {
+.media-embed .setting textarea,
+.media-embed fieldset {
 	display: block;
 	width: 100%;
 	max-width: 400px;
-	margin: 1px 0;
 }
 
 .image-details .embed-media-settings .setting input[type="text"],
@@ -2096,6 +2113,7 @@
 .image-details .embed-media-settings .setting input.link-to-custom,
 .image-details .embed-media-settings .link-target,
 .image-details .embed-media-settings .custom-size,
+.image-details .embed-media-settings .setting-group,
 .image-details .description {
 	margin-left: 27%;
 	width: 70%;
@@ -2107,7 +2125,13 @@
 }
 
 .image-details .embed-media-settings .link-target {
-	margin-top: 24px;
+	margin-top: 16px;
+}
+
+.image-details .checkbox-label,
+.audio-details .checkbox-label,
+.video-details .checkbox-label {
+	vertical-align: baseline;
 }
 
 .media-embed .setting input.hidden,
@@ -2115,15 +2139,22 @@
 	display: none;
 }
 
-.media-embed .setting span {
-	display: block;
-	width: 200px;
+.media-embed .setting span, /* Back-compat for pre-5.3 */
+.media-embed .setting .name,
+.media-embed .setting-group .name {
+	display: inline-block;
 	font-size: 13px;
 	line-height: 1.84615384;
 	color: #666;
 }
 
-.image-details .embed-media-settings .setting span {
+.media-embed .setting span {
+	display: block; /* Back-compat for pre-5.3 */
+	width: 200px; /* Back-compat for pre-5.3 */
+}
+
+.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
+.image-details .embed-media-settings .setting .name {
 	float: left;
 	width: 25%;
 	text-align: right;
@@ -2131,10 +2162,6 @@
 	line-height: 1.1;
 }
 
-.media-embed .setting .button-group {
-	margin: 2px 0;
-}
-
 .media-embed-sidebar {
 	position: absolute;
 	top: 0;
@@ -2146,99 +2173,14 @@
 	margin-top: 10px;
 }
 
-/* Drag & drop on the editor upload */
-.wp-editor-wrap .uploader-editor {
-	background: rgba(150, 150, 150, 0.9);
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 99998; /* under the toolbar */
-	display: none;
-	text-align: center;
-}
-
-.wp-editor-wrap .uploader-editor-content {
-	border: 1px dashed #fff;
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	right: 10px;
-	bottom: 10px;
-}
-
-.wp-editor-wrap .uploader-editor .uploader-editor-title {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	right: 0;
-	transform: translateY( -50% );
-	font-size: 3em;
-	line-height: 1.3;
-	font-weight: 600;
-	color: #fff;
-	padding: 0;
-	margin: 0;
-	display: none;
-}
-
-.wp-editor-wrap .uploader-editor.droppable {
-	background: rgba(0, 86, 132, 0.9);
-}
-
-.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
-	display: block;
-}
-
 /**
- * IE7 Fixes
+ * Button groups fix: can be removed together with the Back-compat for pre-5.3
  */
-.ie7 .media-frame .attachments-browser {
-	position: static;
-}
-
-.ie7 .media-frame .embed-url input {
-	margin-top: 4px;
-	width: 90%;
-}
-
-.ie7 .compat-item {
-	width: 99%;
-}
-
-.ie7 .attachment-display-settings {
-	width: auto;
-}
-
-.ie7 .attachment-preview,
-.ie7 .attachment-preview .thumbnail {
-	width: 120px;
-	height: 120px;
-}
-
-.ie7 .media-frame .attachment .describe {
-	width: 102px;
-}
-
-.ie7 .media-sidebar .setting select {
-	max-width: 55%;
-}
-
-.ie7 .media-sidebar .setting input[type="text"],
-.ie7 .media-sidebar .setting input[type="password"],
-.ie7 .media-sidebar .setting input[type="email"],
-.ie7 .media-sidebar .setting input[type="number"],
-.ie7 .media-sidebar .setting input[type="search"],
-.ie7 .media-sidebar .setting input[type="tel"],
-.ie7 .media-sidebar .setting input[type="url"],
-.ie7 .media-sidebar .setting textarea {
-	width: 55%;
-}
-
-.ie7 .media-sidebar .setting .link-to-custom {
-	float: left;
-}
+ .media-frame .setting .button-group {
+	 display: flex;
+	 margin: 0 !important;
+	 max-width: none !important;
+ }
 
 /**
  * Localization
@@ -2355,21 +2297,33 @@
 
 	.media-sidebar .setting input,
 	.media-sidebar .setting textarea,
-	.media-sidebar .setting span,
+	.media-sidebar .setting .name,
 	.attachment-details .setting input,
 	.attachment-details .setting textarea,
-	.attachment-details .setting span,
+	.attachment-details .setting .name,
 	.compat-item label span {
 		float: none;
+		display: inline-block;
+	}
+
+	.media-sidebar .setting span, /* Back-compat for pre-5.3 */
+	.attachment-details .setting span, /* Back-compat for pre-5.3 */
+	.media-sidebar .checkbox-label-inline {
+		float: none;
 	}
 
-	.media-sidebar .setting span,
-	.attachment-details .setting span,
+	.media-sidebar .setting .select-label-inline {
+		display: inline;
+	}
+
+	.media-sidebar .setting .name,
+	.media-sidebar .checkbox-label-inline,
+	.attachment-details .setting .name,
 	.compat-item label span {
 		text-align: inherit;
 		min-height: 16px;
 		margin: 0;
-		padding: 8px 2px 0;
+		padding: 8px 2px 2px;
 	}
 
 	.media-sidebar .setting .value,
@@ -2428,15 +2382,29 @@
 		right: 30px;
 	}
 
-	.image-details .embed-media-settings .setting {
+	.image-details .embed-media-settings .setting,
+	.image-details .embed-media-settings .setting-group {
 		margin: 20px;
 	}
 
-	.image-details .embed-media-settings .setting span {
+	.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
+	.image-details .embed-media-settings .setting .name {
 		float: none;
 		text-align: left;
 		width: 100%;
 		margin-bottom: 4px;
+		margin-left: 0;
+	}
+
+	.media-modal .legend-inline {
+		position: static;
+		transform: none;
+		margin-left: 0;
+		margin-bottom: 6px;
+	}
+
+	.image-details .embed-media-settings .setting-group .setting {
+		margin-bottom: 0;
 	}
 
 	.image-details .embed-media-settings .setting input.link-to-custom,
@@ -2460,6 +2428,7 @@
 	}
 
 	.collection-settings .setting input[type="checkbox"] {
+		float: none;
 		margin-top: 0;
 	}
 
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index dee40d55c4..dd2d67a90c 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -174,16 +174,8 @@ function wp_print_media_templates() {
 		)
 	);
 	?>
-	<!--[if lte IE 8]>
-	<style>
-		.attachment:focus {
-			outline: #1e8cbe solid;
-		}
-		.selected.attachment {
-			outline: #1e8cbe solid;
-		}
-	</style>
-	<![endif]-->
+
+	<?php // Template for the media frame: used both in the media grid and in the media modal. ?>
 	<script type="text/html" id="tmpl-media-frame">
 		<div class="media-frame-menu"></div>
 		<div class="media-frame-title"></div>
@@ -193,6 +185,7 @@ function wp_print_media_templates() {
 		<div class="media-frame-uploader"></div>
 	</script>
 
+	<?php // Template for the media modal. ?>
 	<script type="text/html" id="tmpl-media-modal">
 		<div tabindex="0" class="<?php echo $class; ?>">
 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
@@ -201,18 +194,21 @@ function wp_print_media_templates() {
 		<div class="media-modal-backdrop"></div>
 	</script>
 
+	<?php // Template for the window uploader, used for example in the media grid. ?>
 	<script type="text/html" id="tmpl-uploader-window">
 		<div class="uploader-window-content">
-			<h1><?php _e( 'Drop files to upload' ); ?></h1>
+			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
 		</div>
 	</script>
 
+	<?php // Template for the editor uploader. ?>
 	<script type="text/html" id="tmpl-uploader-editor">
 		<div class="uploader-editor-content">
 			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
 		</div>
 	</script>
 
+	<?php // Template for the inline uploader, used for example in the Media Library admin page - Add New. ?>
 	<script type="text/html" id="tmpl-uploader-inline">
 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
 		<# if ( data.canClose ) { #>
@@ -223,17 +219,21 @@ function wp_print_media_templates() {
 			<h2 class="upload-message">{{ data.message }}</h2>
 		<# } #>
 		<?php if ( ! _device_can_upload() ) : ?>
-			<h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
+			<div class="upload-ui">
+				<h2 class="upload-instructions"><?php _e( 'Your browseer cannot upload files' ); ?></h2>
+				<p><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></p>
+			</div>
 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
-			<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
-			<?php
-			/** This action is documented in wp-admin/includes/media.php */
-			do_action( 'upload_ui_over_quota' );
-			?>
-
+			<div class="upload-ui">
+				<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
+				<?php
+				/** This action is documented in wp-admin/includes/media.php */
+				do_action( 'upload_ui_over_quota' );
+				?>
+			</div>
 		<?php else : ?>
 			<div class="upload-ui">
-				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
+				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
 				<button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
 			</div>
@@ -286,6 +286,7 @@ function wp_print_media_templates() {
 		</div>
 	</script>
 
+	<?php // Template for the view switchers, used for example in the Media Grid. ?>
 	<script type="text/html" id="tmpl-media-library-view-switcher">
 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
 			<span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
@@ -295,6 +296,7 @@ function wp_print_media_templates() {
 		</a>
 	</script>
 
+	<?php // Template for the uploading status UI. ?>
 	<script type="text/html" id="tmpl-uploader-status">
 		<h2><?php _e( 'Uploading' ); ?></h2>
 		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
@@ -310,22 +312,26 @@ function wp_print_media_templates() {
 		<div class="upload-errors"></div>
 	</script>
 
+	<?php // Template for the uploading status errors. ?>
 	<script type="text/html" id="tmpl-uploader-status-error">
 		<span class="upload-error-filename">{{{ data.filename }}}</span>
 		<span class="upload-error-message">{{ data.message }}</span>
 	</script>
 
+	<?php // Template for the Attachment Details layout in the media browser. ?>
 	<script type="text/html" id="tmpl-edit-attachment-frame">
 		<div class="edit-media-header">
-			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
-			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
+			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
+			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
 		</div>
 		<div class="media-frame-title"></div>
 		<div class="media-frame-content"></div>
 	</script>
 
+	<?php // Template for the Attachment Details two columns layout. ?>
 	<script type="text/html" id="tmpl-attachment-details-two-column">
 		<div class="attachment-media-view {{ data.orientation }}">
+			<h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
 			<div class="thumbnail thumbnail-{{ data.type }}">
 				<# if ( data.uploading ) { #>
 					<div class="media-progress-bar"><div></div></div>
@@ -365,17 +371,18 @@ function wp_print_media_templates() {
 					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
 					<button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
 					<# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
-					<?php _e( 'Document Preview' ); ?>
+					<p><?php _e( 'Document Preview' ); ?></p>
 					<# } #>
 				</div>
 			</div>
 		</div>
 		<div class="attachment-info">
-			<span class="settings-save-status">
+			<span class="settings-save-status" role="status">
 				<span class="spinner"></span>
 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
 			</span>
 			<div class="details">
+				<h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
 				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
 				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
@@ -418,17 +425,17 @@ function wp_print_media_templates() {
 			<div class="settings">
 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 				<# if ( 'image' === data.type ) { #>
-					<label class="setting" data-setting="alt">
-						<span class="name"><?php _e( 'Alternative Text' ); ?></span>
-						<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
-					</label>
+					<span class="setting has-description" data-setting="alt">
+						<label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+						<input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+					</span>
 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 				<# } #>
 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
-				<label class="setting" data-setting="title">
-					<span class="name"><?php _e( 'Title' ); ?></span>
-					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
-				</label>
+				<span class="setting" data-setting="title">
+					<label for="attachment-details-two-column-title" class="name"><?php _e( 'Title' ); ?></label>
+					<input type="text" id="attachment-details-two-column-title" value="{{ data.title }}" {{ maybeReadOnly }} />
+				</span>
 				<?php endif; ?>
 				<# if ( 'audio' === data.type ) { #>
 				<?php
@@ -437,38 +444,38 @@ function wp_print_media_templates() {
 					'album'  => __( 'Album' ),
 				) as $key => $label ) :
 					?>
-				<label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
-					<span class="name"><?php echo $label; ?></span>
-					<input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
-				</label>
+				<span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
+					<label for="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
+					<input type="text" id="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
+				</span>
 				<?php endforeach; ?>
 				<# } #>
-				<label class="setting" data-setting="caption">
-					<span class="name"><?php _e( 'Caption' ); ?></span>
-					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
-				</label>
-				<label class="setting" data-setting="description">
-					<span class="name"><?php _e( 'Description' ); ?></span>
-					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
-				</label>
-				<div class="setting">
+				<span class="setting" data-setting="caption">
+					<label for="attachment-details-two-column-caption" class="name"><?php _e( 'Caption' ); ?></label>
+					<textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+				</span>
+				<span class="setting" data-setting="description">
+					<label for="attachment-details-two-column-description" class="name"><?php _e( 'Description' ); ?></label>
+					<textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
+				</span>
+				<span class="setting">
 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
 					<span class="value">{{ data.authorName }}</span>
-				</div>
+				</span>
 				<# if ( data.uploadedToTitle ) { #>
-					<div class="setting">
+					<span class="setting">
 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
 						<# if ( data.uploadedToLink ) { #>
 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
 						<# } else { #>
 							<span class="value">{{ data.uploadedToTitle }}</span>
 						<# } #>
-					</div>
+					</span>
 				<# } #>
-				<label class="setting" data-setting="url">
-					<span class="name"><?php _e( 'Copy Link' ); ?></span>
-					<input type="text" value="{{ data.url }}" readonly />
-				</label>
+				<span class="setting" data-setting="url">
+					<label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
+					<input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
+				</span>
 				<div class="attachment-compat"></div>
 			</div>
 
@@ -489,10 +496,10 @@ function wp_print_media_templates() {
 					<?php endif; ?>
 				<# } #>
 			</div>
-
 		</div>
 	</script>
 
+	<?php // Template for the Attachment "thumbnails" in the Media Grid. ?>
 	<script type="text/html" id="tmpl-attachment">
 		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
 			<div class="thumbnail">
@@ -529,24 +536,29 @@ function wp_print_media_templates() {
 		if ( data.describe ) {
 			if ( 'image' === data.type ) { #>
 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
-					placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
+					aria-label="<?php esc_attr_e( 'Caption' ); ?>"
+					placeholder="<?php esc_attr_e( 'Caption&hellip;' ); ?>" {{ maybeReadOnly }} />
 			<# } else { #>
 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
 					<# if ( 'video' === data.type ) { #>
-						placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
+						aria-label="<?php esc_attr_e( 'Video title' ); ?>"
+						placeholder="<?php esc_attr_e( 'Video title&hellip;' ); ?>"
 					<# } else if ( 'audio' === data.type ) { #>
-						placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
+						aria-label="<?php esc_attr_e( 'Audio title' ); ?>"
+						placeholder="<?php esc_attr_e( 'Audio title&hellip;' ); ?>"
 					<# } else { #>
-						placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
+						aria-label="<?php esc_attr_e( 'Media title' ); ?>"
+						placeholder="<?php esc_attr_e( 'Media title&hellip;' ); ?>"
 					<# } #> {{ maybeReadOnly }} />
 			<# }
 		} #>
 	</script>
 
+	<?php // Template for the Attachment details, used for example in the sidebar. ?>
 	<script type="text/html" id="tmpl-attachment-details">
 		<h2>
 			<?php _e( 'Attachment Details' ); ?>
-			<span class="settings-save-status">
+			<span class="settings-save-status" role="status">
 				<span class="spinner"></span>
 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
 			</span>
@@ -607,20 +619,19 @@ function wp_print_media_templates() {
 				</div>
 			</div>
 		</div>
-
 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 		<# if ( 'image' === data.type ) { #>
-			<label class="setting" data-setting="alt">
-				<span class="name"><?php _e( 'Alt Text' ); ?></span>
-				<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
-			</label>
+			<span class="setting has-description" data-setting="alt">
+				<label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
+				<input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+			</span>
 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 		<# } #>
 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
-		<label class="setting" data-setting="title">
-			<span class="name"><?php _e( 'Title' ); ?></span>
-			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
-		</label>
+		<span class="setting" data-setting="title">
+			<label for="attachment-details-title" class="name"><?php _e( 'Title' ); ?></label>
+			<input type="text" id="attachment-details-title" value="{{ data.title }}" {{ maybeReadOnly }} />
+		</span>
 		<?php endif; ?>
 		<# if ( 'audio' === data.type ) { #>
 		<?php
@@ -629,26 +640,27 @@ function wp_print_media_templates() {
 			'album'  => __( 'Album' ),
 		) as $key => $label ) :
 			?>
-		<label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
-			<span class="name"><?php echo $label; ?></span>
-			<input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
-		</label>
+		<span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
+			<label for="attachment-details-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
+			<input type="text" id="attachment-details-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
+		</span>
 		<?php endforeach; ?>
 		<# } #>
-		<label class="setting" data-setting="caption">
-			<span class="name"><?php _e( 'Caption' ); ?></span>
-			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
-		</label>
-		<label class="setting" data-setting="description">
-			<span class="name"><?php _e( 'Description' ); ?></span>
-			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
-		</label>
-		<label class="setting" data-setting="url">
-			<span class="name"><?php _e( 'Copy Link' ); ?></span>
-			<input type="text" value="{{ data.url }}" readonly />
-		</label>
+		<span class="setting" data-setting="caption">
+			<label for="attachment-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
+			<textarea id="attachment-details-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+		</span>
+		<span class="setting" data-setting="description">
+			<label for="attachment-details-description" class="name"><?php _e( 'Description' ); ?></label>
+			<textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
+		</span>
+		<span class="setting" data-setting="url">
+			<label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
+			<input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
+		</span>
 	</script>
 
+	<?php // Template for the Selection status bar. ?>
 	<script type="text/html" id="tmpl-media-selection">
 		<div class="selection-info">
 			<span class="count"></span>
@@ -662,13 +674,14 @@ function wp_print_media_templates() {
 		<div class="selection-view"></div>
 	</script>
 
+	<?php // Template for the Attachment display settings, used for example in the sidebar. ?>
 	<script type="text/html" id="tmpl-attachment-display-settings">
 		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
 
 		<# if ( 'image' === data.type ) { #>
-			<label class="setting align">
-				<span><?php _e( 'Alignment' ); ?></span>
-				<select class="alignment"
+			<span class="setting align">
+				<label for="attachment-display-settings-alignment" class="name"><?php _e( 'Alignment' ); ?></label>
+				<select id="attachment-display-settings-alignment" class="alignment"
 					data-setting="align"
 					<# if ( data.userSettings ) { #>
 						data-user-setting="align"
@@ -687,61 +700,63 @@ function wp_print_media_templates() {
 						<?php esc_html_e( 'None' ); ?>
 					</option>
 				</select>
-			</label>
+			</span>
 		<# } #>
 
-		<div class="setting">
-			<label>
+		<span class="setting">
+			<label for="attachment-display-settings-link-to" class="name">
 				<# if ( data.model.canEmbed ) { #>
-					<span><?php _e( 'Embed or Link' ); ?></span>
+					<?php _e( 'Embed or Link' ); ?>
 				<# } else { #>
-					<span><?php _e( 'Link To' ); ?></span>
+					<?php _e( 'Link To' ); ?>
 				<# } #>
-
-				<select class="link-to"
-					data-setting="link"
-					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
-						data-user-setting="urlbutton"
-					<# } #>>
-
-				<# if ( data.model.canEmbed ) { #>
-					<option value="embed" selected>
-						<?php esc_html_e( 'Embed Media Player' ); ?>
-					</option>
-					<option value="file">
-				<# } else { #>
-					<option value="none" selected>
-						<?php esc_html_e( 'None' ); ?>
-					</option>
-					<option value="file">
-				<# } #>
-					<# if ( data.model.canEmbed ) { #>
-						<?php esc_html_e( 'Link to Media File' ); ?>
-					<# } else { #>
-						<?php esc_html_e( 'Media File' ); ?>
-					<# } #>
-					</option>
-					<option value="post">
-					<# if ( data.model.canEmbed ) { #>
-						<?php esc_html_e( 'Link to Attachment Page' ); ?>
-					<# } else { #>
-						<?php esc_html_e( 'Attachment Page' ); ?>
-					<# } #>
-					</option>
-				<# if ( 'image' === data.type ) { #>
-					<option value="custom">
-						<?php esc_html_e( 'Custom URL' ); ?>
-					</option>
-				<# } #>
-				</select>
 			</label>
-			<input type="text" class="link-to-custom" data-setting="linkUrl" />
-		</div>
+			<select id="attachment-display-settings-link-to" class="link-to"
+				data-setting="link"
+				<# if ( data.userSettings && ! data.model.canEmbed ) { #>
+					data-user-setting="urlbutton"
+				<# } #>>
+
+			<# if ( data.model.canEmbed ) { #>
+				<option value="embed" selected>
+					<?php esc_html_e( 'Embed Media Player' ); ?>
+				</option>
+				<option value="file">
+			<# } else { #>
+				<option value="none" selected>
+					<?php esc_html_e( 'None' ); ?>
+				</option>
+				<option value="file">
+			<# } #>
+				<# if ( data.model.canEmbed ) { #>
+					<?php esc_html_e( 'Link to Media File' ); ?>
+				<# } else { #>
+					<?php esc_html_e( 'Media File' ); ?>
+				<# } #>
+				</option>
+				<option value="post">
+				<# if ( data.model.canEmbed ) { #>
+					<?php esc_html_e( 'Link to Attachment Page' ); ?>
+				<# } else { #>
+					<?php esc_html_e( 'Attachment Page' ); ?>
+				<# } #>
+				</option>
+			<# if ( 'image' === data.type ) { #>
+				<option value="custom">
+					<?php esc_html_e( 'Custom URL' ); ?>
+				</option>
+			<# } #>
+			</select>
+		</span>
+		<span class="setting">
+			<label for="attachment-display-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
+			<input type="text" id="attachment-display-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
+		</span>
 
 		<# if ( 'undefined' !== typeof data.sizes ) { #>
-			<label class="setting">
-				<span><?php _e( 'Size' ); ?></span>
-				<select class="size" name="size"
+			<span class="setting">
+				<label for="attachment-display-settings-size" class="name"><?php _e( 'Size' ); ?></label>
+				<select id="attachment-display-settings-size" class="size" name="size"
 					data-setting="size"
 					<# if ( data.userSettings ) { #>
 						data-user-setting="imgsize"
@@ -769,16 +784,17 @@ function wp_print_media_templates() {
 						<# } #>
 					<?php endforeach; ?>
 				</select>
-			</label>
+			</span>
 		<# } #>
 	</script>
 
+	<?php // Template for the Gallery settings, used for example in the sidebar. ?>
 	<script type="text/html" id="tmpl-gallery-settings">
 		<h2><?php _e( 'Gallery Settings' ); ?></h2>
 
-		<label class="setting">
-			<span><?php _e( 'Link To' ); ?></span>
-			<select class="link-to"
+		<span class="setting">
+			<label for="gallery-settings-link-to" class="name"><?php _e( 'Link To' ); ?></label>
+			<select id="gallery-settings-link-to" class="link-to"
 				data-setting="link"
 				<# if ( data.userSettings ) { #>
 					data-user-setting="urlbutton"
@@ -796,11 +812,11 @@ function wp_print_media_templates() {
 					<?php esc_html_e( 'None' ); ?>
 				</option>
 			</select>
-		</label>
+		</span>
 
-		<label class="setting">
-			<span><?php _e( 'Columns' ); ?></span>
-			<select class="columns" name="columns"
+		<span class="setting">
+			<label for="gallery-settings-columns" class="name select-label-inline"><?php _e( 'Columns' ); ?></label>
+			<select id="gallery-settings-columns" class="columns" name="columns"
 				data-setting="columns">
 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
 					<option value="<?php echo esc_attr( $i ); ?>" <#
@@ -810,16 +826,16 @@ function wp_print_media_templates() {
 					</option>
 				<?php endfor; ?>
 			</select>
-		</label>
+		</span>
 
-		<label class="setting">
-			<span><?php _e( 'Random Order' ); ?></span>
-			<input type="checkbox" data-setting="_orderbyRandom" />
-		</label>
+		<span class="setting">
+			<input type="checkbox" id="gallery-settings-random-order" data-setting="_orderbyRandom" />
+			<label for="gallery-settings-random-order" class="checkbox-label-inline"><?php _e( 'Random Order' ); ?></label>
+		</span>
 
-		<label class="setting size">
-			<span><?php _e( 'Size' ); ?></span>
-			<select class="size" name="size"
+		<span class="setting size">
+			<label for="gallery-settings-size" class="name"><?php _e( 'Size' ); ?></label>
+			<select id="gallery-settings-size" class="size" name="size"
 				data-setting="size"
 				<# if ( data.userSettings ) { #>
 					data-user-setting="imgsize"
@@ -844,165 +860,174 @@ function wp_print_media_templates() {
 					</option>
 				<?php endforeach; ?>
 			</select>
-		</label>
+		</span>
 	</script>
 
+	<?php // Template for the Playlists settings, used for example in the sidebar. ?>
 	<script type="text/html" id="tmpl-playlist-settings">
 		<h2><?php _e( 'Playlist Settings' ); ?></h2>
 
 		<# var emptyModel = _.isEmpty( data.model ),
 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
 
-		<label class="setting">
-			<input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
+		<span class="setting">
+			<input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #>
 				checked="checked"
 			<# } #> />
-			<# if ( isVideo ) { #>
-			<span><?php _e( 'Show Video List' ); ?></span>
-			<# } else { #>
-			<span><?php _e( 'Show Tracklist' ); ?></span>
-			<# } #>
-		</label>
+			<label for="playlist-settings-show-list" class="checkbox-label-inline">
+				<# if ( isVideo ) { #>
+				<?php _e( 'Show Video List' ); ?>
+				<# } else { #>
+				<?php _e( 'Show Tracklist' ); ?>
+				<# } #>
+			</label>
+		</span>
 
 		<# if ( ! isVideo ) { #>
-		<label class="setting">
-			<input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
+		<span class="setting">
+			<input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #>
 				checked="checked"
 			<# } #> />
-			<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
-		</label>
+			<label for="playlist-settings-show-artist" class="checkbox-label-inline">
+				<?php _e( 'Show Artist Name in Tracklist' ); ?>
+			</label>
+		</span>
 		<# } #>
 
-		<label class="setting">
-			<input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
+		<span class="setting">
+			<input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #>
 				checked="checked"
 			<# } #> />
-			<span><?php _e( 'Show Images' ); ?></span>
-		</label>
+			<label for="playlist-settings-show-images" class="checkbox-label-inline">
+				<?php _e( 'Show Images' ); ?>
+			</label>
+		</span>
 	</script>
 
+	<?php // Template for the "Insert from URL" layout. ?>
 	<script type="text/html" id="tmpl-embed-link-settings">
-		<label class="setting link-text">
-			<span><?php _e( 'Link Text' ); ?></span>
-			<input type="text" class="alignment" data-setting="linkText" />
-		</label>
+		<span class="setting link-text">
+			<label for="embed-link-settings-link-text" class="name"><?php _e( 'Link Text' ); ?></label>
+			<input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" />
+		</span>
 		<div class="embed-container" style="display: none;">
 			<div class="embed-preview"></div>
 		</div>
 	</script>
 
+	<?php // Template for the "Insert from URL" image preview and details. ?>
 	<script type="text/html" id="tmpl-embed-image-settings">
-		<div class="thumbnail">
-			<img src="{{ data.model.url }}" draggable="false" alt="" />
+		<div class="wp-clearfix">
+			<div class="thumbnail">
+				<img src="{{ data.model.url }}" draggable="false" alt="" />
+			</div>
 		</div>
 
-		<label class="setting alt-text has-description">
-			<span><?php _e( 'Alternative Text' ); ?></span>
-			<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
-		</label>
+		<span class="setting alt-text has-description">
+			<label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+			<input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
+		</span>
 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 
 		<?php
 		/** This filter is documented in wp-admin/includes/media.php */
 		if ( ! apply_filters( 'disable_captions', '' ) ) :
 			?>
-			<label class="setting caption">
-				<span><?php _e( 'Caption' ); ?></span>
-				<textarea data-setting="caption" />
-			</label>
+			<span class="setting caption">
+				<label for="embed-image-settings-caption" class="name"><?php _e( 'Caption' ); ?></label>
+				<textarea id="embed-image-settings-caption" data-setting="caption" />
+			</span>
 		<?php endif; ?>
 
-		<div class="setting align">
-			<span><?php _e( 'Align' ); ?></span>
-			<div class="button-group button-large" data-setting="align">
-				<button class="button" value="left">
-					<?php esc_html_e( 'Left' ); ?>
-				</button>
-				<button class="button" value="center">
-					<?php esc_html_e( 'Center' ); ?>
-				</button>
-				<button class="button" value="right">
-					<?php esc_html_e( 'Right' ); ?>
-				</button>
-				<button class="button active" value="none">
-					<?php esc_html_e( 'None' ); ?>
-				</button>
-			</div>
-		</div>
+		<fieldset class="setting-group">
+			<legend class="name"><?php _e( 'Align' ); ?></legend>
+			<span class="setting align">
+				<span class="button-group button-large" data-setting="align">
+					<button class="button" value="left">
+						<?php esc_html_e( 'Left' ); ?>
+					</button>
+					<button class="button" value="center">
+						<?php esc_html_e( 'Center' ); ?>
+					</button>
+					<button class="button" value="right">
+						<?php esc_html_e( 'Right' ); ?>
+					</button>
+					<button class="button active" value="none">
+						<?php esc_html_e( 'None' ); ?>
+					</button>
+				</span>
+			</span>
+		</fieldset>
 
-		<div class="setting link-to">
-			<span><?php _e( 'Link To' ); ?></span>
-			<div class="button-group button-large" data-setting="link">
-				<button class="button" value="file">
-					<?php esc_html_e( 'Image URL' ); ?>
-				</button>
-				<button class="button" value="custom">
-					<?php esc_html_e( 'Custom URL' ); ?>
-				</button>
-				<button class="button active" value="none">
-					<?php esc_html_e( 'None' ); ?>
-				</button>
-			</div>
-			<input type="text" class="link-to-custom" data-setting="linkUrl" />
-		</div>
+		<fieldset class="setting-group">
+			<legend class="name"><?php _e( 'Link To' ); ?></legend>
+			<span class="setting link-to">
+				<span class="button-group button-large" data-setting="link">
+					<button class="button" value="file">
+						<?php esc_html_e( 'Image URL' ); ?>
+					</button>
+					<button class="button" value="custom">
+						<?php esc_html_e( 'Custom URL' ); ?>
+					</button>
+					<button class="button active" value="none">
+						<?php esc_html_e( 'None' ); ?>
+					</button>
+				</span>
+			</span>
+			<span class="setting">
+				<label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
+				<input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
+			</span>
+		</fieldset>
 	</script>
 
+	<?php // Template for the Image details, used for example in the editor. ?>
 	<script type="text/html" id="tmpl-image-details">
 		<div class="media-embed">
 			<div class="embed-media-settings">
-				<div class="column-image">
-					<div class="image">
-						<img src="{{ data.model.url }}" draggable="false" alt="" />
-
-						<# if ( data.attachment && window.imageEdit ) { #>
-							<div class="actions">
-								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
-								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
-							</div>
-						<# } #>
-					</div>
-				</div>
 				<div class="column-settings">
-					<label class="setting alt-text has-description">
-						<span><?php _e( 'Alternative Text' ); ?></span>
-						<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
-					</label>
+					<span class="setting alt-text has-description">
+						<label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+						<input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
+					</span>
 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 
 					<?php
 					/** This filter is documented in wp-admin/includes/media.php */
 					if ( ! apply_filters( 'disable_captions', '' ) ) :
 						?>
-						<label class="setting caption">
-							<span><?php _e( 'Caption' ); ?></span>
-							<textarea data-setting="caption">{{ data.model.caption }}</textarea>
-						</label>
+						<span class="setting caption">
+							<label for="image-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
+							<textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea>
+						</span>
 					<?php endif; ?>
 
 					<h2><?php _e( 'Display Settings' ); ?></h2>
-					<div class="setting align">
-						<span><?php _e( 'Align' ); ?></span>
-						<div class="button-group button-large" data-setting="align">
-							<button class="button" value="left">
-								<?php esc_html_e( 'Left' ); ?>
-							</button>
-							<button class="button" value="center">
-								<?php esc_html_e( 'Center' ); ?>
-							</button>
-							<button class="button" value="right">
-								<?php esc_html_e( 'Right' ); ?>
-							</button>
-							<button class="button active" value="none">
-								<?php esc_html_e( 'None' ); ?>
-							</button>
-						</div>
-					</div>
+					<fieldset class="setting-group">
+						<legend class="legend-inline"><?php _e( 'Align' ); ?></legend>
+						<span class="setting align">
+							<span class="button-group button-large" data-setting="align">
+								<button class="button" value="left">
+									<?php esc_html_e( 'Left' ); ?>
+								</button>
+								<button class="button" value="center">
+									<?php esc_html_e( 'Center' ); ?>
+								</button>
+								<button class="button" value="right">
+									<?php esc_html_e( 'Right' ); ?>
+								</button>
+								<button class="button active" value="none">
+									<?php esc_html_e( 'None' ); ?>
+								</button>
+							</span>
+						</span>
+					</fieldset>
 
 					<# if ( data.attachment ) { #>
 						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
-							<label class="setting size">
-								<span><?php _e( 'Size' ); ?></span>
-								<select class="size" name="size"
+							<span class="setting size">
+								<label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label>
+								<select id="image-details-size" class="size" name="size"
 									data-setting="size"
 									<# if ( data.userSettings ) { #>
 										data-user-setting="imgsize"
@@ -1033,16 +1058,25 @@ function wp_print_media_templates() {
 										<?php _e( 'Custom Size' ); ?>
 									</option>
 								</select>
-							</label>
+							</span>
 						<# } #>
-							<div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
-								<label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
+							<div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
+								<span class="custom-size-setting">
+									<label for="image-details-size-width"><?php _e( 'Width' ); ?></label>
+									<input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" />
+								</span>
+								<span class="sep" aria-hidden="true">&times;</span>
+								<span class="custom-size-setting">
+									<label for="image-details-size-height"><?php _e( 'Height' ); ?></label>
+									<input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" />
+								</span>
+								<p id="image-size-desc" class="description"><?php _e( 'Image size in pixels' ); ?></p>
 							</div>
 					<# } #>
 
-					<div class="setting link-to">
-						<span><?php _e( 'Link To' ); ?></span>
-						<select data-setting="link">
+					<span class="setting link-to">
+						<label for="image-details-link-to" class="name"><?php _e( 'Link To' ); ?></label>
+						<select id="image-details-link-to" data-setting="link">
 						<# if ( data.attachment ) { #>
 							<option value="file">
 								<?php esc_html_e( 'Media File' ); ?>
@@ -1062,46 +1096,64 @@ function wp_print_media_templates() {
 								<?php esc_html_e( 'None' ); ?>
 							</option>
 						</select>
-						<input type="text" class="link-to-custom" data-setting="linkUrl" />
-					</div>
+					</span>
+					<span class="setting">
+						<label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
+						<input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
+					</span>
+
 					<div class="advanced-section">
 						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
 						<div class="advanced-settings hidden">
 							<div class="advanced-image">
-								<label class="setting title-text">
-									<span><?php _e( 'Image Title Attribute' ); ?></span>
-									<input type="text" data-setting="title" value="{{ data.model.title }}" />
-								</label>
-								<label class="setting extra-classes">
-									<span><?php _e( 'Image CSS Class' ); ?></span>
-									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
-								</label>
+								<span class="setting title-text">
+									<label for="image-details-title-attribute" class="name"><?php _e( 'Image Title Attribute' ); ?></label>
+									<input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" />
+								</span>
+								<span class="setting extra-classes">
+									<label for="image-details-css-class" class="name"><?php _e( 'Image CSS Class' ); ?></label>
+									<input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+								</span>
 							</div>
 							<div class="advanced-link">
-								<div class="setting link-target">
-									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
-								</div>
-								<label class="setting link-rel">
-									<span><?php _e( 'Link Rel' ); ?></span>
-									<input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
-								</label>
-								<label class="setting link-class-name">
-									<span><?php _e( 'Link CSS Class' ); ?></span>
-									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
-								</label>
+								<span class="setting link-target">
+									<input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>
+									<label for="image-details-link-target" class="checkbox-label"><?php _e( 'Open link in a new tab' ); ?></label>
+								</span>
+								<span class="setting link-rel">
+									<label for="image-details-link-rel" class="name"><?php _e( 'Link Rel' ); ?></label>
+									<input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" />
+								</span>
+								<span class="setting link-class-name">
+									<label for="image-details-link-css-class" class="name"><?php _e( 'Link CSS Class' ); ?></label>
+									<input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+								</span>
 							</div>
 						</div>
 					</div>
 				</div>
+				<div class="column-image">
+					<div class="image">
+						<img src="{{ data.model.url }}" draggable="false" alt="" />
+						<# if ( data.attachment && window.imageEdit ) { #>
+							<div class="actions">
+								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
+								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
+							</div>
+						<# } #>
+					</div>
+				</div>
 			</div>
 		</div>
 	</script>
 
+	<?php // Template for the Image Editor layout. ?>
 	<script type="text/html" id="tmpl-image-editor">
 		<div id="media-head-{{ data.id }}"></div>
 		<div id="image-editor-{{ data.id }}"></div>
 	</script>
 
+	<?php // Template for an embedded Audio details. ?>
 	<script type="text/html" id="tmpl-audio-details">
 		<# var ext, html5types = {
 			mp3: wp.media.view.settings.embedMimes.mp3,
@@ -1119,11 +1171,11 @@ function wp_print_media_templates() {
 						delete html5types[ ext ];
 					}
 				#>
-				<div class="setting">
-					<label for="audio-source"><?php _e( 'URL' ); ?></label>
-					<input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
+				<span class="setting">
+					<label for="audio-details-source" class="name"><?php _e( 'caca URL' ); ?></label>
+					<input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
-				</div>
+				</span>
 				<# } #>
 				<?php
 
@@ -1134,47 +1186,54 @@ function wp_print_media_templates() {
 						delete html5types.<?php echo $type; ?>;
 					}
 				#>
-				<div class="setting">
-					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
-					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
+				<span class="setting">
+					<label for="audio-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
+					<input type="text" id="audio-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
-				</div>
+				</span>
 				<# } #>
 				<?php endforeach ?>
 
 				<# if ( ! _.isEmpty( html5types ) ) { #>
-				<div class="setting">
-					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
-					<div class="button-large">
-					<# _.each( html5types, function (mime, type) { #>
-					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
-					<# } ) #>
-					</div>
-				</div>
+				<fieldset class="setting-group">
+					<legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
+					<span class="setting">
+						<span class="button-large">
+						<# _.each( html5types, function (mime, type) { #>
+							<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
+						<# } ) #>
+						</span>
+					</span>
+				</fieldset>
 				<# } #>
 
-				<div class="setting preload">
-					<span><?php _e( 'Preload' ); ?></span>
-					<div class="button-group button-large" data-setting="preload">
-						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
-						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
-						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
-					</div>
-				</div>
+				<fieldset class="setting-group">
+					<legend class="name"><?php _e( 'Preload' ); ?></legend>
+					<span class="setting preload">
+						<span class="button-group button-large" data-setting="preload">
+							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
+							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
+							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
+						</span>
+					</span>
+				</fieldset>
 
-				<label class="setting checkbox-setting autoplay">
-					<input type="checkbox" data-setting="autoplay" />
-					<span><?php _e( 'Autoplay' ); ?></span>
-				</label>
+				<span class="setting-group">
+					<span class="setting checkbox-setting autoplay">
+						<input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" />
+						<label for="audio-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
+					</span>
 
-				<label class="setting checkbox-setting">
-					<input type="checkbox" data-setting="loop" />
-					<span><?php _e( 'Loop' ); ?></span>
-				</label>
+					<span class="setting checkbox-setting">
+						<input type="checkbox" id="audio-details-loop" data-setting="loop" />
+						<label for="audio-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
+					</span>
+				</span>
 			</div>
 		</div>
 	</script>
 
+	<?php // Template for an embedded Video details. ?>
 	<script type="text/html" id="tmpl-video-details">
 		<# var ext, html5types = {
 			mp4: wp.media.view.settings.embedMimes.mp4,
@@ -1203,11 +1262,11 @@ function wp_print_media_templates() {
 						delete html5types[ ext ];
 					}
 				#>
-				<div class="setting">
-					<label for="video-source"><?php _e( 'URL' ); ?></label>
-					<input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
+				<span class="setting">
+					<label for="video-details-source" class="name"><?php _e( 'URL' ); ?></label>
+					<input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
-				</div>
+				</span>
 				<# } #>
 				<?php
 				foreach ( $video_types as $type ) :
@@ -1217,73 +1276,81 @@ function wp_print_media_templates() {
 						delete html5types.<?php echo $type; ?>;
 					}
 				#>
-				<div class="setting">
-					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
-					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
+				<span class="setting">
+					<label for="video-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
+					<input type="text" id="video-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
-				</div>
+				</span>
 				<# } #>
 				<?php endforeach ?>
 				</div>
 
 				<# if ( ! _.isEmpty( html5types ) ) { #>
-				<div class="setting">
-					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
-					<div class="button-large">
-					<# _.each( html5types, function (mime, type) { #>
-					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
-					<# } ) #>
-					</div>
-				</div>
+				<fieldset class="setting-group">
+					<legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
+					<span class="setting">
+						<span class="button-large">
+						<# _.each( html5types, function (mime, type) { #>
+							<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
+						<# } ) #>
+						</span>
+					</span>
+				</fieldset>
 				<# } #>
 
 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
-				<div class="setting">
-					<label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
-					<input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
+				<span class="setting">
+					<label for="video-details-poster-image" class="name"><?php _e( 'Poster Image' ); ?></label>
+					<input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
-				</div>
+				</span>
 				<# } #>
-				<div class="setting preload">
-					<span><?php _e( 'Preload' ); ?></span>
-					<div class="button-group button-large" data-setting="preload">
-						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
-						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
-						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
-					</div>
-				</div>
 
-				<label class="setting checkbox-setting autoplay">
-					<input type="checkbox" data-setting="autoplay" />
-					<span><?php _e( 'Autoplay' ); ?></span>
-				</label>
+				<fieldset class="setting-group">
+					<legend class="name"><?php _e( 'Preload' ); ?></legend>
+					<span class="setting preload">
+						<span class="button-group button-large" data-setting="preload">
+							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
+							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
+							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
+						</span>
+					</span>
+				</fieldset>
 
-				<label class="setting checkbox-setting">
-					<input type="checkbox" data-setting="loop" />
-					<span><?php _e( 'Loop' ); ?></span>
-				</label>
+				<span class="setting-group">
+					<span class="setting checkbox-setting autoplay">
+						<input type="checkbox" id="video-details-autoplay" data-setting="autoplay" />
+						<label for="video-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
+					</span>
 
-				<div class="setting" data-setting="content">
+					<span class="setting checkbox-setting">
+						<input type="checkbox" id="video-details-loop" data-setting="loop" />
+						<label for="video-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
+					</span>
+				</span>
+
+				<span class="setting" data-setting="content">
 					<#
 					var content = '';
 					if ( ! _.isEmpty( data.model.content ) ) {
 						var tracks = jQuery( data.model.content ).filter( 'track' );
 						_.each( tracks.toArray(), function (track) {
 							content += track.outerHTML; #>
-						<label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
-						<input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
+						<label for="video-details-track" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
+						<input class="content-track" type="text" id="video-details-track" readonly value="{{ track.outerHTML }}" />
 						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
 						<# } ); #>
 					<# } else { #>
-					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
+					<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
 					<# } #>
 					<textarea class="hidden content-setting">{{ content }}</textarea>
-				</div>
+				</span>
 			</div>
 		</div>
 	</script>
 
+	<?php // Template for a Gallery within the editor. ?>
 	<script type="text/html" id="tmpl-editor-gallery">
 		<# if ( data.attachments.length ) { #>
 			<div class="gallery gallery-columns-{{ data.columns }}">
@@ -1314,11 +1381,13 @@ function wp_print_media_templates() {
 		<# } #>
 	</script>
 
+	<?php // Template for the Crop area layout, used for example in the Customizer. ?>
 	<script type="text/html" id="tmpl-crop-content">
 		<img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
 		<div class="upload-errors"></div>
 	</script>
 
+	<?php // Template for the Site Icon preview, used for example in the Customizer. ?>
 	<script type="text/html" id="tmpl-site-icon-preview">
 		<h2><?php _e( 'Preview' ); ?></h2>
 		<strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>