5709a7858d5c197721be66d5218a79124abadb70
lrnassar
  Tue Mar 17 08:46:31 2026 -0700
Adding alt text to images across static documentation pages, CGI headers, markdown docs, and Pandoc templates. Content images receive AI-generated descriptive alt text; decorative images (icons, spacers, toggles) receive alt="" per WCAG best practice. Also adds Image Descriptions section to the accessibility page, and fixes Pandoc Lua writers to output alt attributes. 67 files, covering help docs, news archive, ENCODE pages, portal pages, and session examples. refs #37254

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index 92a461724af..d73ac74af0f 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -157,23 +157,23 @@
   </div> <!-- end column -->
 </div>   <!-- end row -->
 
 <h2>Section with a picture and caption</h2>
 <p>
 Use the &quot;img&quot; tag to include the picture file, which is typically in .jpg or .png format.
 Images should normally have their &quot;width&quot; and &quot;height&quot; attributes set in the
 &quot;img&quot; element. 
 The caption is a &quot;p&quot; element, which is assigned the &quot;gbsCaption&quot; class.
 To center the image, wrap it in a &quot;div&quot; or &quot;p&quot; element, and add the
 bootstrap &quot;text-center&quot; class to the wrapper element (also adding to a caption if present).
 </p>
 <p>
 In the special case where an image is used as a character/symbol embedded inline in
 a paragraph, add the class &quot;gbsInlineImg&quot; to the image tag, i.e. here's the wrench 
-(<img class="gbsInlineImg" src="images/wrench.png">).</p>
+(<img alt="" class="gbsInlineImg" src="images/wrench.png">).</p>
 <p class="text-center">
   <img class="text-center" src="images/gbstaff16.jpg" alt="Genome Browser staff" width="499" height="299">
   <p class="gbsCaption text-center">Browser staff in native habitat.</p>
 </p>
 
 <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->