Docs

[surferjohn]

Good afternoon,
Due to the government of Ontario’s Accessibility guidelines for 2017 sites have to reach a level of AODA compliance. I am working through some errors within our website using X Theme, but I have a question about the social media links.

Our site, nkmi.hubsitelaunch.com is getting the error ‘Empty link – a link contains no text’ over every social media icon on the website. Do you know of a CSS code that could add link text to the icons?

To see the error we’re receiving, you can scan the website nkmi.hubsitelaunch.com using http://wave.webaim.org/

Any help would be appreciated.

[Jade]

Hi there,

Please try to add this in the Custom CSS:

a.facebook:after {
    content: "Facebook";
    font-size: 14px;
}

a.twitter:after {
    content: "Twitter";
    font-size: 14px;
}

a.google-plus:after {
    content: "Google Plus";
    font-size: 14px;
}

a.youtube:after {
    content: "Youtube";
    font-size: 14px;
}

Those code will add some text right below the social icons.

[surferjohn]

Thank-you for getting back to me. Very much appreciated.
Maybe I am not explaining the error I am receiving correctly. I am receiving 8 empty link errors on the top and bottom social media icons. Do you have a custom CSS to provide text within the link that describes the functionality and/or target of that link?

Thank-you!

[Christian]

Hey John,

This could not be fixed with CSS since it requires a text or image inside the anchor tag. Please try adding the code below in your functions.php and check if the error persists.

function x_social_global() {
$facebook    = x_get_option( 'x_social_facebook' );
$twitter     = x_get_option( 'x_social_twitter' );
$google_plus = x_get_option( 'x_social_googleplus' );
$linkedin    = x_get_option( 'x_social_linkedin' );
$xing        = x_get_option( 'x_social_xing' );
$foursquare  = x_get_option( 'x_social_foursquare' );
$youtube     = x_get_option( 'x_social_youtube' );
$vimeo       = x_get_option( 'x_social_vimeo' );
$instagram   = x_get_option( 'x_social_instagram' );
$pinterest   = x_get_option( 'x_social_pinterest' );
$dribbble    = x_get_option( 'x_social_dribbble' );
$flickr      = x_get_option( 'x_social_flickr' );
$github      = x_get_option( 'x_social_github' );
$behance     = x_get_option( 'x_social_behance' );
$tumblr      = x_get_option( 'x_social_tumblr' );
$whatsapp    = x_get_option( 'x_social_whatsapp' );
$soundcloud  = x_get_option( 'x_social_soundcloud' );
$rss         = x_get_option( 'x_social_rss' );
$output = '<div class="x-social-global">';
if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">facebook</a></a>'; endif;
if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">twitter</span></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">google</span></a>'; endif;
if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">linkedin</span></a>'; endif;
if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">xing</span></a>'; endif;
if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i><span style="display:none">foursquare</span></a>'; endif;
if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">youtube</span></a>'; endif;
if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">vimeo</span></a>'; endif;
if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i><span style="display:none">instagram</span></a>'; endif;
if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">pinterest</span></a>'; endif;
if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i><span style="display:none">dribbble</span></a>'; endif;
if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i><span style="display:none">flickr</span></a>'; endif;
if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">github</span></a>'; endif;
if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">behance</span></a>'; endif;
if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">tumblr</span></a>'; endif;
if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i><span style="display:none">tumblr</span></a>'; endif;
if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i><span style="display:none">soundcloud</span></a>'; endif;
if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i><span style="display:none">rss</span></a>'; endif;
$output .= '</div>';
echo $output;
}

Thanks.

[surferjohn]

Worked perfectly. Thank-you!!

[Joao]

Great to hear it 🙂

Let us know if you need help with anything else.

Joao

[Author]

Posts