Changeset 37229

Timestamp:

04/17/2016 12:00:23 PM (9 years ago)

Author:

afercia

Message:

Customizer, Site Icon preview: improve alt attributes and text accessibility.

Props shahpranaf, TacoVerdo, afercia.

Fixes #36562.

Location:

trunk/src/wp-includes

Files:

• customize/class-wp-customize-site-icon-control.php (modified) (1 diff)
• media-template.php (modified) (3 diffs)

trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php

@@ -65 +65 @@
                 <div class="site-icon-preview">
                     <div class="favicon-preview">
-                        <img src="<?php echo esc_url( admin_url( 'images/browser.png' ) ); ?>" class="browser-preview" width="182" alt="<?php esc_attr_e( 'Browser interface preview' ); ?>" />
+                        <img src="<?php echo esc_url( admin_url( 'images/browser.png' ) ); ?>" class="browser-preview" width="182" alt="" />
 
                         <div class="favicon">
                             <img id="preview-favicon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
                         </div>
-                        <span class="browser-title"><?php bloginfo( 'name' ); ?></span>
+                        <span class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
                     </div>
                     <img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>

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

@@ -1233 +1233 @@
 
     <script type="text/html" id="tmpl-crop-content">
-        <img class="crop-image" src="{{ data.url }}" alt="">
+        <img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
         <div class="upload-errors"></div>
     </script>
@@ -1239 +1239 @@
     <script type="text/html" id="tmpl-site-icon-preview">
         <h2><?php _e( 'Preview' ); ?></h2>
-        <strong><?php _e( 'As a browser icon' ); ?></strong>
+        <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
         <div class="favicon-preview">
             <img src="images/browser.png" class="browser-preview" width="182" height="" alt="" />
@@ -1246 +1246 @@
                 <img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
             </div>
-            <span class="browser-title"><?php bloginfo( 'name' ); ?></span>
-        </div>
-
-        <strong><?php _e( 'As an app icon' ); ?></strong>
+            <span class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
+        </div>
+
+        <strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
         <div class="app-icon-preview">
             <img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>