Changeset 45158 for trunk/src/wp-admin/includes/media.php

Timestamp:

04/10/2019 07:59:16 PM (6 years ago)

Author:

afercia

Message:

Accessibility: Improve the image "Alternative Text" field in the Edit Media screen.

Brings parity with the changes for the Media Views introduced in [44900].

• moves the alt text field to the top as first field
• adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial
• adds aria-describedby to target the explanatory text
• adjusts the CSS and indentation

Props chetan200891.
Fixes #46875.

File:

• trunk/src/wp-admin/includes/media.php (modified) (2 diffs)

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

@@ -3013 +3013 @@
     </div>
     <div class="wp_attachment_details edit-form-section">
+    <?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 ); ?>" />
+        </p>
+        <p class="attachment-alt-text-description" id="alt-text-description">
+            <?php
+            printf(
+                /* translators: 1: link start tag, 2: accessibility text, 3: link end tag */
+                __( '%1$sDescribe the purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ),
+                '<a href="' . esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ) . '" target="_blank" rel="noopener noreferrer">',
+                sprintf(
+                    '<span class="screen-reader-text"> %s</span>',
+                    /* translators: accessibility text */
+                    __( '(opens in a new tab)' )
+                ),
+                '</a>'
+            );
+            ?>
+        </p>
+    <?php endif; ?>
+
         <p>
             <label for="attachment_caption"><strong><?php _e( 'Caption' ); ?></strong></label><br />
             <textarea class="widefat" name="excerpt" id="attachment_caption"><?php echo $post->post_excerpt; ?></textarea>
         </p>
-
-
-    <?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
-        <p>
-            <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" value="<?php echo esc_attr( $alt_text ); ?>" />
-        </p>
-    <?php endif; ?>
 
     <?php
@@ -3038 +3052 @@
 
     <label for="attachment_content"><strong><?php _e( 'Description' ); ?></strong>
-                                                        <?php
-                                                        if ( preg_match( '#^(audio|video)/#', $post->post_mime_type ) ) {
-                                                            echo ': ' . __( 'Displayed on attachment pages.' );
-                                                        }
-                                                        ?>
+        <?php
+        if ( preg_match( '#^(audio|video)/#', $post->post_mime_type ) ) {
+            echo ': ' . __( 'Displayed on attachment pages.' );
+        }
+        ?>
     </label>
     <?php wp_editor( $post->post_content, 'attachment_content', $editor_args ); ?>