Closed ntno closed 1 year ago
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>
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"
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>
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>
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>
wait nvm longdesc is deprecated - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/longDesc
maybe remove img_alt and link_text and replace with alt_text then add an img_desc img_desc would be for either:
the alt_text value would go:
the img_desc would be ignored for link only tiles
not sure how img_desc would render
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
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>
is it ok if the id "det" is generic? like "det-1", "det-2" for tile 1 and tile 2
how do img_desc and caption interact with each other where should img_desc be displayed?
maybe a link underneath the caption
"Detailed Description"? "Detailed Figure Description"?
then img_desc would be a link to a location with additional information
in a tile grid we would have a bunch of links with the exact same name
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
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
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
leaning towards appending the img_desc link to caption
both inside <figcaption>
see https://webaim.org/blog/alt-text-and-linked-images/ comment from article:
and
see https://usability.yale.edu/web-accessibility/articles/images
and
https://usability.yale.edu/web-accessibility/articles/links
also: