Changeset 12544 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-photos/template-parts/photo-single.php

Timestamp:

04/14/2023 08:39:03 PM (17 months ago)

Author:

coffee2code

Message:

Photo Directory: Improve accessibility of displayed ALT text on single photo pages.

Props joedolson, alexstine, coffee2code.
See #6173.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-photos/template-parts/photo-single.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-photos/template-parts/photo-single.php

@@ -56 +56 @@
 
     <div class="entry-content">
-        <figure>
-            <?php $alt_text = get_the_content(); ?>
+        <?php $alt_text = get_the_content(); ?>
 
-            <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" aria-label="<?php esc_attr_e( 'View larger photo', 'wporg-photos' ); ?>">
-                <?php
-                printf(
-                    '<img class="single-photo" src="%s" srcset="%s" alt="%s">',
-                    esc_url( get_the_post_thumbnail_url( get_the_ID(), 'medium') ),
-                    esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id() ) ),
+        <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>">
+            <?php
+            printf(
+                '<img class="single-photo" src="%s" srcset="%s" alt="%s">',
+                esc_url( get_the_post_thumbnail_url( get_the_ID(), 'medium') ),
+                esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id() ) ),
+                sprintf(
+                    /* translators: %s: The alternative text for the photo. */
+                    'View larger photo: %s',
                     esc_attr( $alt_text )
-                );
-                ?>
-            </a>
+                )
+            );
+            ?>
 
-            <?php if ( $alt_text ) : ?>
+        </a>
 
-            <figcaption class="wp-caption-text" aria-hidden="true">
-                <span><?php _e( 'Alternative Text:', 'wporg-photos' ); ?></span><?php echo wp_kses_post( $alt_text ); ?>
-            </figcaption>
+        <?php if ( $alt_text ) : ?>
 
-            <?php endif; ?>
-        </figure>
+        <p class="photo-alt-text">
+            <span><?php _e( 'Alternative Text: ', 'wporg-photos' ); ?></span><?php echo wp_kses_post( $alt_text ); ?>
+
+        </p>
+
+        <?php endif; ?>
+
     </div><!-- .entry-content -->