search

st4ple / solid-jekyll

A Jekyll port of the Solid theme (by blacktie.co).
http://st4ple.github.io/solid-jekyll/
338 stars 449 forks source link

Add screen-reader alternative text for FontAwesome icons #27

Closed spikeheap closed 7 years ago

spikeheap commented 8 years ago

FontAwesome icons aren't very friendly for screen-readers, because they don't understand how to describe them. In the footer, where FontAwesome icons are used as links with no alternative text, there is no indication to a screen-reader user what the link contains.

This PR hides the FontAwesome icons from screen-readers using aria-hidden="true" and adds a screen-reader only description using the Bootstrap sr-only class.

I've taken a stab at descriptions for the icons used on the homepage, and generated the alternative text for the footer links automatically using the social-media name.

Tested using VoiceOver for OSX, the rest of the theme seems to work well.

spikeheap commented 8 years ago

I'd love to see this merged to increase the accessibility of the theme. Is there anything blocking this being merged? Happy to consider any changes if that would help.

spikeheap commented 8 years ago

Hey @st4ple, do you have any feedback on this PR? It's an unobtrusive change that increases accessibility of your template, so more people can enjoy it.