RE: Alternative text with multiple lines

I would recommend not relying on alternative text as the textual equivalent of the code and allowing the user to be able to view the source as text through an optional disclosure or with color added through CSS as the replacement for the image.    Users with low vision will likely want to enlarge the text, have it wrap, etc. rather than using then image.  So others can benefit from actual text not just screen reader users.

Jon

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
jon.avila@levelaccess.com
703.637.8957 office

Visit us online:
Website<http://www.levelaccess.com/> | Twitter<https://twitter.com/LevelAccessA11y> | Facebook<https://www.facebook.com/LevelAccessA11y/> | LinkedIn<https://www.linkedin.com/company/level-access> | Blog<http://www.levelaccess.com/blog/>

Looking to boost your accessibility knowledge? Check out our free webinars!<https://www.levelaccess.com/compliance-resources/webinars/>

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Raquel <raquel.moreno.carmena@gmail.com>
Sent: Friday, December 14, 2018 7:39 AM
To: w3c-wai-ig@w3.org
Subject: Alternative text with multiple lines

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Hi,

I've met a blind developer who suffers when reading posts which include source code within images.

The best solution would be to replace those images by text. According to https://www.w3.org/TR/WCAG21/#images-of-text: "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text". However, he's thinking about an option to show that beautiful image with source code in the visual rendering and, at the same time, to have the text of the source code only visible to assistive technology.

I admire he's looking for that solution, respecting the use of the image, in other words, respecting the development behind the functionality of getting images with colored and formatted source code.

The problem is having an alternative text with multiple lines.

Please, what do you think about this option?

  <img src="source-code-1.jpg" alt="Source code about ..." aria-details="source-code-1">
  <div id="source-code-1" hidden>
      /* source code */
  </div>

However, according to https://www.w3.org/TR/wai-aria-1.1/#aria-details: "Authors SHOULD ensure the element referenced by aria-details is visible to all users". This option hides that element.

I found several examples in https://www.w3.org/WAI/tutorials/images/complex/. However, longdesc seems not fully supported and other options don't support multiple lines of alternative text.
Another option could be to add a HTML details element below the image, which don't interfere too much with the visual aspect, because its content is only visible when it's toggled into an "open" state. Furthermore, offers the possibility of copying the source code. However, we're thinking about not showing another element in the page, in order to offer 2 options (with an additional visible element and without an additional visible element) and to be a proposal readily accepted for everybody.

I looked for information in ATAG, thinking about a user who has to add an alternative text with multiple lines to an image. However, those guidelines refer to WCAG: https://www.w3.org/TR/ATAG10/#def-alt-eq


Thanks in advance for your time,
Raquel