Address some issues from the accessibility milestone (#1562)

* show that welcome video is playable in alt-text

* Add the full form of AoC in the alt texts

* add alt-text to all images

* change alt-texts for timeline page

* Add correct date

* add alt text to clickable images

Author: DragonSenseiGuy

pydis_site/apps/timeline/entries/2018-02-03_our-logo-is-born.md

@@ -5,5 +5,5 @@ icon: pydis
 ---
 
 <p style="background-color: #7289DA; border-radius: 10px;">
-  <img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
+  <img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg" alt="Python Discord Logo">
 </p>

pydis_site/apps/timeline/entries/2024-10-07_python-313-release-stream.md

@@ -1,6 +1,6 @@
 ---
 title: Python 3.13 Release Stream
-date: Oct 10th, 2022
+date: Oct 10th, 2024
 icon: pydis
 ---
 

pydis_site/templates/events/main_events.html

@@ -38,7 +38,7 @@ <h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek</a
     </div>
     <div class="card">
         <div class="card-image">
-            <img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
+            <img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for Advent of Code">
         </div>
         <div class="card-content">
             <h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</a></h2>
@@ -53,7 +53,7 @@ <h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Adv
     </div>
     <div class="card">
         <div class="card-image">
-            <img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
+            <img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for Advent of Code">
         </div>
         <div class="card-content">
             <h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>

pydis_site/templates/events/other_events.html

@@ -35,7 +35,7 @@ <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PTjLkvvjKnM">Fan
         <article class="media">
             <div class="media-left">
                 <p class="image">
-                    <img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                    <img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;" alt="">
                 </p>
             </div>
             <div class="media-content">
@@ -85,7 +85,7 @@ <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=00CW1y-O8YQ">Dev
         <article class="media">
             <div class="media-left">
                 <p class="image">
-                    <img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
+                    <img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;" alt="">
                 </p>
             </div>
             <div class="media-content">
@@ -111,7 +111,7 @@ <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=AHT2l3hcIJg">Pyt
         <article class="media">
             <div class="media-left">
                 <p class="image">
-                    <img loading=lazy src="/static/images/events/pixels_logo_transparent.gif" style="width: 3rem;">
+                    <img loading=lazy src="/static/images/events/pixels_logo_transparent.gif" style="width: 3rem;" alt="">
                 </p>
             </div>
             <div class="media-content">

pydis_site/templates/events/scheduled_events.html

@@ -3,7 +3,7 @@ <h2 class="title is-5" style="margin-bottom: 2rem;">Scheduled events</h2>
     <article class="media">
         <div class="media-left">
             <p class="image is-64x64">
-                <a href="{% url "events:page" path="code-jams/12" %}"><img class="is-rounded" src="/static/images/events/summer_code_jam_2025/logo.png"></a>
+                <a href="{% url "events:page" path="code-jams/12" %}"><img class="is-rounded" src="/static/images/events/summer_code_jam_2025/logo.png" alt="Summer Code Jam 2025"></a>
             </p>
         </div>
         <div class="media-content">
@@ -26,7 +26,7 @@ <h5 class="title is-4"><a href="{% url "events:page" path="code-jams/12" %}">Sum
     <article class="media">
         <div class="media-left">
             <p class="image is-64x64">
-                <a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
+                <a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png" alt="PyWeek 38"></a>
             </p>
         </div>
         <div class="media-content">
@@ -49,7 +49,7 @@ <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 38
     <article class="media">
         <div class="media-left">
             <p class="image is-64x64">
-                <a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
+                <a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png" alt="Advent of Code"></a>
             </p>
         </div>
         <div class="media-content">

pydis_site/templates/events/sidebar/adventofcode/useful-links.html

@@ -1,6 +1,6 @@
 <div class="box">
     <div class="has-text-centered">
-        <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
+        <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for Advent of Code">
     </div>
     <p class="menu-label">Quick links</p>
     <ul class="menu-list">

pydis_site/templates/events/sidebar/main_sidebar.html

@@ -3,7 +3,7 @@ <h2 class="title is-5">Previous events</h2>
     <article class="media">
         <div class="media-left">
             <p class="image is-32x32">
-                <img class="is-rounded" src="/static/images/events/summer_code_jam_2023/logo.PNG">
+                <img class="is-rounded" src="/static/images/events/summer_code_jam_2023/logo.PNG" alt="">
             </p>
         </div>
         <div class="media-content">
@@ -16,7 +16,7 @@ <h5 class="title is-5"><a href="{% url "events:page" path="code-jams/10" %}">Sum
     <article class="media">
         <div class="media-left">
             <p class="image is-32x32">
-                <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
+                <img class="is-rounded" src="/static/images/events/icons/pyweek.png" alt="">
             </p>
         </div>
         <div class="media-content">
@@ -29,7 +29,7 @@ <h5 class="title is-5"><a href="https://pyweek/36/">PyWeek 36</a></h5>
     <article class="media">
         <div class="media-left">
             <p class="image is-32x32">
-                <img class="is-rounded" src="/static/images/events/icons/adventofcode.png">
+                <img class="is-rounded" src="/static/images/events/icons/adventofcode.png" alt="">
             </p>
         </div>
         <div class="media-content">
@@ -42,7 +42,7 @@ <h5 class="title is-5"><a href="https://adventofcode.com/2023">Advent of Code 20
     <article class="media">
         <div class="media-left">
             <p class="image is-32x32">
-                <img class="is-rounded" src="/static/images/events/icons/pyweek.png">
+                <img class="is-rounded" src="/static/images/events/icons/pyweek.png" alt="">
             </p>
         </div>
         <div class="media-content">

pydis_site/templates/events/sidebar/revivalofcode.html

@@ -1,6 +1,6 @@
 <div class="box">
     <div class="has-text-centered">
-        <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
+        <img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for Advent of Code">
     </div>
     <p class="menu-label">Quick links</p>
     <ul class="menu-list">

pydis_site/templates/home/index.html

@@ -36,7 +36,7 @@
                 span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020}
               </style>
               <a href=https://www.youtube.com/embed/ZH26PuX3re0?autoplay=1>
-                <img src='{% static "images/frontpage/welcome.jpg" %}' alt='Welcome to Python Discord'>
+                <img src='{% static "images/frontpage/welcome.jpg" %}' alt='Welcome to Python Discord, click to play'>
                 <span>▶</span>
               </a>"
               allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

pydis_site/templates/timeline/timeline.html

@@ -17,7 +17,7 @@
         <div class="timeline-icon-date">
           <div class="timeline-icon {{ entry.icon_color }}">
             {% if entry.icon == "pydis" %}
-              <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
+              <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="">
             {% else %}
               <span class="icon"><i class="{{ entry.icon }}"></i></span>
             {% endif %}