Support » Theme: Reykjavik » Accessibility Issue

  • Resolved sherinhashtag

    (@sherinhashtag)


    Hi Support,

    We are using “reykjavik” theme and when we run our latest website “https://crimsonla.com/” in https://webaccessibility.com/” it showing 2 errors

    Taht is.

    Error 1.Provide alternative text for images:
    Error details:<svg style=”position: absolute; width: 0; height: 0; overflow: hidden;” version=”1.1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink”&gt;
    <defs>
    <symbol id=”icon-behance” viewBox=”0 0 37 32″>
    <path class=”path1″ d=”M33 6.054h-9.125v2.214 […]”></path>
    </symbol>

    Error 2: Ensure ARIA regions, landmarks and HTML sections are identifiable
    Error deatails:<nav class=”social-links” aria-label=”Social Menu”><ul data-id=”menu-social-links-menu” class=”social-links-items”><li data-id=”menu-item-22″ class=”menu-item menu-item-type-custom menu-item- etc
    <nav class=”social-links” aria-label=”Social Menu”><ul data-id=”menu-social-links-menu” class=”social-links-items”><li data-id=”menu-item-22″ class=”menu-item menu-item-type-custom menu-ite etc

    because of these two issues, our web accessibility score is reduced from 91% to 83%.

    Please check the issue and please let us know the solution as soon as possible

    and please find the issue by searching “https://crimsonla.com/&#8221; in https://webaccessibility.com/

    Thanks

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    sherinhashtag

    (@sherinhashtag)

    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.

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    sherinhashtag

    (@sherinhashtag)

    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

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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=”http://www.w3.org/2000/svg” xmlns:xlink=”http://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.

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.