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

Timestamp:

04/10/2019 07:59:16 PM (7 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 ); ?>