Add tooltips and accessible labels for all site icons (#902)

* Initial plan

* Add tooltip and accessible text to all icons

* Avoid duplicate screen reader labels on footer icons

* Hide decorative linked icons from screen readers

* Mark decorative 404 home icon as aria-hidden

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: Copilot

404.html

@@ -13,11 +13,10 @@ <h1>Oops! Page not found</h1>
                 </div>
                 <div class="error-actions" style="text-align: center;">
                     <p><img src="https://octodex.github.com/images/scubatocat.png" alt="Octocat" width="300" height="300"></p>
-                    <a href="/" class="btn btn-primary btn-lg"><span class="fa fa-home"></span>
+                    <a href="/" class="btn btn-primary btn-lg"><span class="fa fa-home" aria-hidden="true" title="Home"></span>
                             Take Me Home </a>
                 </div>
             </div>
         </div>
     </div>
 </div>
-

_includes/footer.html

@@ -31,13 +31,13 @@
     </div>
     <div class="footer-social-icons">
       <a href="https://testingconferences.us11.list-manage.com/subscribe?u=2a811daec24cc97909dfdf01d&id=88f87313fc" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to Newsletter" title="Subscribe to Newsletter">
-        <i class="fa-solid fa-envelope fa-2x"></i>
+        <i class="fa-solid fa-envelope fa-2x" aria-hidden="true"></i>
       </a>
       <a href="https://github.com/TestingConferences/testingconferences.github.io" target="_blank" rel="noopener noreferrer" aria-label="GitHub" title="GitHub">
-        <i class="fa-brands fa-github fa-2x"></i>
+        <i class="fa-brands fa-github fa-2x" aria-hidden="true"></i>
       </a>
       <a href="https://x.com/testconferences" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)" title="X (Twitter)">
-        <i class="fa-brands fa-x-twitter fa-2x"></i>
+        <i class="fa-brands fa-x-twitter fa-2x" aria-hidden="true"></i>
       </a>
     </div>
     <div name="copyright" class="footer-col-wrapper">

index.html

@@ -8,9 +8,9 @@
       <li>
         <h2><a href="{{current.url}}">{{ current.name }}</a></h2>
         <p>
-          <i class="fa fa-calendar"></i> {{ current.dates }} 
-          <i class="fa fa-map-marker"></i> {{ current.location }}
-          {% if current.status != nil %}<i class="fa fa-bell"></i> {{current.status}}{% endif %}
+          <i class="fa fa-calendar" role="img" aria-label="Dates" title="Dates"></i> {{ current.dates }} 
+          <i class="fa fa-map-marker" role="img" aria-label="Location" title="Location"></i> {{ current.location }}
+          {% if current.status != nil %}<i class="fa fa-bell" role="img" aria-label="Status" title="Status"></i> {{current.status}}{% endif %}
       </li>
     {% endfor %}
   </ul>

past.html

@@ -9,10 +9,10 @@
   <li>
     <h2><a href="{{past.url}}">{{ past.name }}</a></h2>
     <p>
-      <i class="fa fa-calendar"></i> {{ past.dates }} <i class="fa fa-map-marker"></i> {{ past.location }}
+      <i class="fa fa-calendar" role="img" aria-label="Dates" title="Dates"></i> {{ past.dates }} <i class="fa fa-map-marker" role="img" aria-label="Location" title="Location"></i> {{ past.location }}
       {% if past.twitter != nil %}<a href="https://www.twitter.com/{{past.twitter}}"><i
-          class="fa-brands fa-x-twitter"></i>{{past.twitter}}</a>{% endif %}
-      {% if past.video_url != nil %}<a href="{{ past.video_url }}"><i class="fa fa-video-camera"></i> Event
+          class="fa-brands fa-x-twitter" aria-hidden="true" title="X (Twitter)"></i>{{past.twitter}}</a>{% endif %}
+      {% if past.video_url != nil %}<a href="{{ past.video_url }}"><i class="fa fa-video-camera" aria-hidden="true" title="Event videos"></i> Event
         Videos</a>{% endif %}
   </li>
   {% endfor %}