Skip to content

Instantly share code, notes, and snippets.

@tomasc

tomasc/long_descriptions.html

Last active October 28, 2016 17:19
Show Gist options
  • Save tomasc/eab937c0a39cdf44b11c896352bb4478 to your computer and use it in GitHub Desktop.
Save tomasc/eab937c0a39cdf44b11c896352bb4478 to your computer and use it in GitHub Desktop.
Download ZIP
LONG DESCRIPTIONS
Raw
long_descriptions.html
<!DOCTYPE html>
<html>
<head>
<title>LONG DESC</title>
</head>
<body>
<!-- On thumbnails (all images that link to other page with more information) we would set alt="" -->
<!-- On thumbnails, we do not expose the long descriptions -->
<a href="" aria-label="Propeller Group. Image description: content of alt tag">
<img src="" alt="" />
<h2>Propeller Group</h2>
</a>
<!-- NON-SIGHTED USERS -->
<!-- LONG DESC OFF -->
<div class='offscreen'>
<button aria-expanded='false'>long descriptions collapsed</button>
<ol style='display: none;'>
<li>foo</li>
<li>bar</li>
</ol>
</div>
<!-- LONG DESC ON -->
<div class='offscreen'>
<button aria-expanded='true'>long descriptions expanded</button>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
</div>
<!-- SIGHTED USERS -->
<!-- META TOGGLE ON -->
<!-- BUTTON OFF -->
<div>
<button aria-expanded='false'>long descriptions collapsed</button>
<ol style='display: none;'>
<li>foo</li>
<li>bar</li>
</ol>
</div>
<!-- BUTTON ON -->
<div>
<button aria-expanded='true'>long descriptions expanded</button>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
</div>
</body>
</html>
@sinabahram
Copy link

sinabahram commented Oct 28, 2016 •
edited
Loading

Possible ways images are surfaced:

  1. img by itself
  2. img inside of link
  3. img inside of link with other text

what needs to be surfaced to screen reader users, and how?
What1: Alt of image from Coyote
How1: Map alt from Coyote to alt attribute of image. Map "" to alt for thumbnails (all images that link to another page). Thumbnails also do not get long-description button (for sighted or screen reader users). Aria-label of parent link will contain, however, the image description in the form demonstrated in HTML in gist.
What2: potentially (not always available), longer-form description of image from Coyote
How2: See gist of surfacing long descriptions for all users
What3: if, and only if, there is no text to fall back on, then alt text that is functionally equivalent to the image // this may be from Coyote or simply hard-coded in e.g. for a social media icon, etc.
How3: // decie whehter htis comes from Coyote or simmply hard-coded into Tomas' code base.

What needs to be surfaced to sighted/low-vision users, and how:
What1: any descriptions from Coyote associated with the image
How1: See gist of surfacing long descriptions for all users

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment