diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index d1f333e343..ea5787d4cb 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -781,8 +781,8 @@ border color while dragging a file over the uploader drop area */
 
 .edit-attachment-frame input,
 .edit-attachment-frame textarea {
-	padding: 6px 8px;
-	line-height: 1.14285714;
+	padding: 4px 8px;
+	line-height: 1.42857143;
 }
 
 .edit-attachment-frame .attachment-info {
@@ -849,6 +849,11 @@ border color while dragging a file over the uploader drop area */
 	margin-bottom: 5px;
 }
 
+.wp_attachment_details #attachment_alt {
+	max-width: 500px;
+	height: 3.28571428em;
+}
+
 .wp_attachment_details .attachment-alt-text-description {
 	margin-top: 5px;
 }
@@ -1231,11 +1236,24 @@ audio, video {
 }
 
 @media screen and (max-width: 782px) {
+	.edit-attachment-frame input,
+	.edit-attachment-frame textarea {
+		line-height: 1.5;
+	}
+	
 	.wp_attachment_details label[for="content"] {
 		font-size: 14px;
 		line-height: 1.5;
 	}
 
+	.wp_attachment_details textarea {
+		line-height: 1.5;
+	}
+
+	.wp_attachment_details #attachment_alt {
+		height: 3.375em;
+	}
+
 	.media-upload-form .media-item.error,
 	.media-upload-form .media-item .error {
 		font-size: 13px;
diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
index 51f21ddb7d..c479ddc851 100644
--- a/src/wp-admin/includes/media.php
+++ b/src/wp-admin/includes/media.php
@@ -3207,7 +3207,7 @@ function edit_form_image_editor( $post ) {
 	<?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
 		<p class="attachment-alt-text">
 			<label for="attachment_alt"><strong><?php _e( 'Alternative Text' ); ?></strong></label><br />
-			<input type="text" class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description" value="<?php echo esc_attr( $alt_text ); ?>" />
+			<textarea class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description"><?php echo esc_attr( $alt_text ); ?></textarea>
 		</p>
 		<p class="attachment-alt-text-description" id="alt-text-description">
 		<?php
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 3bcfcd6bc0..27658f9dd5 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -100,6 +100,7 @@
 	color: #2c3338;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 13px;
+	line-height: 1.38461538;
 }
 
 .media-frame input[type="text"],
@@ -529,6 +530,13 @@
 	resize: vertical;
 }
 
+.media-sidebar .alt-text textarea,
+.attachment-details .alt-text textarea,
+.compat-item .alt-text textarea,
+.alt-text textarea {
+	height: 50px;
+}
+
 .compat-item {
 	float: left;
 	width: 100%;
@@ -2798,6 +2806,7 @@
 	.media-frame textarea,
 	.media-frame select {
 		font-size: 16px;
+		line-height: 1.5;
 	}
 
 	.media-frame .media-toolbar input[type="search"] {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index ddc9f5ee85..826649be39 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -475,9 +475,9 @@ function wp_print_media_templates() {
 			<div class="settings">
 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 				<# if ( 'image' === data.type ) { #>
-					<span class="setting has-description" data-setting="alt">
+					<span class="setting alt-text 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 }} />
+						<textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
 					</span>
 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 				<# } #>
@@ -706,9 +706,9 @@ function wp_print_media_templates() {
 		</div>
 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 		<# if ( 'image' === data.type ) { #>
-			<span class="setting has-description" data-setting="alt">
+			<span class="setting alt-text 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 }} />
+				<textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
 			</span>
 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 		<# } #>
@@ -1014,7 +1014,7 @@ function wp_print_media_templates() {
 
 		<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" />
+			<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
 		</span>
 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 
@@ -1077,7 +1077,7 @@ function wp_print_media_templates() {
 				<div class="column-settings">
 					<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" />
+						<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
 					</span>
 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
 
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index de4a9589be..47c5ee21ca 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -1171,10 +1171,10 @@
 			<div class="settings">
 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 				<# if ( 'image' === data.type ) { #>
-					<label class="setting" data-setting="alt">
-						<span class="name">Alternative Text</span>
-						<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
-					</label>
+					<span class="setting alt-text has-description" data-setting="alt">
+						<label for="attachment-details-two-column-alt-text" class="name">Alternative Text</label>
+						<textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
+					</span>
 					<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 				<# } #>
 								<label class="setting" data-setting="title">
@@ -1336,10 +1336,10 @@
 
 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 		<# if ( 'image' === data.type ) { #>
-			<label class="setting" data-setting="alt">
-				<span class="name">Alt Text</span>
-				<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
-			</label>
+			<span class="setting alt-text has-description" data-setting="alt">
+				<label for="attachment-details-alt-text" class="name">Alt Text</label>
+				<textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
+			</span>
 			<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 		<# } #>
 				<label class="setting" data-setting="title">
@@ -1628,10 +1628,10 @@
 			<img src="{{ data.model.url }}" draggable="false" alt="" />
 		</div>
 
-		<label class="setting alt-text has-description">
-			<span>Alternative Text</span>
-			<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
-		</label>
+		<span class="setting alt-text has-description">
+			<label for="embed-image-settings-alt-text" class="name">Alternative Text</label>
+			<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
+		</span>
 		<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 
 					<label class="setting caption">
@@ -1683,10 +1683,10 @@
 					</div>
 				</div>
 				<div class="column-settings">
-					<label class="setting alt-text has-description">
-						<span>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">Alternative Text</label>
+						<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
+					</span>
 					<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 
 											<label class="setting caption">