Implement dynamic alt text for 2020 and 2021

Author: MattyTheHacker

_data/ball/2020.yaml

@@ -14,13 +14,16 @@ features:
     with CSS balloons. Once we had enjoyed the delicious food and finally exhausted the supply of booze, 
     we invaded the dance floor, where we held our very own CSS disco.'
     image: 'balloons-bubbles-booze.jpg'
+    alt: 'An image taken at the css ball, showing individuals out of focus behind confetti'
   - title: 'New Friends and Old'
     paragraph: 'At the event, many future best friends met for the first time. For many others, it was the last.
     Whether fresher or final year, we all created lifelong memories from the mayhem that was that night.'
     image: 'new-friends-and-old.jpg'
+    alt: 'An image taken at the css ball, showing a group of friends posing for a photo'
   - title: 'A Well-Timed Ball'
     paragraph: "For most, CSS Ball 2020 was the last time we could get together with our friends and truly have 
     a blast before we went into lockdown 10 days later. It was our last chance for a year and a half to get up 
     to the crazy shenanigans which CSS is famous for. Its a miracle we even had a ball in 2020, and it will 
     always remain an unforgettable night."
     image: 'well-timed-ball.jpg'
+    alt: 'An image taken at the css ball, showing a group of friends posing for a photo'

_data/ball/2021.yaml

@@ -12,23 +12,30 @@ features:
     guests could walk around, chat and show off their outfits!"
     images:
       - name: "start.png"
+        alt: "An image of the Gather.Town map with the dining hall"
   - title: "But what about food?"
     paragraph: "Don't worry, we had that covered! Each guest received an Uber Eats voucher (worth more than the 
     ticket cost!) which they used to get their favourite dish delivered straight to their door. And just like   
     at any other ball, we sat together at (virtual) tables!"
     images:
       - name: "Screenshot_20210325_201739.png"
+        alt: "An image of the Gather.Town map with the dining hall and several members of the CSS community"
   - title: "...and drink?"
     paragraph: "The great thing about this year was that we could bring any drink we wanted. We even created    
     our own cocktail just for the event!"
     images:
       - name: "the_tex.png"
+        alt: "An image containing the recepie for the 'TeX' cocktail"
   - title: "Fun and Games"
     paragraph: "After we'd eaten, we enjoyed the custom-built maze and a treasure hunt around the map we had    
     created. We had a group photo competition, and got up to some famous CSS shenanigans. Everyone had an 
     absolute blast, and for many of us it was the highlight of the year!"
     images:
       - name: "maze.png"
+        alt: "An image of a maze as part of the game at the CSS Ball"
       - name: "unknown-12.png"
+        alt: "An image of the game being played as part of the Ball with 5 people in the image"
       - name: "rick-astley.png"
+        alt: "An image of Rick Astley being played as part of the Ball"
       - name: "CSS_Virtual_Ball_2021.jpg"
+        alt: "An image of multiple attendees of the online ball"

ball/2020/index.html

@@ -31,7 +31,8 @@ <h3 class="subsubtitle question">{{ qanda.title }}</h3>
         <p class="text-block answer">{{ qanda.paragraph }}</p>
         </div>
         {% assign url = ball.image_root | append: qanda.image %}
-        <img class="image" src="{{ url }}", alt="An image taken at the 2020 CSS Ball">
+        {% assign alt = qanda.alt %}
+        <img class="image" src="{{ url }}", alt="{{ alt }}">
         <br>
     {% endfor %}
 </div>

ball/2021/index.html

@@ -29,7 +29,8 @@ <h3 class="subsubtitle question">{{ qanda.title }}</h3>
         </div>
 	{% for image in qanda.images %}
 	  {% assign url = ball.image_root | append: image.name %}
-	  <img class="image" src="{{ url }}", alt="An image taken at the 2021 CSS Ball">
+    {% assign alt = image.alt %}
+    <img class="image" src="{{ url }}", alt="{{ alt }}">
 	  <br>
 	{% endfor %}
     {% endfor %}