Making WordPress.org


Ignore:
Timestamp:
04/13/2023 11:24:48 PM (16 months ago)
Author:
coffee2code
Message:

Photo Directory: On single photo pages, improve accessibility of ALT text display.

Adds actual text to alt attribute for the photo img, but hides the figcaption from screen readers since it also displays the ALT text.

Props alexstine, coffee2code.
See #6173.

File:
1 edited

Legend:

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

    r12537 r12540  
    5757    <div class="entry-content">
    5858        <figure>
     59            <?php $alt_text = get_the_content(); ?>
     60
    5961            <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" aria-label="<?php esc_attr_e( 'View larger photo', 'wporg-photos' ); ?>">
    60                 <img class="single-photo" src="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'medium'); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id() ) ); ?>" alt="">
     62                <?php
     63                printf(
     64                    '<img class="single-photo" src="%s" srcset="%s" alt="%s">',
     65                    esc_url( get_the_post_thumbnail_url( get_the_ID(), 'medium') ),
     66                    esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id() ) ),
     67                    esc_attr( $alt_text )
     68                );
     69                ?>
    6170            </a>
    6271
    63             <?php
    64             $caption = get_the_content();
    65             if ( $caption ) {
    66             ?>
     72            <?php if ( $alt_text ) : ?>
    6773
    68             <figcaption class="wp-caption-text"><?php echo wp_kses_post( $caption ); ?></figcaption>
     74            <figcaption class="wp-caption-text" aria-hidden="true">
     75                <span><?php _e( 'Alternative Text:', 'wporg-photos' ); ?></span><?php echo wp_kses_post( $alt_text ); ?>
     76            </figcaption>
    6977
    70             <?php } ?>
     78            <?php endif; ?>
    7179        </figure>
    7280    </div><!-- .entry-content -->
Note: See TracChangeset for help on using the changeset viewer.