Accessibility Issue

Hi,

From what I can see those issues may be referred as false positives, basically.

The Error #1 does not need an alternative text. The SVG icon of social network is a decorative image only and the actual link text is accessibly hidden before the icon. You can check this personally viewing the source code of your website.

The Error #2 seems to be problem of the theme displaying social icons menu twice: in header and footer. Both of these menus have the same accessibility label of “Social Menu” as they are identical. I don’t think there is need to fix this, but if you feel like you need to do so, you can hide one of those social links menu using custom CSS such as:

.site-footer .social-links {
	display: none;
}

Please note that I provide official theme support via https://support.webmandesign.eu/

For website accessibility testing please read a knowledge base article at https://support.webmandesign.eu/accessibility/

Best regards,

Oliver

Thanks Oliver for the Quick response.

1. Can you please provide the code for removing these SVG icons from the websites. So that we don’t need to add alt tag and I can improve the score since we need 91%

2. Please let me know, how can I add different social link label in the footer and please let me know the path

Thanks in advance.

Hi,

1. Please note that icons are shown in social links menu. Without icons there is nothing to show there basically… Also, actually when I look at it now, I think the https://webaccessibility.com/ tool evaluates those wrongly. This is an example of the code the theme uses to display the icon in social menu:

   <li data-id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46">
   	<a href="https://www.facebook.com/webmandesigneu/">
   		<span class="screen-reader-text">WebMan Design on Facebook</span>
   		<svg class="svgicon social-icon-facebook" aria-hidden="true" role="img">
   			<use href="#social-icon-facebook" xlink:href="#social-icon-facebook"></use>
   		</svg>
   	</a>
   </li>

   As you can see, that is only a reference of the icon to display and it is accessibly hidden using aria-hidden="true", so assistive technology actually don’t read/”see” that icon. Yet, the https://webaccessibility.com/ evaluation tool complains about the referred icon code, which it shouldn’t even take care of… I suggest contacting https://webaccessibility.com/ for more details about this issue as I’m not sure there is a way to fix it from my point of view – the icon is accessibly hidden in the theme.

2. This would be a bit complicated fix, but feel free to adapt the code of templates/parts/menu/menu-social.php file via your child theme. Like I’ve mentioned, this is not an accessibility error. Other accessibility evaluation tools don’t report it either (a WAVE test, for example).

I strongly suggest reading the knowledge base article I’ve provided link to in my previous reply. The automated evaluation tools are not 100% correct all the time and human testing is required. After all, you’re building a website for humans, not automated robots ??

Thank you for understanding.

Best regards,

Oliver

Thanks, Oliver!! I understood I will update to client as well. We are aware of these scores since we created this website for disable peoples also. ?? Hope you understand

Hi,

Sure, I understand. In that case, if I may suggest, try to ask people who will use the website to assist you with testing maybe? They will provide better feedback whether those are real errors or not.

Best regards,

Oliver

Hi Oliver, Can you please tell me how can I remove these SVG icons from our website.

I have removed the Social menu from the dashboard-> menu section also removes all the code that exists in templates/parts/menu/menu-social.php.

But when I check with page source these SVG files are also there.

and still, the accessibility tool is showing
Error .Provide alternative text for images:
Error details:<svg style=”position: absolute; width: 0; height: 0; overflow: hidden;” version=”1.1″ xmlns=”https://www.w3.org/2000/svg” xmlns:xlink=”https://www.w3.org/1999/xlink”>
<defs>
<symbol id=”icon-behance” viewBox=”0 0 37 32″>
<path class=”path1″ d=”M33 6.054h-9.125v2.214 […]”></path>

</symbol>

we don’t need social media on our website, so please tell how can we disable these SVG icons. Please reply as soon as possible.

Hi,

The SVG icons file will be removed from code once you remove (set empty) the Social Links menu location. (Most likely you’ve just removed the links from your social links menu, but please note that you need to remove the menu from the actual menu locations in Appearance → Menus → Manage Locations.)

Best regards,

Oliver