fix(socialMedia): add a heading for screen reader

#594

src/locales/de/navigation.yml

@@ -282,8 +282,10 @@ footer:
     title: Social Media
     help: Die Social Media Kanäle (Facebook, Twitter, YouTube) der Website werden im Footer in einem eigenen Bereich positioniert.
     release: |
-      **2.1.0:**
+      **3.3.0:**
+      - added a heading for screen readers
 
+      **2.1.0:**
       - added the `.links-social` class to the `<nav/>` element containing the social links
   footbar:
     title: Fusszeile

src/locales/en/navigation.yml

@@ -269,8 +269,10 @@ footer:
     title: Social Media
     help: The website’s social media channels (e.g. Facebook, Twitter, YouTube, etc.) are listed in a separate section of the footer.
     release: |
-      **2.1.0:**
+      **3.3.0:**
+      - added a heading for screen readers
 
+      **2.1.0:**
       - added the `.links-social` class to the `<nav/>` element containing the social links
   footbar:
     title: Footbar

src/locales/fr/navigation.yml

@@ -278,8 +278,10 @@ footer:
     title: Médias sociaux
     help: Les canaux de médias sociaux (Facebook, Twitter, YouTube) du site Internet sont positionnés dans une zone séparée à l’intérieur du pied de page.
     release: |
-      **2.1.0:**
+      **3.3.0:**
+      - ajout d'un titre pour les lecteurs d'écran
 
+      **2.1.0:**
       - classe `.links-social` ajoutée à l’élément `<nav/>` contenant les liens sociaux
   footbar:
     title: Ligne de pied de page

src/materials/02-navigation/04-footer/02-social-media.html

@@ -10,7 +10,8 @@
   <div class="container-fluid">
     <h3>Informiert bleiben</h3>
     <nav class="links-social">
-      <ul>
+      <h4 id="social_media" class="sr-only">Social media</h4>
+      <ul aria-labelledby="social_media">
         <li><a class="icon icon--before icon--twitter" href="#">Twitter</a></li>
         <li><a class="icon icon--before icon--facebook" href="#">Facebook</a></li>
         <li><a class="icon icon--before icon--rss" href="#">RSS</a></li>