Fix accessibility issues on About Us speaker links and YouTube embed (#120)

- Remove invalid `alt` attribute from `<a>` elements in the Past
  Speakers list on the About Us page. The `alt` attribute is not
  valid on `<a>` elements (it only applies to `<img>`, `<area>`,
  and `<input type="image">`). The link's accessible name is
  already provided by the heading text it contains. Fixes #92.

- Make `embed_youtube.html` accept a `title` parameter and use it
  as the iframe `title`, falling back to "Embedded YouTube video"
  if none is provided. The meetup layout now passes the meetup
  topic, so screen-reader users hear a descriptive frame title
  instead of the generic "YouTube video". Aligns with WCAG 2.4.1
  (Bypass Blocks) and 4.1.2 (Name, Role, Value). Fixes #91.

Author: 30Sana

_includes/embed_youtube.html

@@ -1,18 +1,22 @@
 {%- comment -%}
 Usage:
-  {% include embed_youtube.html youtubeID="Yw6u6YkTgQ4" %}
-Replace "dQw4w9WgXcQ" with the ID of the YouTube video you want to embed.
+  {% include embed_youtube.html youtubeID="Yw6u6YkTgQ4" title="Descriptive title of the video" %}
+Replace "Yw6u6YkTgQ4" with the ID of the YouTube video you want to embed.
+The `title` parameter is required for accessibility (WCAG 2.4.1, 4.1.2) and
+should describe the specific video being embedded.
 This embed uses the privacy-enhanced "youtube-nocookie.com" URL.
 {%- endcomment -%}
 
+{%- assign embed_title = include.title | default: "Embedded YouTube video" -%}
+
 <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
-  <iframe 
+  <iframe
     src="https://www.youtube-nocookie.com/embed/{{ include.youtubeID }}?modestbranding=1&color=white&iv_load_policy=3"
     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
     allowfullscreen
-    title="YouTube video"
+    title="{{ embed_title | escape }}"
     loading="lazy"
     referrerpolicy="strict-origin-when-cross-origin">
   </iframe>

_layouts/meetup.html

@@ -66,7 +66,7 @@ <h1>{{ page.topic }}</h1>
         {% if page.youtubeID %}
           <section>
             <h2>Recording</h2>
-            {% include embed_youtube.html youtubeID=page.youtubeID %}
+            {% include embed_youtube.html youtubeID=page.youtubeID title=page.topic %}
           </section>
         {% endif %}
 

_pages/about-us.md

@@ -40,7 +40,7 @@ redirect_from: /get-in-touch/
 {% for speaker in featured_speakers limit:9 %}
 
 <hgroup>
-<a href="{{speaker.url}}" alt="{{speark.title}}"><h4>{{ speaker.title }}</h4></a>
+<a href="{{speaker.url}}"><h4>{{ speaker.title }}</h4></a>
 <p>
 {% if speaker.organization %}
 {% assign organization_list = "" | split: "" %}