WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/15/2019 10:42:35 AM (6 years ago)
Author:
afercia
Message:

Accessibility: improve the "URL" and "Alt text" fields in the media modals.

Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into.
Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized.

  • changes the URL field label to "Copy link"
  • moves the alt text field to the top as first field
  • avoids to set initial focus on the alt text 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 accordingly
  • updates the QUnit index.html file

Props melchoyce, audrasjb, afercia.
Fixes #41612.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/media-template.php

    r43976 r44900  
    162162        $class .= ' ie7';
    163163    }
     164
     165    $alt_text_description = sprintf(
     166        /* translators: 1: link start tag, 2: accessibility text, 3: link end tag */
     167        __( 'Describe %1$sthe purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ),
     168        '<a href="' . esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ) . '" target="_blank" rel="noopener noreferrer">',
     169        sprintf(
     170            '<span class="screen-reader-text"> %s</span>',
     171            /* translators: accessibility text */
     172            __( '(opens in a new tab)' )
     173        ),
     174        '</a>'
     175    );
    164176    ?>
    165177    <!--[if lte IE 8]>
    … …  
    405417
    406418            <div class="settings">
    407                 <label class="setting" data-setting="url">
    408                     <span class="name"><?php _e( 'URL' ); ?></span>
    409                     <input type="text" value="{{ data.url }}" readonly />
    410                 </label>
    411419                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     420                <# if ( 'image' === data.type ) { #>
     421                    <label class="setting" data-setting="alt">
     422                        <span class="name"><?php _e( 'Alternative Text' ); ?></span>
     423                        <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     424                    </label>
     425                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     426                <# } #>
    412427                <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
    413428                <label class="setting" data-setting="title">
    … …  
    433448                    <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    434449                </label>
    435                 <# if ( 'image' === data.type ) { #>
    436                     <label class="setting" data-setting="alt">
    437                         <span class="name"><?php _e( 'Alt Text' ); ?></span>
    438                         <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    439                     </label>
    440                 <# } #>
    441450                <label class="setting" data-setting="description">
    442451                    <span class="name"><?php _e( 'Description' ); ?></span>
    … …  
    457466                    </div>
    458467                <# } #>
     468                <label class="setting" data-setting="url">
     469                    <span class="name"><?php _e( 'Copy Link' ); ?></span>
     470                    <input type="text" value="{{ data.url }}" readonly />
     471                </label>
    459472                <div class="attachment-compat"></div>
    460473            </div>
    … …  
    596609        </div>
    597610
    598         <label class="setting" data-setting="url">
    599             <span class="name"><?php _e( 'URL' ); ?></span>
    600             <input type="text" value="{{ data.url }}" readonly />
    601         </label>
    602611        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     612        <# if ( 'image' === data.type ) { #>
     613            <label class="setting" data-setting="alt">
     614                <span class="name"><?php _e( 'Alt Text' ); ?></span>
     615                <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     616            </label>
     617            <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     618        <# } #>
    603619        <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
    604620        <label class="setting" data-setting="title">
    … …  
    624640            <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    625641        </label>
    626         <# if ( 'image' === data.type ) { #>
    627             <label class="setting" data-setting="alt">
    628                 <span class="name"><?php _e( 'Alt Text' ); ?></span>
    629                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    630             </label>
    631         <# } #>
    632642        <label class="setting" data-setting="description">
    633643            <span class="name"><?php _e( 'Description' ); ?></span>
    634644            <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     645        </label>
     646        <label class="setting" data-setting="url">
     647            <span class="name"><?php _e( 'Copy Link' ); ?></span>
     648            <input type="text" value="{{ data.url }}" readonly />
    635649        </label>
    636650    </script>
    … …  
    883897        </div>
    884898
     899        <label class="setting alt-text has-description">
     900            <span><?php _e( 'Alternative Text' ); ?></span>
     901            <input type="text" data-setting="alt" aria-describedby="alt-text-description" />
     902        </label>
     903        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     904
    885905        <?php
    886906        /** This filter is documented in wp-admin/includes/media.php */
    … …  
    892912            </label>
    893913        <?php endif; ?>
    894 
    895         <label class="setting alt-text">
    896             <span><?php _e( 'Alt Text' ); ?></span>
    897             <input type="text" data-setting="alt" />
    898         </label>
    899914
    900915        <div class="setting align">
    … …  
    949964                </div>
    950965                <div class="column-settings">
     966                    <label class="setting alt-text has-description">
     967                        <span><?php _e( 'Alternative Text' ); ?></span>
     968                        <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     969                    </label>
     970                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     971
    951972                    <?php
    952973                    /** This filter is documented in wp-admin/includes/media.php */
    … …  
    958979                        </label>
    959980                    <?php endif; ?>
    960 
    961                     <label class="setting alt-text">
    962                         <span><?php _e( 'Alternative Text' ); ?></span>
    963                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    964                     </label>
    965981
    966982                    <h2><?php _e( 'Display Settings' ); ?></h2>
Note: See TracChangeset for help on using the changeset viewer.