fix: use label instead of headings for screen reader only titles

Closes #594
swiss · Dec 11, 2017 · 13ba06b · 13ba06b
1 parent ad79a33
commit 13ba06b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/materials/02-navigation/04-footer/02-social-media.html b/src/materials/02-navigation/04-footer/02-social-media.html
@@ -10,8 +10,8 @@
   <div class="container-fluid">
     <h3>Informiert bleiben</h3>
     <nav class="links-social">
-      <h4 id="social_media" class="sr-only">Social media</h4>
-      <ul aria-labelledby="social_media">
+      <label class="sr-only">Social media</label>
+      <ul>
         <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>

diff --git a/src/materials/03-content/04-functions/02-social-sharing.html b/src/materials/03-content/04-functions/02-social-sharing.html
@@ -6,7 +6,7 @@
 ---
 
 <div class="social-sharing">
-  <h3 class="sr-only">Social media sharing</h3>
+  <label class="sr-only">Social media sharing</label>
   <a href="#" aria-label="Facebook" class="social-sharing-facebook"></a>
   <a href="#" aria-label="Twitter" class="social-sharing-twitter"></a>
   <a href="#" aria-label="Google+" class="social-sharing-google"></a>