[wp-trac] [WordPress Trac] #47456: Improve the user interface to ensure correct usage of the image alt text

[WordPress Trac]

#47456: Improve the user interface to ensure correct usage of the image alt text
---------------------------+-----------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Media          |    Version:
 Severity:  normal         |   Keywords:  wpcampus-report
  Focuses:  accessibility  |
---------------------------+-----------------------------
 Splitting this out from the
 [https://github.com/WordPress/gutenberg/issues/created_by/karlgroves
 WPCampus accessibility report issues on the Gutenberg GitHub], see
 https://github.com/WordPress/gutenberg/issues/15309 as part of the
 reported issue applies to the Media Views in core.

 Related: #41467

 == Problem
 A common misconception is that the image alt text should always be a
 "description of the image". In most of the cases, this is misleading.
 Actually, the image alt text needs to describe the purpose of the image in
 its specific context. For more details, see the W3C Alt Text Decision Tree
 tutorial (https://www.w3.org/WAI/tutorials/images/decision-tree/).

 WordPress stores a "default" alt text in the media object. While storing a
 default value may help users when they build their content, it also
 promotes a misunderstanding of the purpose of the alt text.

 In the accessibility team, we think this is more an user interface problem
 rather than a data model problem. The user interface should ensure users
 clearly understand that alt attributes are context sensitive and that the
 "default" alt value needs to be changed (or even removed) based on the
 specific usage.

 == Data model problem:
 The alt text is not constant: it needs to describe the image purpose on a
 case by case basis.

 == User interface problem:
 The alt text from the media library is automatically assigned as the alt
 text within the post: this is not always correct. Actually, in most of the
 cases it produces wrong alt text.

 == Improvements to evaluate

 Credits: Some of the following points come from @carlseibert and
 @joedolson comments on #41467, and from the Gutenberg GitHub issue.

 1. allow saving multiple alt attributes for a given media object: a
 default attribute and a set of alternates users can select from
 2. have something in the editor UI that would let users know whether the
 alt text was filled, and what it says
 3. modifications on the Media views side to differentiate between the alt
 text describing the image and the alt text for a specific usage, which
 might override the normal alt text without changing it
 4. all linked images must have alternative text if the image is the sole
 content of the link, and the action should be blocked if this is not true
 5. any guidance given should inform users that the text provided needs to
 inform the user of the link action
 6. include a warning about linking directly to the image file: linking
 directly to images is inadvisable, because the resulting image view in the
 browser does not include alternate text
 7. when the image is linked to the image file itself, the alt text can
 remain the normal alternative text for that image, with an appended
 indicator that the link is to view the image
 8. worth considering plugins that add "lightbox" modals, sliders and the
 like often use the alt text value to add contextual text within their UI
 9. images used to link to other resources should offer a field to add
 dedicated link text separate from the image's own description; in this
 case the alt text should be empty. Example markup (simplified):

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47456>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform