Index: src/js/media/views/modal.js
===================================================================
--- src/js/media/views/modal.js	(revision 45543)
+++ src/js/media/views/modal.js	(working copy)
@@ -117,6 +117,9 @@
 		// Set initial focus on the content instead of this view element, to avoid page scrolling.
 		this.$( '.media-modal' ).focus();
 
+		// Hide the page content from assistive technologies.
+		this.hideBodyFromScreenReaders( $el );
+
 		return this.propagate('open');
 	},
 
@@ -135,6 +138,17 @@
 		// Hide modal and remove restricted media modal tab focus once it's closed
 		this.$el.hide().undelegate( 'keydown' );
 
+		/*
+		 * Make all body children that have been made hidden when the modal opened
+		 * visible again to assistive technologies.
+		 */
+		_.each( $( this.hiddenElements ), function( element ) {
+			element.removeAttribute( 'aria-hidden' );
+		} );
+
+		this.hiddenElements = [];
+		this.isBodyHidden   = false;
+
 		// Move focus back in useful location once modal is closed.
 		if ( null !== this.clickedOpenerEl ) {
 			// Move focus back to the element that opened the modal.
@@ -202,6 +216,74 @@
 			this.escape();
 			event.stopImmediatePropagation();
 		}
+	},
+
+	/**
+	 * Stores elements that should be hidden from assistive technologies when
+	 * the modal opens.
+	 */
+	hiddenElements: [],
+
+	/**
+	 * Hides from assistive technologies all elements in the body element except
+	 * the provided element and other elements that should not be hidden.
+	 *
+	 * The reason we do this is because `aria-modal="true"` is buggy in Safari 11.1
+	 * and support is spotty in other browsers overall. In the future we should
+	 * consider removing these helper functions in favor of `aria-modal="true"`.
+	 *
+	 * @param {object} dialogElement The jQuery object representing the element that should not be hidden.
+	 */
+	hideBodyFromScreenReaders: function( dialogElement ) {
+		var elements,
+			self = this;
+
+		if ( this.isBodyHidden ) {
+			return;
+		}
+
+		// Get all the body children.
+		elements = document.body.children;
+
+		// Loop through the body children and hide the ones that should be hidden.
+		_.each( elements, function( element ) {
+			// Don't hide the modal element.
+			if ( element === dialogElement[0] ) {
+				return;
+			}
+
+			// Determine the body children to hide.
+			if ( self.elementShouldBeHidden( element ) ) {
+				element.setAttribute( 'aria-hidden', 'true' );
+				// Store the hidden elements.
+				self.hiddenElements.push( element );
+			}
+		} );
+
+		this.isBodyHidden = true;
+	},
+
+	/**
+	 * Determines if the passed element should not be hidden from assistive technologies.
+	 *
+	 * @param {object} element The DOM element that should be checked.
+	 *
+	 * @return {boolean} Whether the element should not be hidden from assistive technologies.
+	 */
+	elementShouldBeHidden: function( element ) {
+		var role = element.getAttribute( 'role' ),
+			liveRegionsRoles = [ 'alert', 'status', 'log', 'marquee', 'timer' ];
+
+		/*
+		 * Don't hide scripts, elements that already have `aria-hidden`, and
+		 * ARIA live regions.
+		 */
+		return ! (
+			element.tagName === 'SCRIPT' ||
+			element.hasAttribute( 'aria-hidden' ) ||
+			element.hasAttribute( 'aria-live' ) ||
+			liveRegionsRoles.indexOf( role ) !== -1
+		);
 	}
 });
 
Index: src/wp-includes/css/media-views.css
===================================================================
--- src/wp-includes/css/media-views.css	(revision 45543)
+++ src/wp-includes/css/media-views.css	(working copy)
@@ -542,7 +542,7 @@
 	right: 0;
 	bottom: 0;
 	margin: 0;
-	padding: 10px 0;
+	padding: 50px 0 10px;
 	background: #f3f3f3;
 	border-right-width: 1px;
 	border-right-style: solid;
@@ -2530,8 +2530,9 @@
 
 /* Landscape specific header override */
 @media screen and (max-height: 400px) {
-	.media-menu {
-		padding: 0;
+	.media-menu,
+	.media-frame:not(.hide-menu) .media-menu {
+		top: 44px;
 	}
 
 	.media-frame-router {
Index: src/wp-includes/media-template.php
===================================================================
--- src/wp-includes/media-template.php	(revision 45543)
+++ src/wp-includes/media-template.php	(working copy)
@@ -177,8 +177,8 @@
 
 	<?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-title" id="media-frame-title"></div>
 		<div class="media-frame-menu"></div>
-		<div class="media-frame-title"></div>
 		<div class="media-frame-router"></div>
 		<div class="media-frame-content"></div>
 		<div class="media-frame-toolbar"></div>
@@ -187,11 +187,11 @@
 
 	<?php // Template for the media modal. ?>
 	<script type="text/html" id="tmpl-media-modal">
-		<div tabindex="0" class="<?php echo $class; ?>">
+		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-modal="true" aria-labelledby="media-frame-title">
 			<# if ( data.hasCloseButton ) { #>
 				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
 			<# } #>
-			<div class="media-modal-content"></div>
+			<div class="media-modal-content" role="document"></div>
 		</div>
 		<div class="media-modal-backdrop"></div>
 	</script>