From 04d3ecf49c31442b6723245e3965157d04af70c1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 01:10:45 +0000
Subject: [PATCH] Improve image accessibility by adding alt attributes

Co-authored-by: cmonteverde <83616016+cmonteverde@users.noreply.github.com>
---
 .Jules/palette.md                             |   4 ++++
 .gitignore                                    |   5 +++++
 __pycache__/nasa_data.cpython-312.pyc         | Bin 18004 -> 18004 bytes
 ...st_api_status.cpython-312-pytest-9.0.2.pyc | Bin 3321 -> 3321 bytes
 ...est_nasa_data.cpython-312-pytest-9.0.2.pyc | Bin 2398 -> 2398 bytes
 app.py                                        |   4 ++--
 satellite_homepage.py                         |   2 +-
 7 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 .gitignore

diff --git a/.Jules/palette.md b/.Jules/palette.md
index a237026..a2f4ab1 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -3,3 +3,7 @@
 ## 2025-05-20 - [Accessible Streamlit Inputs]
 **Learning:** Streamlit `text_input` fields with empty strings for labels (`""`) are inaccessible to screen readers as they lack a programmatic label.
 **Action:** Use `label_visibility="collapsed"` with a descriptive label string instead of an empty label to maintain visual design while ensuring accessibility.
+
+## 2025-05-21 - [Image Accessibility]
+**Learning:** Images embedded via raw HTML in Streamlit (using `st.markdown`) often lack `alt` attributes, making them inaccessible to screen readers.
+**Action:** Always add `alt` attributes to `<img>` tags in raw HTML, using empty strings (`alt=""`) for decorative images and descriptive text for informative ones.
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..22a5c1e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+__pycache__/
+*.pyc
+.venv/
+.pytest_cache/
+.DS_Store
diff --git a/__pycache__/nasa_data.cpython-312.pyc b/__pycache__/nasa_data.cpython-312.pyc
index 5bf9b2e0248a1840f770d7292bfab374d733da07..d06191053bdffff4819f21d439e090ed3bac6b25 100644
GIT binary patch
delta 24
ecmcc8!+52Kk@qw&FBbz4tXo=_X}pow-3<U^c?Wj@

delta 24
ecmcc8!+52Kk@qw&FBbz4tP8KrwBE?;?gjv1DhDtC

diff --git a/__pycache__/test_api_status.cpython-312-pytest-9.0.2.pyc b/__pycache__/test_api_status.cpython-312-pytest-9.0.2.pyc
index 86b2b1645072493dc3c1ba3fd213f52cee3b1910..2d93470f7101012994eb8864bd72e1882481171e 100644
GIT binary patch
delta 20
acmew<`BRenG%qg~0}!lRTDOt=9S;CT-3F!r

delta 20
acmew<`BRenG%qg~0}z}Dt=-7|jt2lmt_E)a

diff --git a/__pycache__/test_nasa_data.cpython-312-pytest-9.0.2.pyc b/__pycache__/test_nasa_data.cpython-312-pytest-9.0.2.pyc
index 6e3fb84d5bed86346e81b7e595f74ecabaa272dd..748724a9b6f20cbcff7a67498c1ed374d96f57b1 100644
GIT binary patch
delta 20
acmca7bWe!;G%qg~0}!lRTDOrqm=gd%rUk?R

delta 20
acmca7bWe!;G%qg~0}z}Dt=-5S%n1NLcLj|A

diff --git a/app.py b/app.py
index 253b607..d1c5fb9 100644
--- a/app.py
+++ b/app.py
@@ -287,7 +287,7 @@
 # Add topography decoration 
 st.markdown("""
 <div style="position: absolute; top: 0; right: 0; width: 45%; min-width: 400px; height: 300px; z-index: 1; overflow: visible; pointer-events: none;">
-    <img src="data:image/png;base64,{topo_base64}" style="width: 100%; height: 100%; object-fit: cover; object-position: top right;">
+    <img src="data:image/png;base64,{topo_base64}" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: top right;">
 </div>
 """.format(topo_base64=b64encode(open("assets/topography.png", "rb").read()).decode()), unsafe_allow_html=True)
 
@@ -559,7 +559,7 @@
 st.markdown(f"""
 <div style="display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 100%;">
     <div style="display: flex; align-items: center; justify-content: center;">
-        <img src="data:image/png;base64,{avatar_base64}" width="150" 
+        <img src="data:image/png;base64,{avatar_base64}" alt="CeCe Avatar" width="150"
             style="border-radius: 50%; margin-right: 20px;">
         <span class="gradient-text" style="font-size: 32px; font-weight: bold; white-space: nowrap;">
             CECE: YOUR CLIMATE & WEATHER AGENT
diff --git a/satellite_homepage.py b/satellite_homepage.py
index a58dbc9..6fe7de2 100644
--- a/satellite_homepage.py
+++ b/satellite_homepage.py
@@ -312,7 +312,7 @@ def create_satellite_homepage():
     # Build a mock screenshot of the main interface elements
     preview_logo = ""
     if logo_base64:
-        preview_logo = f'<img src="data:image/png;base64,{logo_base64}" width="60" style="border-radius: 50%; margin-right: 12px;">'
+        preview_logo = f'<img src="data:image/png;base64,{logo_base64}" alt="Climate Copilot Logo" width="60" style="border-radius: 50%; margin-right: 12px;">'
 
     st.markdown(f"""
     <div style="position: relative; max-width: 900px; margin: 0 auto 40px auto;">