From 15262c7d1a327c17c76a4a00d52ba60df565c946 Mon Sep 17 00:00:00 2001
From: Cesar Ferreyra-Mansilla <crf85@cornell.edu>
Date: Thu, 18 Jul 2024 17:34:51 -0400
Subject: [PATCH] -refactor/accessibility: add alt text for images
 -refactor/accessibility: order tabIndex -fix: gosling panel padding bug

---
 src/App.css                 |  9 +++++++
 src/App.tsx                 | 28 ++++++++++++++-----
 src/ui/ExportDropdown.tsx   |  4 +--
 src/ui/GenomeViewModal.tsx  | 20 +++++++++++---
 src/ui/VariantViewModal.tsx | 21 ++++++++++-----
 src/ui/trackData.ts         | 54 ++++++++++++++++++-------------------
 6 files changed, 90 insertions(+), 46 deletions(-)

diff --git a/src/App.css b/src/App.css
index ae8b1e00..5e882ddb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -492,12 +492,17 @@ a:hover {
     cursor: pointer;
     z-index: 998;
     opacity: 0.5;
+    border: none;
 }
 
 .move-to-top-btn:hover {
     opacity: 1;
 }
 
+.move-to-top-btn:focus-visible {
+    outline-offset: 2px;
+}
+
 .interaction-toggle-button {
     z-index: 999;
     cursor: pointer;
@@ -905,6 +910,10 @@ a:hover {
         border: 1px solid #d3d3d3;
     }
 
+    .navigation-button:focus-visible {
+        outline-offset: -1px;
+    }
+
     .navigation-button:hover:not(:disabled) {
         background-color: #ebebeb;
     }
diff --git a/src/App.tsx b/src/App.tsx
index 3ba484ff..2142ecac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -319,7 +319,7 @@ function App(props: RouteComponentProps) {
         window.addEventListener(
             'resize',
             debounce(() => {
-                setVisPanelWidth(window.innerWidth - VIS_PADDING.left * 2);
+                setVisPanelWidth(window.innerWidth - (isMinimalMode ? 10 : VIS_PADDING.left * 2));
             }, 500)
         );
 
@@ -553,10 +553,12 @@ function App(props: RouteComponentProps) {
         const offset = genomeViewHeight + (isMinimalMode ? 100 : 40) - 2;
 
         // Infer the tracks shown
-        const tracksShown: Track[] = ['driver', 'ideogram', 'gene', 'sv'];
-        if (demo.cnv) tracksShown.push('cnv', 'gain', 'loh');
+        const tracksShown: Track[] = ['ideogram', 'driver', 'gene'];
         if (demo.vcf && demo.vcfIndex) tracksShown.push('mutation');
         if (demo.vcf2 && demo.vcf2Index) tracksShown.push('indel');
+        if (demo.cnv) tracksShown.push('cnv', 'gain', 'loh');
+        // Pushing this after the others to match order of tracks in UI
+        tracksShown.push('sv');
         if (selectedSvId !== '') tracksShown.push('sequence');
         if (demo.bam && demo.bai && selectedSvId !== '') tracksShown.push('coverage', 'alignment');
         const HEIGHTS_OF_TRACKS_SHOWN = TRACK_DATA.filter(d => tracksShown.includes(d.type));
@@ -584,7 +586,7 @@ function App(props: RouteComponentProps) {
                     return (
                         <a
                             key={i}
-                            tabIndex={0}
+                            tabIndex={4}
                             role="button"
                             className="track-tooltip btn btn-sm"
                             data-bs-trigger="focus"
@@ -1141,6 +1143,7 @@ function App(props: RouteComponentProps) {
                                 <div className="navigation-button-container split navigation-button-genome">
                                     <button
                                         className="navigation-button split-left"
+                                        tabIndex={1}
                                         onClick={() => {
                                             setTimeout(
                                                 () =>
@@ -1155,6 +1158,7 @@ function App(props: RouteComponentProps) {
                                     </button>
                                     <button
                                         className="navigation-button split-right"
+                                        tabIndex={1}
                                         data-bs-toggle="modal"
                                         data-bs-target="#genome-view-modal"
                                     >
@@ -1172,6 +1176,7 @@ function App(props: RouteComponentProps) {
                                 <div className="navigation-button-container split navigation-button-variant">
                                     <button
                                         className="navigation-button split-left"
+                                        tabIndex={1}
                                         onClick={() => {
                                             setTimeout(() => {
                                                 document.getElementById('variant-view')?.scrollIntoView({
@@ -1187,6 +1192,7 @@ function App(props: RouteComponentProps) {
                                     </button>
                                     <button
                                         className="navigation-button split-right"
+                                        tabIndex={1}
                                         data-bs-toggle="modal"
                                         data-bs-target="#variant-view-modal"
                                     >
@@ -1210,7 +1216,7 @@ function App(props: RouteComponentProps) {
                                     <nav className="external-links-nav">
                                         <button
                                             className="open-in-chromoscope-link"
-                                            tabIndex={0}
+                                            tabIndex={2}
                                             onClick={e => {
                                                 e.preventDefault();
                                                 const { xDomain } = gosRef.current.hgApi.api.getLocation(
@@ -1283,6 +1289,7 @@ function App(props: RouteComponentProps) {
                             >
                                 <select
                                     id="variant-view"
+                                    tabIndex={3}
                                     style={{
                                         pointerEvents: 'auto'
                                         // !! This should be identical to how the height of circos determined.
@@ -1323,6 +1330,7 @@ function App(props: RouteComponentProps) {
                                     </svg>
                                     <input
                                         type="text"
+                                        tabIndex={3}
                                         className="gene-search"
                                         placeholder="Search Gene (e.g., MYC)"
                                         // alt={demo.assembly === 'hg38' ? 'Search Gene' : 'Not currently available for this assembly.'}
@@ -1379,6 +1387,7 @@ function App(props: RouteComponentProps) {
                                                 // !! This should be identical to how the height of circos determined.
                                                 // top: `${Math.min(visPanelWidth, 600)}px`
                                             }}
+                                            tabIndex={3}
                                             className="zoom-in-button control"
                                             onClick={e => {
                                                 const trackId = `${demo.id}-mid-ideogram`;
@@ -1402,6 +1411,7 @@ function App(props: RouteComponentProps) {
                                                 // !! This should be identical to how the height of circos determined.
                                                 // top: `${Math.min(visPanelWidth, 600)}px`
                                             }}
+                                            tabIndex={3}
                                             className="zoom-out-button control"
                                             onClick={e => {
                                                 const trackId = `${demo.id}-mid-ideogram`;
@@ -1426,6 +1436,7 @@ function App(props: RouteComponentProps) {
                                                 // !! This should be identical to how the height of circos determined.
                                                 // top: `${Math.min(visPanelWidth, 600)}px`
                                             }}
+                                            tabIndex={3}
                                             className="zoom-left-button control"
                                             onClick={e => {
                                                 const trackId = `${demo.id}-mid-ideogram`;
@@ -1449,6 +1460,7 @@ function App(props: RouteComponentProps) {
                                                 // !! This should be identical to how the height of circos determined.
                                                 // top: `${Math.min(visPanelWidth, 600)}px`
                                             }}
+                                            tabIndex={3}
                                             className="zoom-right-button control"
                                             onClick={e => {
                                                 const trackId = `${demo.id}-mid-ideogram`;
@@ -1636,8 +1648,10 @@ function App(props: RouteComponentProps) {
                         </div>
                     </div>
                 )}
-                <div
+                <button
                     className="move-to-top-btn"
+                    tabIndex={5}
+                    aria-label="Scroll to top."
                     onClick={() => {
                         setTimeout(
                             () => document.getElementById('gosling-panel')?.scrollTo({ top: 0, behavior: 'smooth' }),
@@ -1649,7 +1663,7 @@ function App(props: RouteComponentProps) {
                         <title>Scroll To Top</title>
                         <path fill="currentColor" d={ICONS.ARROW_UP.path[0]} />
                     </svg>
-                </div>
+                </button>
                 <div id="hidden-gosling" style={{ visibility: 'collapse', position: 'fixed' }} />
 
                 {isMinimalMode && (
diff --git a/src/ui/ExportDropdown.tsx b/src/ui/ExportDropdown.tsx
index 6bdbbcf4..27aedde4 100644
--- a/src/ui/ExportDropdown.tsx
+++ b/src/ui/ExportDropdown.tsx
@@ -9,7 +9,7 @@ type ExportButtonProps = {
 
 const ExportButton = ({ title, icon }: ExportButtonProps) => {
     return (
-        <svg className="button" viewBox="0 0 16 16">
+        <svg className="button" viewBox="0 0 16 16" tabIndex={2}>
             <title>{title}</title>
             {ICONS[icon].path.map(p => (
                 <path fill="currentColor" key={p} d={p} />
@@ -32,7 +32,7 @@ export const ExportDropdown = ({ gosRef, currentSpec }: ExportDropdownProps) =>
             onClick={() => setIsOpen(!isOpen)}
             aria-expanded={isOpen}
         >
-            <button className="export-button">
+            <button className="export-button" tabIndex={2}>
                 <span className="export-title">Export</span>
                 <svg className="button triangle-down" viewBox={ICONS.TRIANGLE_DOWN.viewBox}>
                     <title>Triangle Down</title>
diff --git a/src/ui/GenomeViewModal.tsx b/src/ui/GenomeViewModal.tsx
index 87b7a533..9c4a3d90 100644
--- a/src/ui/GenomeViewModal.tsx
+++ b/src/ui/GenomeViewModal.tsx
@@ -28,7 +28,10 @@ export const GenomeViewModal = () => {
                                 <hr className="header" />
                                 <div className="section-content">
                                     <div className="block with-image">
-                                        <img src={genome_interactions_1} alt="" />
+                                        <img
+                                            src={genome_interactions_1}
+                                            alt="Grab cursor over blue, selected region in Genome View."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>Click and drag</b> - the blue selection brush to highlight regions of
@@ -38,7 +41,10 @@ export const GenomeViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={genome_interactions_2} alt="" />
+                                        <img
+                                            src={genome_interactions_2}
+                                            alt="Move cursor over edge of blue, selected region in Genome View."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>Click and drag</b> - the edges of the selection brush to resize it.
@@ -47,7 +53,10 @@ export const GenomeViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={genome_interactions_3} alt="" />
+                                        <img
+                                            src={genome_interactions_3}
+                                            alt="Structural Variant detail pop up in Genome View."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>Hover</b> - over a structural variant to see detailed information.
@@ -56,7 +65,10 @@ export const GenomeViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={genome_interactions_4} alt="" />
+                                        <img
+                                            src={genome_interactions_4}
+                                            alt="Highlighted structural variant strand in Genome View."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>Click</b> - on a structural variant to inspect breakpoints in other
diff --git a/src/ui/VariantViewModal.tsx b/src/ui/VariantViewModal.tsx
index 144a7aea..470889bb 100644
--- a/src/ui/VariantViewModal.tsx
+++ b/src/ui/VariantViewModal.tsx
@@ -31,7 +31,7 @@ export const VariantViewModal = () => {
                                 <hr className="header" />
                                 <div className="section-content">
                                     <div className="block with-image">
-                                        <img src={variant_interpretation_1} alt="" />
+                                        <img src={variant_interpretation_1} alt="Variant View tracks." />
                                         <div className="text">
                                             <p>
                                                 A structural variant &#40;SV&#41; may leave a footprint on the copy
@@ -46,7 +46,10 @@ export const VariantViewModal = () => {
                                 <hr className="header" />
                                 <div className="section-content">
                                     <div className="block with-image">
-                                        <img src={variant_interactions_1} alt="" />
+                                        <img
+                                            src={variant_interactions_1}
+                                            alt="Black vertical line above Variant View tracks."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>The black vertical line</b> indicates region in focus.
@@ -55,7 +58,10 @@ export const VariantViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={variant_interactions_2} alt="" />
+                                        <img
+                                            src={variant_interactions_2}
+                                            alt="Structural Variant detail pop up in Structural Variant track."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>Hover</b> - over a structural variant to see detailed information.
@@ -64,7 +70,10 @@ export const VariantViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={variant_interactions_3} alt="" />
+                                        <img
+                                            src={variant_interactions_3}
+                                            alt="Structural Variant highlighted in Structural Variant track."
+                                        />
                                         <div className="text">
                                             <p>
                                                 <b>Click</b> - on a structural variant to show its breakpoints in the
@@ -77,7 +86,7 @@ export const VariantViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={variant_interactions_4} alt="" />
+                                        <img src={variant_interactions_4} alt="Zoom in and out buttons." />
                                         <div className="text">
                                             <p>
                                                 <b>Zoom in and out</b> - on chromosomal regions by clicking the{' '}
@@ -94,7 +103,7 @@ export const VariantViewModal = () => {
                                     </div>
                                     <hr />
                                     <div className="block with-image">
-                                        <img src={variant_interactions_5} alt="" />
+                                        <img src={variant_interactions_5} alt="Pan left and right buttons." />
                                         <div className="text">
                                             <p>
                                                 <b>Pan left and right</b> - around the current region by clicking the{' '}
diff --git a/src/ui/trackData.ts b/src/ui/trackData.ts
index f5625135..3c2578c1 100644
--- a/src/ui/trackData.ts
+++ b/src/ui/trackData.ts
@@ -61,14 +61,14 @@ export const getTrackData = (
                         <h3>Interpretation</h3>
                         <hr />
                         <div class="block with-image">
-                            <img src="${ideogram_interpretation_1}" alt="" />
+                            <img src="${ideogram_interpretation_1}" alt="Chromosome bands on Ideogram track." />
                             <div class="text">
                                 <p><b>Black stripes</b> - indicate chromosome bands (cytobands) obtained from chromosome staining viewing under microscope.</p>
                             </div>
                         </div>
                         <hr />
                         <div class="block with-image">
-                            <img src="${ideogram_interpretation_2}" alt="" />
+                            <img src="${ideogram_interpretation_2}" alt="Chromosome centromeres on Ideogram track." />
                             <div class="text">
                                 <p><span class="text-red"><b>Red Triangles</b></span> - represent chromosome centromeres.</p>
                             </div>
@@ -88,7 +88,7 @@ export const getTrackData = (
                         <hr class="header" />
                         <div class="section-content">
                             <div class="block with-image">
-                                <img src="${driver_interpretation_1}" alt="" />
+                                <img src="${driver_interpretation_1}" alt="Bi-allelic gene loss on Putative Driver track." />
                                 <div class="text">
                                     <p><b>Circle with a dot</b> - denotes bi-allelic gene loss.</p>
                                     <p><b>Circle without a dot</b> - denotes one mutation in gene.</p>
@@ -96,7 +96,7 @@ export const getTrackData = (
                             </div>
                             <hr />
                             <div class="block with-image">
-                            <img src="${driver_interpretation_2}" alt="" />
+                            <img src="${driver_interpretation_2}" alt="Driver mutation names on Genome View." />
                                 <div class="text">
                                     <p>Driver mutations are also annotated by name in the genome view.</p>
                                 </div>
@@ -112,7 +112,7 @@ export const getTrackData = (
                         <h3>Interactions</h3>
                         <hr class="header" />
                         <div class="block with-image">
-                            <img src="${driver_interactions_1}" alt="" />
+                            <img src="${driver_interactions_1}" alt="Putative Driver track annotation details pop up." />
                             <div class="text">
                                 <p><b>Hover</b> - over driver variants to see annotation details.</p>
                             </div>
@@ -130,7 +130,7 @@ export const getTrackData = (
                         <h3>Interpretation</h3>
                         <hr class="header" />
                         <div class="block with-image">
-                            <img src="${genes_interpretation_1}" alt="" />
+                            <img src="${genes_interpretation_1}" alt="Gene Annotation track." />
                             <div class="text">
                                 <p><b>Arrows</b> - represent genes.</p>
                                 <p><b>Direction</b> - denotes gene strand.</p>
@@ -138,7 +138,7 @@ export const getTrackData = (
                         </div>
                         <hr />
                         <div class="block with-image">
-                            <img src="${genes_interpretation_2}" alt="" />
+                            <img src="${genes_interpretation_2}" alt="Exons on the Gene Annotation track." />
                             <div class="text">
                                 <p><b>Thicker lines</b> - represent Exons.</p>
                             </div>
@@ -148,14 +148,14 @@ export const getTrackData = (
                         <h3>Interactions</h3>
                         <hr class="header"/>
                         <div class="block with-image">
-                            <img src="${genes_interactions_1}" alt="" />
+                            <img src="${genes_interactions_1}" alt="Gene Annotation track at low magnification." />
                             <div class="text">
-                                <p><b>Zoom out</b> - only selected genes are shown <a href="https://chromoscope.bio/visualizations/data-sampling/" target="_blank" rel="noreferrer">sampling info</a>.</p>
+                                <p><b>Zoom out</b> - to see only selected genes <a href="https://chromoscope.bio/visualizations/data-sampling/" target="_blank" rel="noreferrer">sampling info</a>.</p>
                             </div>
                         </div>
                         <hr />
                         <div class="block with-image">
-                            <img src="${genes_interactions_2}" alt="" />
+                            <img src="${genes_interactions_2}" alt="Gene Annotation track at high magnification." />
                             <div class="text">
                                 <p><b>Zoom in</b> - to a smaller region to see all genes in that region.</p>
                             </div>
@@ -173,7 +173,7 @@ export const getTrackData = (
                     <h3>Interpretation</h3>
                     <hr class="header"/>
                     <div class="block with-image">
-                        <img src="${mutations_interpretation_1}" alt="" />
+                        <img src="${mutations_interpretation_1}" alt="Point Mutation track y-axis." />
                         <div class="text">
                             <p><b>Y-axis</b> shows the distance (in kb) between adjacent point mutations, on a logarithmic scale.</p>
                         </div>
@@ -187,7 +187,7 @@ export const getTrackData = (
                     <h3>Interactions</h3>
                     <hr class="header" />
                     <div class="block with-image">
-                        <img src="${mutations_interactions_1}" alt="" />
+                        <img src="${mutations_interactions_1}" alt="Point Mutation track at high magnification." />
                         <div class="text">
                             <p>
                                 <b>Zoom in</b> - to reveal more point mutations.
@@ -196,7 +196,7 @@ export const getTrackData = (
                     </div>
                     <hr/>
                     <div class="block with-image">
-                        <img src="${mutations_interactions_2}" alt="" />
+                        <img src="${mutations_interactions_2}" alt="Point Mutation track details pop up." />
                         <div class="text">
                             <p><b>Hover</b> - over a point mutation to see details.</p>
                         </div>
@@ -220,7 +220,7 @@ export const getTrackData = (
                         </div>
                         <hr />
                         <div class="block with-image">
-                            <img src="${indel_interpretation_1}" alt="" />
+                            <img src="${indel_interpretation_1}" alt="Indel track." />
                             <div class="text">
                                 <p><span class="text-orange"><b>Orange lines</b></span> - mark insertions.</p>
                                 <p><span class="text-green"><b>Green lines</b></span> - mark deletions.</p>
@@ -228,7 +228,7 @@ export const getTrackData = (
                         </div>
                         <hr />
                         <div class="block with-image">
-                            <img src="${indel_interpretation_2}" alt="" />
+                            <img src="${indel_interpretation_2}" alt="Indel track." />
                             <div class="text">
                                 <p>When showing large chromosomal regions, Chromoscope selects 500 indels in each visible tile (<a href="https://chromoscope.bio/visualizations/data-sampling/#vcf--tbi" target="_blank" rel="noreferrer">see documentation on sampling</a>).</p>
                             </div>
@@ -239,9 +239,9 @@ export const getTrackData = (
                     <h3>Interactions</h3>
                     <hr class="header" />
                     <div class="block with-image">
-                        <img src="${indel_interactions_1}" alt="" />
+                        <img src="${indel_interactions_1}" alt="Indel track details pop up." />
                         <div class="text">
-                            <p><b>Hover</b> - on a deletion to see the deleted sequence.</p>
+                            <p><b>Hover</b> - on an insertion or deletion to see details.</p>
                         </div>
                     </div>
                 </div>
@@ -257,7 +257,7 @@ export const getTrackData = (
                         <h3>Interpretation</h3>
                         <hr class="header" />
                         <div class="block with-image">
-                            <img src="${copy_number_variants_interpretation_1}" alt="" />
+                            <img src="${copy_number_variants_interpretation_1}" alt="Copy Number Variants track." />
                             <div class="text">
                                 <p><span class="text-gray"><b>Thick gray lines</b></span> - represent copy number profiles.</p>
                                 <p><b>Y-axis</b> - represents the number of chromosome copies.</p>
@@ -265,7 +265,7 @@ export const getTrackData = (
                         </div>
                         <hr />
                         <div class="block with-image">
-                            <img src="${copy_number_variants_interpretation_2}" alt="" />
+                            <img src="${copy_number_variants_interpretation_2}" alt="Copy Number Variants track." />
                             <div class="text">
                                 <p>Copy number variants often coincide with structural variants.</p>
                             </div>
@@ -275,7 +275,7 @@ export const getTrackData = (
                         <h3>Interactions</h3>
                         <hr class="header" />
                         <div class="block with-image">
-                            <img src="${copy_number_variants_interactions_1}" alt="" />
+                            <img src="${copy_number_variants_interactions_1}" alt="Copy number segment details pop up." />
                             <div class="text">
                                 <p>
                                     <b>Hover</b> - over the copy number segment to see the number of copies of each chromosomal regions.
@@ -296,14 +296,14 @@ export const getTrackData = (
                     <h3>Interpretation</h3>
                     <hr class="header" />
                     <div class="block with-image">
-                        <img src="${gains_interpretation_1}" alt="" />
+                        <img src="${gains_interpretation_1}" alt="Gain track." />
                         <div class="text">
                             <p>Gains are declared in chromosomal regions where total number of copies exceeds 5.</p>
                         </div>
                     </div>
                     <hr />
                     <div class="block with-image">
-                        <img src="${gains_interpretation_2}" alt="" />
+                        <img src="${gains_interpretation_2}" alt="Region with Gains in Genome View." />
                         <div class="text">
                             <p>Regions with gains are marked in <span class="text-blue"><b>blue</b></span> on both Genome and Variant Views.</p>
                         </div>
@@ -325,14 +325,14 @@ export const getTrackData = (
                         <p>LOH is declared in regions where a chromosome copy from one of the parents was entirely lost (minor copy number of 0).</p>
                     </div>
                     <div class="block with-image">
-                        <img src="${loh_interpretation_1}" alt="" />
+                        <img src="${loh_interpretation_1}" alt="Loss of Heterozygosity region in Variant View." />
                         <div class="text">
                             <p>Regions with LOH are marked in <span class="text-coral"><b>coral</b></span> in Variant View.</p>
                         </div>
                     </div>
                     <hr />
                     <div class="block with-image">
-                        <img src="${loh_interpretation_2}" alt="" />
+                        <img src="${loh_interpretation_2}" alt="Loss of Heterozygosity region in Genome View." />
                         <div class="text">
                             <p>Regions with LOH are marked in <span class="text-coral"><b>coral</b></span> in Genome View.</p>
                         </div>
@@ -350,7 +350,7 @@ export const getTrackData = (
                      <h3>Interpretation</h3>
                      <hr class="header"/>
                      <div class="block with-image">
-                         <img src="${structural_variants_interpretation_1}" alt="" />
+                         <img src="${structural_variants_interpretation_1}" alt="Structural Variants track." />
                          <div class="text">
                              <p><b>Arches</b> - represent structural variants (SVs).</p>
                              <p><b>Colors</b> - denote different types of SVs.</p>
@@ -361,14 +361,14 @@ export const getTrackData = (
                      <h3>Interactions</h3>
                      <hr class="header" />
                      <div class="block with-image">
-                         <img src="${structural_variants_interactions_1}" alt="" />
+                         <img src="${structural_variants_interactions_1}" alt="Structural Variants track with event highlighted." />
                          <div class="text">
                              <p><b>Click</b> - on an SV to show its breakpoints in the read view.</p>
                          </div>
                      </div>
                      <hr/>
                      <div class="block with-image">
-                         <img src="${structural_variants_interactions_2}" alt="" />
+                         <img src="${structural_variants_interactions_2}" alt="Event details pop up on Structural Variants track." />
                          <div class="text">
                              <p><b>Hover</b> - over a SV to see more information about each event.</p>
                          </div>