[wp-trac] [WordPress Trac] #64374: Alt text helper text can be more educational and visual indicator of opening in new tab

[WordPress Trac]

#64374: Alt text helper text can be more educational and visual indicator of
opening in new tab
-------------------------+----------------------------
 Reporter:  burtrw       |       Owner:  joedolson
     Type:  enhancement  |      Status:  accepted
 Priority:  normal       |   Milestone:  7.0
Component:  Media        |     Version:
 Severity:  minor        |  Resolution:
 Keywords:  has-patch    |     Focuses:  accessibility
-------------------------+----------------------------

Old description:

> When viewing an image (media attachment), there is an input field for
> 'Alternative Text'.
>
> Under the input field is helper text of:
>
>  [https://www.w3.org/WAI/tutorials/images/decision-tree/ Learn how to
> describe the purpose of the image ''(opens in a new tab)''].
>  Leave empty if the image is purely decorative.
>
> There should be a visual indicator that the link opens in a new tab. The
> helper text can also be made more concise and educational.
>
> Suggested improvement:
>
>  Alt text describes the image's purpose. Leave it blank if the image is
> purely decorative. [https://www.w3.org/WAI/tutorials/images/decision-
> tree/ Learn more about alt text ''(opens in a new tab)'']. ↗️
>
> With the open in new tab dash icon at the end.

New description:

 When viewing an image (media attachment), there is an input field for
 'Alternative Text'.

 Under the input field is helper text of:

 {{{#!html
 <blockquote><p>
 <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
 target="_blank">Learn how to describe the purpose of the image<span class
 ="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the
 image is purely decorative.
 </p></blockquote>
 }}}

 There should be a visual indicator that the link opens in a new tab. The
 helper text can also be made more concise and educational.

 Suggested improvement:

 {{{#!html
 <blockquote><p>
 Alt text describes the image's purpose. Leave it blank if the image is
 purely decorative. <a href="https://www.w3.org/WAI/tutorials/images
 /decision-tree/" target="_blank">Learn more about alt text<span class
 ="screen-reader-text"> (opens in a new tab)</span></a>.<span aria-
 hidden="true" class="dashicons dashicons-external"></span>
 </p></blockquote>
 }}}

 With the open in new tab dash icon at the end.

--

Comment (by sabernhardt):

 (editing ticket description to hide screen reader text visually and to
 show the dashicon)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64374#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform