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 (3 years 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 -->