WordPress.org

Make WordPress Core

Changeset 45158


Ignore:
Timestamp:
04/10/2019 07:59:16 PM (5 months 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.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/media.css

    r44791 r45158  
    826826  14.2 - Image Editor
    827827------------------------------------------------------------------------------*/
     828.wp_attachment_details .attachment-alt-text {
     829    margin-bottom: 5px;
     830}
     831
     832.wp_attachment_details .attachment-alt-text-description {
     833    margin-top: 5px;
     834}
    828835
    829836.wp_attachment_details label[for="content"] {
  • trunk/src/wp-admin/includes/media.php

    r45082 r45158  
    30133013    </div>
    30143014    <div class="wp_attachment_details edit-form-section">
     3015    <?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
     3016        <p class="attachment-alt-text">
     3017            <label for="attachment_alt"><strong><?php _e( 'Alternative Text' ); ?></strong></label><br />
     3018            <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 ); ?>" />
     3019        </p>
     3020        <p class="attachment-alt-text-description" id="alt-text-description">
     3021            <?php
     3022            printf(
     3023                /* translators: 1: link start tag, 2: accessibility text, 3: link end tag */
     3024                __( '%1$sDescribe the purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ),
     3025                '<a href="' . esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ) . '" target="_blank" rel="noopener noreferrer">',
     3026                sprintf(
     3027                    '<span class="screen-reader-text"> %s</span>',
     3028                    /* translators: accessibility text */
     3029                    __( '(opens in a new tab)' )
     3030                ),
     3031                '</a>'
     3032            );
     3033            ?>
     3034        </p>
     3035    <?php endif; ?>
     3036
    30153037        <p>
    30163038            <label for="attachment_caption"><strong><?php _e( 'Caption' ); ?></strong></label><br />
    30173039            <textarea class="widefat" name="excerpt" id="attachment_caption"><?php echo $post->post_excerpt; ?></textarea>
    30183040        </p>
    3019 
    3020 
    3021     <?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
    3022         <p>
    3023             <label for="attachment_alt"><strong><?php _e( 'Alternative Text' ); ?></strong></label><br />
    3024             <input type="text" class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" value="<?php echo esc_attr( $alt_text ); ?>" />
    3025         </p>
    3026     <?php endif; ?>
    30273041
    30283042    <?php
     
    30383052
    30393053    <label for="attachment_content"><strong><?php _e( 'Description' ); ?></strong>
    3040                                                         <?php
    3041                                                         if ( preg_match( '#^(audio|video)/#', $post->post_mime_type ) ) {
    3042                                                             echo ': ' . __( 'Displayed on attachment pages.' );
    3043                                                         }
    3044                                                         ?>
     3054        <?php
     3055        if ( preg_match( '#^(audio|video)/#', $post->post_mime_type ) ) {
     3056            echo ': ' . __( 'Displayed on attachment pages.' );
     3057        }
     3058        ?>
    30453059    </label>
    30463060    <?php wp_editor( $post->post_content, 'attachment_content', $editor_args ); ?>
Note: See TracChangeset for help on using the changeset viewer.