Skip to content

Commit b35cb64

Browse files
eugenius1daattali
eugenius1
authored and
daattali
committed
Icon replacement text for screen-reader/text-only browsing, fixes daattali#176 (daattali#189)
1 parent cbb4228 commit b35cb64

2 files changed

Lines changed: 46 additions & 26 deletions

File tree

‎_includes/footer.html‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,152 +6,167 @@
66
{% if site.author.facebook and site.footer-links-active.facebook %}
77
<li>
88
<a href="https://www.facebook.com/{{ site.author.facebook }}" title="Facebook">
9-
<span class="fa-stack fa-lg">
9+
<span class="fa-stack fa-lg" aria-hidden="true">
1010
<i class="fa fa-circle fa-stack-2x"></i>
1111
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
1212
</span>
13+
<span class="sr-only">Facebook</span>
1314
</a>
1415
</li>
1516
{% endif %}
1617
{% if site.author.github and site.footer-links-active.github %}
1718
<li>
1819
<a href="https://github.com/{{ site.author.github }}" title="GitHub">
19-
<span class="fa-stack fa-lg">
20+
<span class="fa-stack fa-lg" aria-hidden="true">
2021
<i class="fa fa-circle fa-stack-2x"></i>
2122
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
2223
</span>
24+
<span class="sr-only">GitHub</span>
2325
</a>
2426
</li>
2527
{% endif %}
2628
{% if site.author.twitter and site.footer-links-active.twitter %}
2729
<li>
2830
<a href="https://twitter.com/{{ site.author.twitter }}" title="Twitter">
29-
<span class="fa-stack fa-lg">
31+
<span class="fa-stack fa-lg" aria-hidden="true">
3032
<i class="fa fa-circle fa-stack-2x"></i>
3133
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
3234
</span>
35+
<span class="sr-only">Twitter</span>
3336
</a>
3437
</li>
3538
{% endif %}
3639
{% if site.author.reddit and site.footer-links-active.reddit %}
3740
<li>
3841
<a href="https://reddit.com/u/{{ site.author.reddit }}" title="Reddit">
39-
<span class="fa-stack fa-lg">
42+
<span class="fa-stack fa-lg" aria-hidden="true">
4043
<i class="fa fa-circle fa-stack-2x"></i>
4144
<i class="fa fa-reddit fa-stack-1x fa-inverse"></i>
4245
</span>
46+
<span class="sr-only">Reddit</span>
4347
</a>
4448
</li>
4549
{% endif %}
4650
{% if site.author.google-plus and site.footer-links-active.google-plus %}
4751
<li>
4852
<a href="https://plus.google.com/{{ site.author.google-plus }}" title="Google+">
49-
<span class="fa-stack fa-lg">
53+
<span class="fa-stack fa-lg" aria-hidden="true">
5054
<i class="fa fa-circle fa-stack-2x"></i>
5155
<i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
5256
</span>
57+
<span class="sr-only">Google+</span>
5358
</a>
5459
</li>
5560
{% endif %}
5661
{% if site.author.email and site.footer-links-active.email %}
5762
<li>
5863
<a href="mailto:{{ site.author.email }}" title="Email me">
59-
<span class="fa-stack fa-lg">
64+
<span class="fa-stack fa-lg" aria-hidden="true">
6065
<i class="fa fa-circle fa-stack-2x"></i>
6166
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
6267
</span>
68+
<span class="sr-only">Email me</span>
6369
</a>
6470
</li>
6571
{% endif %}
6672
{% if site.author.linkedin and site.footer-links-active.linkedin %}
6773
<li>
6874
<a href="https://linkedin.com/in/{{ site.author.linkedin }}" title="LinkedIn">
69-
<span class="fa-stack fa-lg">
75+
<span class="fa-stack fa-lg" aria-hidden="true">
7076
<i class="fa fa-circle fa-stack-2x"></i>
7177
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
7278
</span>
79+
<span class="sr-only">LinkedIn</span>
7380
</a>
7481
</li>
7582
{% endif %}
7683
{% if site.author.xing and site.footer-links-active.xing %}
7784
<li>
7885
<a href="https://www.xing.com/profile/{{ site.author.xing }}" title="Xing">
79-
<span class="fa-stack fa-lg">
86+
<span class="fa-stack fa-lg" aria-hidden="true">
8087
<i class="fa fa-circle fa-stack-2x"></i>
8188
<i class="fa fa-xing fa-stack-1x fa-inverse"></i>
8289
</span>
90+
<span class="sr-only">Xing</span>
8391
</a>
8492
</li>
8593
{% endif %}
8694
{% if site.author.stackoverflow and site.footer-links-active.stackoverflow %}
8795
<li>
8896
<a href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" title="StackOverflow">
89-
<span class="fa-stack fa-lg">
97+
<span class="fa-stack fa-lg" aria-hidden="true">
9098
<i class="fa fa-circle fa-stack-2x"></i>
9199
<i class="fa fa-stack-overflow fa-stack-1x fa-inverse"></i>
92100
</span>
101+
<span class="sr-only">StackOverflow</span>
93102
</a>
94103
</li>
95104
{% endif %}
96105
{% if site.author.snapchat and site.footer-links-active.snapchat %}
97106
<li>
98107
<a href="https://www.snapchat.com/add/{{ site.author.snapchat }}" title="Snapchat">
99-
<span class="fa-stack fa-lg">
108+
<span class="fa-stack fa-lg" aria-hidden="true">
100109
<i class="fa fa-circle fa-stack-2x"></i>
101110
<i class="fa fa-snapchat-ghost fa-stack-1x fa-inverse"></i>
102111
</span>
112+
<span class="sr-only">Snapchat</span>
103113
</a>
104114
</li>
105115
{% endif %}
106116
{% if site.author.instagram and site.footer-links-active.instagram %}
107117
<li>
108118
<a href="https://www.instagram.com/{{ site.author.instagram }}" title="Instagram">
109-
<span class="fa-stack fa-lg">
119+
<span class="fa-stack fa-lg" aria-hidden="true">
110120
<i class="fa fa-circle fa-stack-2x"></i>
111121
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
112122
</span>
123+
<span class="sr-only">Instagram</span>
113124
</a>
114125
</li>
115126
{% endif %}
116127
{% if site.author.youtube and site.footer-links-active.youtube %}
117128
<li>
118129
<a href="https://www.youtube.com/{{ site.author.youtube }}" title="YouTube">
119-
<span class="fa-stack fa-lg">
130+
<span class="fa-stack fa-lg" aria-hidden="true">
120131
<i class="fa fa-circle fa-stack-2x"></i>
121132
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
122133
</span>
134+
<span class="sr-only">YouTube</span>
123135
</a>
124136
</li>
125137
{% endif %}
126138
{% if site.author.spotify and site.footer-links-active.spotify %}
127139
<li>
128140
<a href="https://open.spotify.com/user/{{ site.author.spotify }}" title="Spotify">
129-
<span class="fa-stack fa-lg">
141+
<span class="fa-stack fa-lg" aria-hidden="true">
130142
<i class="fa fa-circle fa-stack-2x"></i>
131143
<i class="fa fa-spotify fa-stack-1x fa-inverse"></i>
132144
</span>
145+
<span class="sr-only">Spotify</span>
133146
</a>
134147
</li>
135148
{% endif %}
136149
{% if site.author.telephone and site.footer-links-active.telephone %}
137150
<li>
138151
<a href="tel:{{ site.author.telephone }}" title="Phone">
139-
<span class="fa-stack fa-lg">
152+
<span class="fa-stack fa-lg" aria-hidden="true">
140153
<i class="fa fa-circle fa-stack-2x"></i>
141154
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
142155
</span>
156+
<span class="sr-only">Phone</span>
143157
</a>
144158
</li>
145159
{% endif %}
146160
{% if site.footer-links-active.rss %}
147-
<li>
148-
<a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
149-
<span class="fa-stack fa-lg">
150-
<i class="fa fa-circle fa-stack-2x"></i>
151-
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
152-
</span>
153-
</a>
154-
</li>
161+
<li>
162+
<a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
163+
<span class="fa-stack fa-lg" aria-hidden="true">
164+
<i class="fa fa-circle fa-stack-2x"></i>
165+
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
166+
</span>
167+
<span class="sr-only">RSS</span>
168+
</a>
169+
</li>
155170
{% endif %}
156171
</ul>
157172
<p class="copyright text-muted">

‎_includes/social-share.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,41 @@
88

99
{% if any-share-links %}
1010
<section id = "social-share-section">
11+
<span class="sr-only">Share: </span>
1112

12-
<!--- Share on Twitter -->
1313
{% if site.share-links-active.twitter %}
14+
<!--- Share on Twitter -->
1415
<a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}+{{ site.url }}{{ page.url }}"
1516
class="btn btn-social-icon btn-twitter" title="Share on Twitter">
1617
<span class="fa fa-fw fa-twitter" aria-hidden="true"></span>
18+
<span class="sr-only">Twitter</span>
1719
</a>
1820
{% endif %}
1921

20-
<!--- Share on Facebook -->
2122
{% if site.share-links-active.facebook %}
23+
<!--- Share on Facebook -->
2224
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
2325
class="btn btn-social-icon btn-facebook" title="Share on Facebook">
2426
<span class="fa fa-fw fa-facebook" aria-hidden="true"></span>
27+
<span class="sr-only">Facebook</span>
2528
</a>
2629
{% endif %}
2730

28-
<!--- Share on Google Plus -->
2931
{% if site.share-links-active.google %}
32+
<!--- Share on Google Plus -->
3033
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}"
3134
class="btn btn-social-icon btn-google" title="Share on Google+">
3235
<span class="fa fa-fw fa-google-plus" aria-hidden="true"></span>
36+
<span class="sr-only">Google+</span>
3337
</a>
3438
{% endif %}
3539

36-
<!--- Share on LinkedIn -->
3740
{% if site.share-links-active.linkedin %}
41+
<!--- Share on LinkedIn -->
3842
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}"
3943
class="btn btn-social-icon btn-linkedin" title="Share on LinkedIn">
4044
<span class="fa fa-fw fa-linkedin" aria-hidden="true"></span>
45+
<span class="sr-only">LinkedIn</span>
4146
</a>
4247
{% endif %}
4348

0 commit comments

Comments
 (0)