Best styling codeblock

templates/macros.html

@@ -6,6 +6,7 @@
     <span class="icon is-large" title="Google Scholar">
 			<i class="ai ai-google-scholar ai-lg"></i>
     </span>
+    <span class="sr-only">Google scholar</span>
   </a>
   {% endif %}
 
@@ -14,6 +15,7 @@
     <span class="icon is-large" title="ORCiD">
       <i class="fab fa-orcid fa-lg"></i>
     </span>
+    <span class="sr-only">ORCiD</span>
   </a>
   {% endif %}
 
@@ -22,6 +24,7 @@
     <span class="icon is-large" title="Facebook">
       <i class="fab fa-facebook fa-lg"></i>
     </span>
+    <span class="sr-only">Facebook</span>
   </a>
   {% endif %}
 
@@ -30,6 +33,7 @@
     <span class="icon is-large" title="Twitter">
       <i class="fab fa-twitter fa-lg"></i>
     </span>
+    <span class="sr-only">Twitter</span>
   </a>
   {% endif %}
 
@@ -38,6 +42,7 @@
     <span class="icon is-large" title="LinkedIn">
       <i class="fab fa-linkedin fa-lg"></i>
     </span>
+    <span class="sr-only">LinkedIn</span>
   </a>
   {% endif %}
 
@@ -46,6 +51,7 @@
     <span class="icon is-large" title="GitHub">
       <i class="fab fa-github fa-lg"></i>
     </span>
+    <span class="sr-only">GitHub</span>
   </a>
   {% endif %}
 
@@ -54,6 +60,7 @@
     <span class="icon is-large" title="GitLab">
       <i class="fab fa-gitlab fa-lg"></i>
     </span>
+    <span class="sr-only">GitLab</span>
   </a>
   {% endif %}
 
@@ -62,6 +69,7 @@
     <span class="icon is-large" title="Stack Overflow">
       <i class="fab fa-stack-overflow fa-lg"></i>
     </span>
+    <span class="sr-only">Stack Overflow</span>
   </a>
   {% endif %}
 
@@ -70,6 +78,7 @@
     <span class="icon is-large" title="Keybase">
       <i class="fab fa-keybase fa-lg"></i>
     </span>
+    <span class="sr-only">Keybase</span>
   </a>
   {% endif %}
 
@@ -78,6 +87,7 @@
     <span class="icon is-large" title="Mastodon">
       <i class="fab fa-mastodon fa-lg"></i>
     </span>
+    <span class="sr-only">Mastodon</span>
   </a>
   {% endif %}
 
@@ -86,6 +96,7 @@
     <span class="icon is-large" title="Instagram">
       <i class="fab fa-instagram fa-lg"></i>
     </span>
+    <span class="sr-only">Instagram</span>
   </a>
   {% endif %}
 
@@ -94,6 +105,7 @@
     <span class="icon is-large" title="Behance">
       <i class="fab fa-behance fa-lg"></i>
     </span>
+    <span class="sr-only">Behance</span>
   </a>
   {% endif %}
 
@@ -102,6 +114,7 @@
     <span class="icon is-large" title="Email">
       <i class="far fa-envelope fa-lg"></i>
     </span>
+    <span class="sr-only">Email</span>
   </a>
   {% endif %}
 
@@ -110,6 +123,7 @@
     <span class="icon is-large" title="Medium">
       <i class="fab fa-medium fa-lg"></i>
     </span>
+    <span class="sr-only">Medium</span>
   </a>
   {% endif %}
 
@@ -118,6 +132,7 @@
     <span class="icon is-large" title="Google play">
       <i class="fab fa-google-play fa-lg"></i>
     </span>
+    <span class="sr-only">Google play</span>
   </a>
   {% endif %}
 
@@ -126,6 +141,7 @@
     <span class="icon is-large" title="RSS Feed">
       <i class="fas fa-rss fa-lg"></i>
     </span>
+    <span class="sr-only">RSS Feed</span>
   </a>
   {% endif %}
 </p>