Social Network Links on Footer not Accesible

Support
#1

Hello,

According to my Chief Accessibility Officer the social media icons, that appear in the footer are not structured as a list and they should be for People that use screen readers.

Is there a way to format them as a list?

Thanks in advance for your help.

#2

Hello @RuhGlobalCommunicati,

Thanks for asking. :slight_smile:

Can you please elaborate yourself with regards to social icons not being accessible?

Thanks.

#3

Yes, of course, it seems that the Icons that can be added through the social option in X are not structured as a list <l>they should look something like this:

<ul>
<li><a href="…">Home</a></li>
<li><a href="…">Shop</a></li>
<li><a href="…">Space Bears</a></li>
<li><a href="…">Mars Cars</a></li>
<li><a href="…">Contact</a></li>

It is an isuue of accesibility for People with dissabilities not that they are not working as they should.

Thanks for your help.

#4

Hi There,

Yes, it is true that the social media icons on footer are not structured as an unordered list <ul>, but we did place a title attribute on those links ensuring that it still conforms to the latest accessibility standards.

<a href="#holder" class="facebook" title="Facebook" target="_blank">

Though, if you really need to structure these icons as inline, then you can place the HTML markup below on the Footer Content (Theme Options > Footer) or on a Text Widget (Appearance > Widgets) on your top Footer.

Keep in mind that this fall outside of the scope of support that we can offer as this is considered a customization. Please understand that it would ultimately be your responsibility to take it from here.


	<ul class="x-social-global">
		<li><a href="#holder" class="facebook" title="Facebook" target="_blank" style="outline: none;"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a></li>
		<li><a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a></li>
		<li><a href="#holder" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a></li>
		<li><a href="#holder" class="yelp" title="Yelp" target="_blank"><i class="x-icon-yelp" data-x-icon="" aria-hidden="true"></i></a></li>
	</ul>

Just add an <li> line for each social media icon (link) you have. Then add the bit of custom CSS below on Theme Options > CSS to inline these icons.


ul.x-social-global li {
	display: inline-block;
	margin: 0 1.25%;
}

Thanks,

#5

That worked. Thanks.

#6

You’re welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.