review accessibility of linked image tile

[ntno]

see https://webaim.org/blog/alt-text-and-linked-images/ comment from article:

Title is intended to provide supplementary information. If title is necessary for accessibility, then it is therefor NOT supplementary.

and

see https://usability.yale.edu/web-accessibility/articles/images

Image links should describe the purpose of the link, and must never describe the image.

and

https://usability.yale.edu/web-accessibility/articles/links

Image Links In general, content editors should avoid using images as links. If an image functions as a link, the image must have alt text that conveys the location and purpose of the link. The alt text should not describe the image. Treat image links as links, not as images.

also:

• https://www.w3.org/TR/WCAG20-TECHS/G196
• consider what should happen if a title is provided for both the link and the image

[ntno]

oof https://www.powermapper.com/tests/screen-readers/labelling/a-img-null-alt/ if you have a link and an image inside the link but the image has a null alt tag it causes problems in 135 screen reader / browser combinations <a href='4567.html'><img src='1234.png' alt=''></a>

[ntno]

https://www.powermapper.com/tests/screen-readers/labelling/a-img-alt/ when image is inside a link, the alt text should declare that it represents a link:

<a href='4567.html'><img src='1234.png' alt='this is a link alt'></a>

example ouput from screenreader:

"link graphic, this is a link alt" or "This is a link alt, graphic link"

[ntno]

https://www.w3.org/TR/WCAG20-TECHS/H30.html W3 example

<a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> 
</a> 

if the link contains text then the alt should be null:

<a href="routes.html">
  <img src="topo.gif" alt="" />
  Current routes at Boulders Climbing Gym
</a>

[ntno]

some examples have the link text go before the image tag:

<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>

[ntno]

consider adding longdesc attribute? https://www.w3.org/TR/WCAG20-TECHS/H45.html this is a link to a location with additional description, does not contain the description itself

<img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png">
<div id="desc">
<h3>Long Description: Line graph of the number of subscribers</h3>
<!-- Full Description of Graph -->
<p>Long description ends.</p>
<div>

or

<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>

[ntno]

wait nvm longdesc is deprecated - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/longDesc

[ntno]

maybe https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details ?

[ntno]

• we can't force the user to follow best practices but we should make it easy for them to do so correctly
• next steps:
  • define most common use cases
  • determine best practice
  • determine if there is an API change that would help users get to the best practice for most use cases

[ntno]

maybe remove img_alt and link_text and replace with alt_text then add an img_desc img_desc would be for either:

• descriptions too long for typical alt text (>100 char)
• description for an image when the image is being used as a link

the alt_text value would go:

• inside the a tag for a link only tile
• in the alt attribute of the img tag for an image only tile
• in the alt attribute of the img tag for linked image tile

the img_desc would be ignored for link only tiles

not sure how img_desc would render

[ntno]

issue^: no way to enforce that linked image's alt text indicates that it is a link maybe just need to rely on documentation to guide this

[ntno]

https://www.w3.org/TR/wai-aria-1.1/#aria-details

<!-- Provision of an extended description -->
<img src="pythagorean.jpg" alt="Pythagorean Theorem" aria-details="det">
<p>
  See an <a href="http://foo.com/pt.html" id="det">Application of the Pythagorean Theorem</a>.
</p>

or

<!-- Provision of an extended description -->
<img src="pythagorean.jpg" alt="Pythagorean Theorem" aria-details="det">
<details id="det">
  <summary>Example</summary>
  <p>
    The Pythagorean Theorem is a relationship in Euclidean Geometry between the three sides of
    a right triangle, where the square of the hypotenuse is the sum of the squares of the two
    opposing sides.
  </p>
  <p>
    The following drawing illustrates an application of the Pythagorean Theorem when used to
    construct a skateboard ramp.
  </p>
  <object data="skatebd-ramp.svg"  type="image/svg+xml"/>
  <p>
    In this example you will notice a skateboard with a base and vertical board whose width
    is the width of the ramp. To compute how long the ramp must be, simply calculate the
    base length, square it, sum it with the square of the height of the ramp, and take the
    square root of the sum.
  </p>
</details>

---

potential issue

is it ok if the id "det" is generic? like "det-1", "det-2" for tile 1 and tile 2

[ntno]

how do img_desc and caption interact with each other where should img_desc be displayed?

[ntno]

idea:

maybe a link underneath the caption "Detailed Description"? "Detailed Figure Description"?
then img_desc would be a link to a location with additional information

problem:

in a tile grid we would have a bunch of links with the exact same name

---

workarounds?

img_desc could be a full link (ie user passes <a>....</a>) or a markdown link (ie user passes [details](page#blah))*

*would require md-to-html plugin

problem

user could still have links that all used the same name? but maybe would be encouraged to have different names especially if using in page anchor tags

[ntno]

footnotes could be useful here because they provide a back link but i don't want to force the use of footnotes would be handy if it also worked for footnotes though? test this

[ntno]

leaning towards appending the img_desc link to caption both inside <figcaption>