[wp-meta] [Making WordPress.org] #6173: Add ALT text field to upload form

[Making WordPress.org]

#6173: Add ALT text field to upload form
-----------------------------+---------------------
 Reporter:  alexstine        |       Owner:  (none)
     Type:  enhancement      |      Status:  new
 Priority:  normal           |   Milestone:
Component:  Photo Directory  |  Resolution:
 Keywords:  needs-patch      |
-----------------------------+---------------------

Comment (by coffee2code):

 To summarize the requested changes... First, using
 [https://wordpress.org/photos/photo/167643962d/ this photo] here's what we
 have currently:

 {{{
 <figure>
     <a href="https://pd.w.org/2023/04/167643962da0092c4.76808684.jpg"
 aria-label="View larger photo">
         <img class="single-photo"
 src="https://pd.w.org/2023/04/167643962da0092c4.76808684-300x225.jpg"
 srcset="..." alt="View of a Venetian canal with one person photographing
 from the bridge">
     </a>

     <figcaption class="wp-caption-text" aria-hidden="true">
         <span>Alternative Text:</span>View of a Venetian canal with one
 person photographing from the bridge
     </figcaption>
 </figure>
 }}}

 Here's that same markup after the proposed changes:

 {{{
 <figure>
     <a href="https://pd.w.org/2023/04/167643962da0092c4.76808684.jpg">
         <img class="single-photo"
 src="https://pd.w.org/2023/04/167643962da0092c4.76808684-300x225.jpg"
 srcset="..." alt="" aria-labelledby="photo-alt-text view-larger-photo">
     </a>

     <figcaption id="photo-alt-text" class="wp-caption-text">
         <span aria-hidden="true">Alternative Text: </span>View of a
 Venetian canal with one person photographing from the bridge
     </figcaption>
     <span id="view-larger-photo" class="screen-reader-text">View larger
 photo</span>
 </figure>
 }}}

 Here's a summary of changes:
 1. Remove `aria-label` attribute from `a`.
 2. Remove text from the `alt` attribute of `img`, leaving it blank.
 3. Add `aria-labelledby="view-larger-photo photo-alt-text"` attribute to
 `img`, pointing both to a new `span` containing the "View larger photo"
 instruction and to the `figcaption`.
 4. Add `id="photo-alt-text"` to `figcaption`.
 5. Remove the `aria-hidden="true"` from the `figcaption`
 6. Create a new `span` containing the text "View larger photo". (This
 general markup only appears on single-photo pages, so it will only appear
 in the markup once and not be repeated for multiple images.)
 7. Add `aria-hidden="true"` to the `span` within the `figcaption`. This
 wasn't requested, but I wondered if it was unnecessary for assistive
 technologies to announce that the text is labelled as "Alternative Text:"
 if it was serving that purpose already. For sighted users, the intent was
 to make it clear that the text can be used by them as ALT text.

 > Do you think it is a problem that I am using aria-description to
 communicate the links purpose? I am trying to balance usefulness and
 verbosity. It makes sense to me to read the figcaption but users may not
 want to hear every time that the link opens a larger image view.

 If verbosity is the concern, bear in mind that this use of `figure` only
 occurs on single-photo pages, so the "View larger photo" instruction would
 only appear once on the page, wherever it ends up.

 > The other thing we could do is expose it outside of the figure element
 all together. Something like a Copy ALT Text button. I think that would be
 a much cleaner approach.

 A copy-to-clipboard button for the ALT text is definitely on the agenda
 once we've addressed this ticket. I was thinking a button that appears at
 the end of the `figcaption` text. How does moving the displayed ALT text
 out of the figure element help with this? I would think, semantically at
 least, we'd still want that text associated with the image, thus all
 included in the figure.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/6173#comment:26>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org