Changeset 45499

Timestamp:

06/07/2019 08:43:26 PM (6 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/vendor/mediaelement/wp-mediaelement.css (modified) (2 diffs)
• js/media/views/embed/url.js (modified) (2 diffs)
• js/media/views/frame/image-details.js (modified) (2 diffs)
• js/media/views/settings/attachment-display.js (modified) (2 diffs)
• wp-admin/css/media.css (modified) (7 diffs)
• wp-admin/includes/image-edit.php (modified) (4 diffs)
• wp-admin/includes/media.php (modified) (1 diff)
• wp-includes/css/buttons.css (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (44 diffs)
• wp-includes/media-template.php (modified) (41 diffs)

trunk/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css

@@ -68 +68 @@
 }
 
-.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 */
 }
 
@@ -95 +95 @@
 
 .media-embed-details .setting .remove-setting {
-    padding: 0;
+    padding: 5px 0;
 }
 

trunk/src/js/media/views/embed/url.js

@@ -1 +1 @@
 var View = wp.media.View,
     $ = jQuery,
+    l10n = wp.media.view.l10n,
     EmbedUrl;
 
@@ -14 +15 @@
  */
 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];
 

trunk/src/js/media/views/frame/image-details.js

@@ -135 +135 @@
                 back: {
                     text:     l10n.back,
-                    priority: 20,
+                    priority: 80,
                     click:    function() {
                         if ( previous ) {
@@ -148 +148 @@
                     style:    'primary',
                     text:     l10n.replace,
-                    priority: 80,
+                    priority: 20,
                     requires: { selection: true },
 

trunk/src/js/media/views/settings/attachment-display.js

@@ -67 +67 @@
 
         if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
-            $input.addClass( 'hidden' );
+            $input.closest( '.setting' ).addClass( 'hidden' );
             return;
         }
@@ -83 +83 @@
         }
 
-        $input.removeClass( 'hidden' );
+        $input.closest( '.setting' ).removeClass( 'hidden' );
 
         // If the input is visible, focus and select its contents.

trunk/src/wp-admin/css/media.css

@@ -375 +375 @@
 
 .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;
@@ -481 +480 @@
 }
 
-.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;
@@ -1032 +1030 @@
 }
 
-#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
 #poststuff .imgedit-group-top h2 {
     display: inline-block;
@@ -1110 +1107 @@
 }
 
+.imgedit-save-target legend {
+    font-weight: 600;
+}
+
 .imgedit-group {
     margin-bottom: 8px;
@@ -1127 +1128 @@
     width: 7px;
     text-align: center;
-    vertical-align: middle;
     font-size: 13px;
     color: #444;
@@ -1191 +1191 @@
         padding: 6px 10px;
     }
-
-    .imgedit-applyto .imgedit-label {
-        vertical-align: middle;
-    }
 }
 
@@ -1233 +1229 @@
     }
 
-    .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 {

trunk/src/wp-admin/includes/image-edit.php

@@ -65 +65 @@
         <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>
 
@@ -125 +123 @@
         <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>
@@ -138 +134 @@
         <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>
@@ -169 +163 @@
     <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     <fieldset>
-        <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></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>
-
-        <label class="imgedit-label">
-        <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
-        <?php _e( 'Thumbnail' ); ?></label>
-
-        <label class="imgedit-label">
-        <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
-        <?php _e( 'All sizes except thumbnail' ); ?></label>
+        <legend><?php _e( 'Apply changes to:' ); ?></legend>
+
+        <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>
+
+        <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>
+
+        <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>

trunk/src/wp-admin/includes/media.php

@@ -2073 +2073 @@
 <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>

trunk/src/wp-includes/css/buttons.css

@@ -310 +310 @@
     border-radius: 0;
     margin-right: -1px;
-    z-index: 10;
 }
 

trunk/src/wp-includes/css/media-views.css

@@ -19 +19 @@
 }
 
-.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;
 }
 
@@ -31 +42 @@
 .media-frame select,
 .wp-admin .media-frame select {
+    padding: 2px;
     line-height: 2;
-    margin-top: 3px;
+    height: 28px;
+    vertical-align: middle;
 }
 
@@ -93 +106 @@
 }
 
-.media-frame select {
-    height: 24px;
-    padding: 2px;
-}
-
 .media-frame input:disabled,
 .media-frame textarea:disabled,
@@ -122 +130 @@
 }
 
-.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;
 }
@@ -235 +248 @@
 }
 
-.media-modal-content .media-toolbar-primary .media-button {
-    float: right;
-}
-
 .media-modal-content .attachments-browser .search {
     width: 100%;
@@ -322 +331 @@
 }
 
-.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 {
@@ -356 +346 @@
     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 .link-to-custom,
-.attachment-details .setting .link-to-custom {
+.media-sidebar .setting.has-description,
+.attachment-details .setting.has-description {
+    margin-bottom: 5px;
+}
+
+.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%;
@@ -382 +378 @@
 }
 
-.media-sidebar .setting select,
-.attachment-details .setting select {
+.media-sidebar .setting .value {
+    text-align: left;
+}
+
+.media-sidebar .setting select {
     max-width: 65%;
 }
@@ -400 +399 @@
 }
 
-.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;
@@ -409 +413 @@
     font-weight: 400;
     color: #666;
+}
+
+.media-sidebar .checkbox-label-inline {
+    font-size: 12px;
 }
 
@@ -451 +459 @@
     font-size: 12px;
     font-style: normal;
-    margin-bottom: 0.5em;
+    margin-bottom: 10px;
 }
 
@@ -459 +467 @@
     height: 62px;
     resize: vertical;
-}
-
-.media-sidebar select,
-.attachment-details select {
-    margin-top: 3px;
 }
 
@@ -760 +763 @@
 }
 
-.media-frame-content .crop-content .upload-errors
-{
+.media-frame-content .crop-content .upload-errors {
     position: absolute;
     width: 300px;
@@ -941 +943 @@
 }
 
-.ie8 .wp-core-ui .attachment img.icon {
-    top: 20%;
-    position: relative;
-}
-
 .wp-core-ui .attachment .filename {
     position: absolute;
@@ -1202 +1199 @@
 }
 
-.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
 .uploader-inline .media-uploader-status h2 {
     display: none;
@@ -1290 +1286 @@
 }
 
-.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;
+    text-align: center;
+    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;
+}
+
+.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);
-    z-index: 250000;
-    display: none;
-    text-align: center;
-    opacity: 0;
-    transition: opacity 250ms;
-}
-
-.uploader-window-content {
+}
+
+.uploader-window-content,
+.wp-editor-wrap .uploader-editor-content {
     position: absolute;
     top: 10px;
@@ -1313 +1327 @@
 }
 
-.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;
 }
 
@@ -1367 +1393 @@
 }
 
-.uploader-inline h3, /* Back-compat for pre-4.4 */
 .uploader-inline h2 {
     font-size: 20px;
@@ -1390 +1415 @@
 
 .uploader-inline p {
-    font-size: 12px;
     margin: 0.5em 0;
 }
@@ -1581 +1605 @@
     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;
 }
@@ -1598 +1622 @@
 
 .attachment-details.save-complete .settings-save-status .saved {
-    display: block;
+    display: inline-block;
 }
 
@@ -1705 +1729 @@
 }
 
-.attachment-display-settings h4 {
-    margin: 1.4em 0 0.4em;
-}
-
 .collection-settings {
     overflow: hidden;
@@ -1718 +1738 @@
 }
 
-.collection-settings .setting span {
+.collection-settings .setting span, /* Back-compat for pre-5.3 */
+.collection-settings .setting .name {
     min-width: inherit;
 }
@@ -1773 +1794 @@
 }
 
-.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 {
@@ -1784 +1804 @@
 }
 
-.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 {
@@ -1840 +1859 @@
 }
 
-
 /**
  * Embed from URL and Image Details
@@ -1856 +1874 @@
 .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 */
 }
 
@@ -1879 +1901 @@
     right: 0;
     bottom: 0;
-    padding: 16px 16px 32px;
+    padding: 0 16px 32px;
     overflow: auto;
 }
@@ -1942 +1964 @@
 }
 
-.image-details .column-settings h3, /* Back-compat for pre-4.4 */
 .image-details .column-settings h2 {
     margin: 20px;
@@ -1993 +2014 @@
 }
 
-.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;
 }
 
@@ -2020 +2033 @@
 }
 
-.image-details .custom-size:after {
-    content: "";
-    display: table;
-    clear: both;
+.image-details .custom-size .description {
+    margin-left: 0;
 }
 
@@ -2050 +2061 @@
 }
 
-.media-embed .setting {
+.media-embed .setting,
+.media-embed .setting-group {
     width: 100%;
     margin: 10px 0;
@@ -2058 +2070 @@
 }
 
+.media-embed .setting-group .setting:not(.checkbox-setting) {
+    margin: 0;
+}
+
 .media-embed .setting.has-description {
     margin-bottom: 5px;
@@ -2067 +2083 @@
 }
 
-.image-details .embed-media-settings .setting {
+.image-details .embed-media-settings .setting,
+.image-details .embed-media-settings .setting-group {
     float: none;
     width: auto;
@@ -2081 +2098 @@
 
 .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;
 }
 
@@ -2097 +2114 @@
 .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%;
@@ -2108 +2126 @@
 
 .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;
 }
 
@@ -2116 +2140 @@
 }
 
-.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;
@@ -2124 +2149 @@
 }
 
-.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%;
@@ -2132 +2163 @@
 }
 
-.media-embed .setting .button-group {
-    margin: 2px 0;
-}
-
 .media-embed-sidebar {
     position: absolute;
@@ -2147 +2174 @@
 }
 
-/* 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;
+ }
 
 /**
@@ -2356 +2298 @@
     .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;
-    }
-
-    .media-sidebar .setting span,
-    .attachment-details .setting span,
+        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 .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;
     }
 
@@ -2429 +2383 @@
     }
 
-    .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;
     }
 
@@ -2461 +2429 @@
 
     .collection-settings .setting input[type="checkbox"] {
+        float: none;
         margin-top: 0;
     }

trunk/src/wp-includes/media-template.php

@@ -175 +175 @@
     );
     ?>
-    <!--[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>
@@ -194 +186 @@
     </script>
 
+    <?php // Template for the media modal. ?>
     <script type="text/html" id="tmpl-media-modal">
         <div tabindex="0" class="<?php echo $class; ?>">
@@ -202 +195 @@
     </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>
-    </script>
-
+            <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">
@@ -214 +209 @@
     </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'; #>
@@ -224 +220 @@
         <# } #>
         <?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>
@@ -287 +287 @@
     </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">
@@ -296 +297 @@
     </script>
 
+    <?php // Template for the uploading status UI. ?>
     <script type="text/html" id="tmpl-uploader-status">
         <h2><?php _e( 'Uploading' ); ?></h2>
@@ -311 +313 @@
     </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>
@@ -316 +319 @@
     </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>
@@ -325 +329 @@
     </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 ) { #>
@@ -366 +372 @@
                     <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>
@@ -372 +378 @@
         </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>
@@ -419 +426 @@
                 <# 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 ) { #>
@@ -438 +445 @@
                 ) 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 ) { #>
@@ -464 +471 @@
                             <span class="value">{{ data.uploadedToTitle }}</span>
                         <# } #>
-                    </div>
-                <# } #>
-                <label class="setting" data-setting="url">
-                    <span class="name"><?php _e( 'Copy Link' ); ?></span>
-                    <input type="text" value="{{ data.url }}" readonly />
-                </label>
+                    </span>
+                <# } #>
+                <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>
@@ -490 +497 @@
                 <# } #>
             </div>
-
-        </div>
-    </script>
-
+        </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 }}">
@@ -530 +537 @@
             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 }} />
             <# }
@@ -544 +555 @@
     </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>
@@ -608 +620 @@
             </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 ) { #>
@@ -630 +641 @@
         ) 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>
-    </script>
-
+        <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">
@@ -663 +675 @@
     </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 ) { #>
@@ -688 +701 @@
                     </option>
                 </select>
+            </span>
+        <# } #>
+
+        <span class="setting">
+            <label for="attachment-display-settings-link-to" class="name">
+                <# if ( data.model.canEmbed ) { #>
+                    <?php _e( 'Embed or Link' ); ?>
+                <# } else { #>
+                    <?php _e( 'Link To' ); ?>
+                <# } #>
             </label>
-        <# } #>
-
-        <div class="setting">
-            <label>
+            <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 ) { #>
-                    <span><?php _e( 'Embed or Link' ); ?></span>
+                    <?php esc_html_e( 'Link to Media File' ); ?>
                 <# } else { #>
-                    <span><?php _e( 'Link To' ); ?></span>
-                <# } #>
-
-                <select class="link-to"
-                    data-setting="link"
-                    <# if ( data.userSettings && ! data.model.canEmbed ) { #>
-                        data-user-setting="urlbutton"
-                    <# } #>>
-
+                    <?php esc_html_e( 'Media File' ); ?>
+                <# } #>
+                </option>
+                <option value="post">
                 <# if ( data.model.canEmbed ) { #>
-                    <option value="embed" selected>
-                        <?php esc_html_e( 'Embed Media Player' ); ?>
-                    </option>
-                    <option value="file">
+                    <?php esc_html_e( 'Link to Attachment Page' ); ?>
                 <# } 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>
+                    <?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 ) { #>
@@ -770 +785 @@
                     <?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 ) { #>
@@ -797 +813 @@
                 </option>
             </select>
-        </label>
-
-        <label class="setting">
-            <span><?php _e( 'Columns' ); ?></span>
-            <select class="columns" name="columns"
+        </span>
+
+        <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++ ) : ?>
@@ -811 +827 @@
                 <?php endfor; ?>
             </select>
-        </label>
-
-        <label class="setting">
-            <span><?php _e( 'Random Order' ); ?></span>
-            <input type="checkbox" data-setting="_orderbyRandom" />
-        </label>
-
-        <label class="setting size">
-            <span><?php _e( 'Size' ); ?></span>
-            <select class="size" name="size"
+        </span>
+
+        <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>
+
+        <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 ) { #>
@@ -845 +861 @@
                 <?php endforeach; ?>
             </select>
-        </label>
-    </script>
-
+        </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>
@@ -854 +871 @@
             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>
-    </script>
-
+            <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>
@@ -892 +916 @@
     </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>
-
-        <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>
+        <div class="wp-clearfix">
+            <div class="thumbnail">
+                <img src="{{ data.model.url }}" draggable="false" alt="" />
+            </div>
+        </div>
+
+        <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>
 
@@ -907 +934 @@
         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>
-
-        <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>
-    </script>
-
+        <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>
+
+        <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>
 
@@ -974 +997 @@
                     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 ) { #>
@@ -1034 +1059 @@
                                     </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">
@@ -1063 +1097 @@
                             </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>
-        </div>
-    </script>
-
+                <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>
@@ -1103 +1154 @@
     </script>
 
+    <?php // Template for an embedded Audio details. ?>
     <script type="text/html" id="tmpl-audio-details">
         <# var ext, html5types = {
@@ -1120 +1172 @@
                     }
                 #>
-                <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
@@ -1135 +1187 @@
                     }
                 #>
-                <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>
-                <# } #>
-
-                <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>
-
-                <label class="setting checkbox-setting">
-                    <input type="checkbox" data-setting="loop" />
-                    <span><?php _e( 'Loop' ); ?></span>
-                </label>
-            </div>
-        </div>
-    </script>
-
+                <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>
+                <# } #>
+
+                <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>
+
+                <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>
+
+                    <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 = {
@@ -1204 +1263 @@
                     }
                 #>
-                <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
@@ -1218 +1277 @@
                     }
                 #>
-                <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 ?>
@@ -1228 +1287 @@
 
                 <# 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>
-                <# } #>
-                <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>
-
-                <label class="setting checkbox-setting">
-                    <input type="checkbox" data-setting="loop" />
-                    <span><?php _e( 'Loop' ); ?></span>
-                </label>
-
-                <div class="setting" data-setting="content">
+                </span>
+                <# } #>
+
+                <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>
+
+                <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>
+
+                    <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 = '';
@@ -1271 +1337 @@
                         _.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>
-            </div>
-        </div>
-    </script>
-
+                </span>
+            </div>
+        </div>
+    </script>
+
+    <?php // Template for a Gallery within the editor. ?>
     <script type="text/html" id="tmpl-editor-gallery">
         <# if ( data.attachments.length ) { #>
@@ -1315 +1382 @@
     </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.' ); ?>">
@@ -1320 +1388 @@
     </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>