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/goldenPath/help/hgGeneGraph.html src/hg/htdocs/goldenPath/help/hgGeneGraph.html index fca4153133f..8c53d0608ed 100755 --- src/hg/htdocs/goldenPath/help/hgGeneGraph.html +++ src/hg/htdocs/goldenPath/help/hgGeneGraph.html @@ -97,94 +97,88 @@ <ul> <li>Solid grey lines - only text-mining support for this interaction, with the thickness of the line indicating the number of articles supporting it.</li> <li>Dashed blue lines - at least one curated database supports this interaction. <ul> <li>dark blue - the information is derived from a paper describing fewer than 10 interactions</li> <li>light blue - the information is derived from a high-throughput paper, describing more than 10 interactions, e.g. a complex or a mass-spec study</li> </ul> <li>Solid blue lines - both databases and text mining support this interaction</li> </ul> <p> Here you can see nearly all of the different types of lines in a single gene interaction graph centered around the ROBO3 gene:</p> - <p><img class="text-center" src="../../images/hgGeneGraphLineDemo.png" - alt="Gene Interaction Graph Line Types" width="40%" height="40%"></p> + <p><img class="text-center" alt="Gene interaction graph with gene nodes connected by relationship lines" src="../../images/hgGeneGraphLineDemo.png" width="40%" height="40%"></p> <p> Lines may include arrows showing the directionality of this interaction. In these cases, the directionality is determined by majority support. For example, imagine an interaction between protein A and protein B; two articles support that A acts on B while a single article supports the opposite, B acting on A. In this case, because there are more articles supporting A acting on B, then the arrow will be drawn such that it starts at A and points to B. </p> <p> From the "Annotate Genes" drop-down, you can annotate genes based on GNF2 average expression, drugability from <a href="https://www.drugbank.ca/" target="_blank">DrugBank</a> entries, cancer type in the <a href="http://cancer.sanger.ac.uk/census/" target="_blank">COSMIC Cancer Gene Census</a>, and the number of non-silent mutations identified by the <a href="http://www.nature.com/ng/journal/v45/n10/full/ng.2764.html" target="_blank">PanCancer analysis project</a>. For the GNF2 expression and PanCancer Mutation coloring, genes will be colored on a sliding scale from light grey to black, with those items with the highest expression or the largest number of non-silent mutations being colored the darkest and those with lower expression or fewer mutations being colored grey. Genes will be colored dark blue if there is no information in the database. In this image, you can see a set of 14 genes that interact with TP53 colored by their PanCancer Mutation number:</p> - <p><img class="text-center" src="../../images/hgGeneGraphAnnotateDemo.png" - alt="Gene Interaction Graph 'Annotate Genes' Example" width="40%" height="40%"></p> + <p><img class="text-center" alt="Gene interaction graph with annotated edge labels showing interaction types" src="../../images/hgGeneGraphAnnotateDemo.png" width="40%" height="40%"></p> <p> You can mouse-over items in the display to show more details about the gene such as their product. If you've chosen to annotate genes with one of the various databases, then it will display that information as well. For instance, hovering over the BAX gene in this example displays a description of the gene product as well as the number of Pan-Cancer mutations since that option is selected: - <p><img class="text-center" src="../../images/hgGeneGraphItemHover.png" - alt="Gene Interaction Graph Item Hover Example" width="30%" height="30%"></p> + <p><img class="text-center" alt="Gene interaction graph highlighting a node on mouse hover" src="../../images/hgGeneGraphItemHover.png" width="30%" height="30%"></p> <p> You can mouse-over the connecting lines between genes to see more details about the evidence that supports this connection. In this image, you can see the details that pop-up when you mouse over such a line; information displayed includes database support and text-mining support.</p> - <p><img class="text-center" src="../../images/hgGeneGraphLineHover.png" - alt="Gene Interaction Graph Line Hover Example" width="30%" height="30%"></p> + <p><img class="text-center" alt="Gene interaction graph highlighting a relationship line on mouse hover" src="../../images/hgGeneGraphLineHover.png" width="30%" height="30%"></p> <p> If you click on the line connecting two proteins, you can see a <a href="http://www4.ncsu.edu/~mbcusick/papers/nenkova2005impact.pdf" target="_blank">SumBasic</a>-selected snippet of text from a Pubmed abstract and, if it is a curated interaction, the supporting information from the pathway or interaction databases. This example shows the text-mined support for an interaction between CASP5 and HUNK:</p> - <p><img class="text-center" src="../../images/hgGeneGraphLineClickDemo.png" - alt="Gene Interaction Graph Line Click Example" width="70%" height="70%"></p> + <p><img class="text-center" alt="Gene interaction graph showing click behavior on a relationship line" src="../../images/hgGeneGraphLineClickDemo.png" width="70%" height="70%"></p> <p> Below the graph of gene interactions and pathways, there is a table of less-supported interactions. These are interactions which were mentioned only a few times each in the literature.</p> - <p><img class="text-center" src="../../images/hgGeneGraphExtraInteractionsTable.png" - alt="Gene Interaction Graph Extra Interactions" width="75%" height="75%"></p> + <p><img class="text-center" alt="Gene interaction graph with an expanded table of additional interactions" src="../../images/hgGeneGraphExtraInteractionsTable.png" width="75%" height="75%"></p> <p> The numbers shown on mouse-over for each interaction represents the number of articles and number of databases that support this interaction. </p> <p> You can export the currently displayed gene interaction graph in a variety of formats including PDF, SVG, Cytoscape, and JSON. </p> <p> The gene interaction graph can be recentered around a new gene in a few different ways: (1) clicking a gene in the existing interaction graph, (2) clicking the triangle next to a gene in the table of minor interactions below