đž Archived View for dj-chase.com âş documents âş alt-text-and-link-rot âş article.gmi captured on 2023-03-20 at 17:39:51.
âĄď¸ Next capture (2023-05-24)
-=-=-=-=-=-=-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Alt-Text & Link Rot â How Accessibility Features Benefit Everyone
</title>
<meta name="generator" content="//dj-chase.com/Make.py">
<link rel="stylesheet" href="../../style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- whitespace to right of nav -->
<div>
<span> </span>
</div>
<nav>
<a href="/" aria-label="home">â <span>âş</span></a> <a href="/documents/">documents <span>âş</span></a> <a href="/documents/alt-text-and-link-rot/">alt-text-and-link-rot <span>âş</span></a> <a href="/documents/alt-text-and-link-rot/article.gmi">article.gmi</a>
</nav>
<header>
<h1>
Alt-Text & Link Rot â How Accessibility Features Benefit Everyone
</h1>
</header>
<main>
<p>
Links rot. Itâs unfortunate, but itâs just a part of the web. Content disappears and links rot; if you donât host your own images, then you canât guarantee that your images will always appear. In this situation, alt-text can be the difference between your piece still making sense and it being completely useless. This is because many browsers show the alt-text with the missing image icon, so descriptive alt-text can make sure your audience still gets the necessary information.
</p>
<h2>
Examples
</h2>
<h3>
Quiz question
</h3>
<p>
Here is how this question is supposed to look like:
</p>
<blockquote>
<img class="center" src="menu.jpg" alt="Figure: Lunch menu showing prices of items. â˘Â Sushi bento â $12.00. â˘Â Vegan bento â $11.00. â˘Â Beef bento â $11.00. â˘Â Chirashi bento â $15.50.">
</blockquote>
<blockquote>
Alice, Bob, and Carlos go to a restaurant and pay a total of $38.50. Bob does not eat beef. Alice payed less than Carlos, Carlos payed more than Bob, and Alice payed more than Bob. What did each person order at the restaurant?
</blockquote>
<p>
Unfortunately, the link to the image no longer works, leaving this question completely unanswerable:
</p>
<blockquote>
<img class="center" src="menu.png">
</blockquote>
<blockquote>
Alice, Bob, and Carlos go to a restaurant and pay a total of $38.50. Bob does not eat beef. Alice payed less than Carlos, Carlos payed more than Bob, and Alice payed more than Bob. What did each person order at the restaurant?
</blockquote>
<p>
If the person who made the quiz provided alt-text, then the quiz would still be answerable (albeit erroneously formated):
</p>
<blockquote>
<img class="center" src="menu.jpg.png" alt="Figure: Lunch menu showing prices of items. â˘Â Sushi bento â $12.00. â˘Â Vegan bento â $11.00. â˘Â Beef bento â $11.00. â˘Â Chirashi bento â $15.50.">
</blockquote>
<blockquote>
Alice, Bob, and Carlos go to a restaurant and pay a total of $38.50. Bob does not eat beef. Alice payed less than Carlos, Carlos payed more than Bob, and Alice payed nore than Bob. What did each person order at the restaurant?
</blockquote>
<h3>
Graphs
</h3>
<p>
Math can be nearly impossible sometimes without graphing. Imagine if you prepared a document with graphs but didnât include alt-text! Here are some examples of how graphs can be understood through alt-text.
</p>
<blockquote>
<img class="center" src="abs_x-2_.svg" alt="Figure: Graph of y equals the absolute value of x-minus-two. The line is V-shaped with a slope of plus-or-minus 1. The point of the V is at x equals 2 y equals 0.">
</blockquote>
<blockquote>
Suppose we add the line <span class=".math">g(<var>x</var>) = |<var>x</var> â 2|</span>. Where would this line intersect with <span class=".math">f(<var>x</var>)</span>?
</blockquote>
<blockquote>
<hr class="light">
</blockquote>
<blockquote>
<img class="center" src="abs_x02_.png" alt="Figure: Graph of y = |x â 2|. The line is V-shaped with a slope of Âą1. The point of the V is at (2, 0).">
</blockquote>
<blockquote>
Suppose we add the line <span class=".math">g(<var>x</var>) = |<var>x</var> â 2|</span>. Where would this line intersect with <span class=".math">f(<var>x</var>)</span>?
</blockquote>
<hr class="light">
<blockquote>
<img class="center" src="abs_x02_.png">
</blockquote>
<blockquote>
Suppose we add the line <span class=".math">g(<var>x</var>) = |<var>x</var> â 2|</span>. Where would this line intersect with <span class=".math">f(<var>x</var>)</span>?
</blockquote>
<h3>
Images as links
</h3>
<p>
If you use images as links, then not using alt-text means theyâre completely unreadable if the image fails to load or if a user relies on a screenreader.
</p>
<blockquote>
<img class="center" src="covid-safety.jpg" alt="Northern Essex Community College COVID-19 Safety Measures">
</blockquote>
<blockquote>
<hr class="light">
</blockquote>
<blockquote>
<img class="center" src="covid-safety.png">
</blockquote>
<blockquote>
<hr class="light">
</blockquote>
<blockquote>
<img class="center" src="covid-safety.jpg.png" alt="Northern Essex Community College COVID-19 Safety Measures">
</blockquote>
<h3>
General
</h3>
<p>
Even if your images donât contain critical information, you still probably put them there for a reason. Itâd be nice if people still had an idea of the images if they donât load.
</p>
<blockquote>
<img class="center" src="hip.jpg" alt="Image of fresh fruits and vegetables titled âHealthy Incentives Programâ with the caption âFresh. Canned. Dried. Frozen. Itâs HIP to be healthy!â.">
</blockquote>
<blockquote>
Did you know that Massachusetts residents who qualify for food stamps (SNAP) can get an additional $40 per person per household each month to spend on fresh fruits and vegetables?
</blockquote>
<blockquote>
<hr class="light">
</blockquote>
<blockquote>
<img class="center" src="hip.png">
</blockquote>
<blockquote>
Did you know that Massachusetts residents who qualify for food stamps (SNAP) can get an additional $40 per person per household each month to spend on fresh fruits and vegetables?
</blockquote>
<blockquote>
<hr class="light">
</blockquote>
<blockquote>
<img class="center" src="hip.jpg.png" alt="Image of fresh fruits and vegetables titled âHealthy Incentives Programâ with the caption âFresh. Canned. Dried. Frozen. Itâs HIP to be healthy!â.">
</blockquote>
<blockquote>
Did you know that Massachusetts residents who qualify for food stamps (SNAP) can get an additional $40 per person per household each month to spend on fresh fruits and vegetables?
</blockquote><!-- html code generated by txt2tags 3.3 (http://txt2tags.org) -->
<footer>
<p>
Questions or comments? <a href="mailto:DJ%20Chase%20%3Cu9000@posteo.mx%3E">Email me</a>.
</p>
<p>
Š DJ Chase 2023-02-28. Licensed under the Academic Free License (AFL 3.0).
</p>
</footer><!-- cmdline: txt2tags -->
</main>
</body>
</html>