vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-13 21:30:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@44900 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-03-15 10:42:35 +00:00
parent d52e37ea5e
commit 026abd4bc6
4 changed files with 125 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/media-template.php
+46 -30
View File
@@ -161,6 +161,18 @@ function wp_print_media_templates() {
if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) {
$class .= ' ie7';
}
$alt_text_description = sprintf(
/* translators: 1: link start tag, 2: accessibility text, 3: link end tag */
__( 'Describe %1$sthe 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>'
);
?>
<!--[if lte IE 8]>
<style>
@@ -404,11 +416,14 @@ function wp_print_media_templates() {
</div>
<div class="settings">
<label class="setting" data-setting="url">
<span class="name"><?php _e( 'URL' ); ?></span>
<input type="text" value="{{ data.url }}" readonly />
</label>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name"><?php _e( 'Alternative Text' ); ?></span>
<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
</label>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
<# } #>
<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
<label class="setting" data-setting="title">
<span class="name"><?php _e( 'Title' ); ?></span>
@@ -432,12 +447,6 @@ function wp_print_media_templates() {
<span class="name"><?php _e( 'Caption' ); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
</label>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name"><?php _e( 'Alt Text' ); ?></span>
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
</label>
<# } #>
<label class="setting" data-setting="description">
<span class="name"><?php _e( 'Description' ); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
@@ -456,6 +465,10 @@ function wp_print_media_templates() {
<# } #>
</div>
<# } #>
<label class="setting" data-setting="url">
<span class="name"><?php _e( 'Copy Link' ); ?></span>
<input type="text" value="{{ data.url }}" readonly />
</label>
<div class="attachment-compat"></div>
</div>
@@ -595,11 +608,14 @@ function wp_print_media_templates() {
</div>
</div>
<label class="setting" data-setting="url">
<span class="name"><?php _e( 'URL' ); ?></span>
<input type="text" value="{{ data.url }}" readonly />
</label>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name"><?php _e( 'Alt Text' ); ?></span>
<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
</label>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
<# } #>
<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
<label class="setting" data-setting="title">
<span class="name"><?php _e( 'Title' ); ?></span>
@@ -623,16 +639,14 @@ function wp_print_media_templates() {
<span class="name"><?php _e( 'Caption' ); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
</label>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name"><?php _e( 'Alt Text' ); ?></span>
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
</label>
<# } #>
<label class="setting" data-setting="description">
<span class="name"><?php _e( 'Description' ); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
</label>
<label class="setting" data-setting="url">
<span class="name"><?php _e( 'Copy Link' ); ?></span>
<input type="text" value="{{ data.url }}" readonly />
</label>
</script>
<script type="text/html" id="tmpl-media-selection">
@@ -882,6 +896,12 @@ function wp_print_media_templates() {
<img src="{{ data.model.url }}" draggable="false" alt="" />
</div>
<label class="setting alt-text has-description">
<span><?php _e( 'Alternative Text' ); ?></span>
<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
</label>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
<?php
/** This filter is documented in wp-admin/includes/media.php */
if ( ! apply_filters( 'disable_captions', '' ) ) :
@@ -892,11 +912,6 @@ function wp_print_media_templates() {
</label>
<?php endif; ?>
<label class="setting alt-text">
<span><?php _e( 'Alt Text' ); ?></span>
<input type="text" data-setting="alt" />
</label>
<div class="setting align">
<span><?php _e( 'Align' ); ?></span>
<div class="button-group button-large" data-setting="align">
@@ -948,6 +963,12 @@ function wp_print_media_templates() {
</div>
</div>
<div class="column-settings">
<label class="setting alt-text has-description">
<span><?php _e( 'Alternative Text' ); ?></span>
<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
</label>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
<?php
/** This filter is documented in wp-admin/includes/media.php */
if ( ! apply_filters( 'disable_captions', '' ) ) :
@@ -958,11 +979,6 @@ function wp_print_media_templates() {
</label>
<?php endif; ?>
<label class="setting alt-text">
<span><?php _e( 'Alternative Text' ); ?></span>
<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
</label>
<h2><?php _e( 'Display Settings' ); ?></h2>
<div class="setting align">
<span><?php _e( 'Align' ); ?></span>