Compliance issues with Pro for Disabled Users

I am trying to bring a website using PRO into compliance with some disability guidlines for webpage readers. One of the problems is that the tools in PRO are blocking the ALT tags.
For example the promo tool is not showing the ALT tags and therefore failing the compliance analysis.

Please advise and help Ralph

Hey Ralph,

Please provide screenshots of the elements that are blocking alt tags and we’ll investgate them.

Thanks.

Is there a way to change the header tag size of the prompt?

Hello Ralph,

Please provide a URL or a screenshot so that we will have an idea of which element you are referring to.

Thanks.

I a trying to make the website ADA and AIM compiant but the PRO theme is not allowing me to adjust items. For example on the home page https://www.gomotorcycle.net the navigation bar says hid from AIM so the screenreaders cannot read it. But there is no way to change that setting. Also the social media in the top header needs to not be a “blank” setting but there is no way to adjust that either. Please help I need to adjust this or change completely the theme

sorry the site is gomotorcycling.net

Hey @Ralphmyes,

You’re using the default Pro header and it’s true that you cannot edit it much. But, because you’re using Pro, you also have the option to use or build a custom header. You can learn how to do that from our documentation here https://theme.co/docs/header-builder

If you build a custom header, you can add the Social element to your header and have the links open “blank” or new tab.

image

Unlike the menu in the default header, the Navigation Inline should pass ADA and AIM because you can navigate each menu using the Tab key on your keyboard.

1 Like

ok that was very helpful and I am checking with Ada compliance to see if it passes. However I ran into another problem with another site. www.blackleafconstruction.com

Looks like the slider license lapsed and now doesn’t show up. I renewed the license but there is no way to add the short code. On the elements there is no rev slider option.

Please help

Hello @Ralphmyes,

You can use the Raw Element, where you can insert the Rev Slider shortcode. If this is not helping, we would be happy to double-check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

Thank-you for the reply. I couldn’t get it to work properly. Curiously the banner that is there with solid blue background seems to have automatically replaced the Rev Slider Banner I created and that has been there for years. Do you know why this would happen. Thanks for taking a look and please let me know when you get the Rev Slider Banner to show on the home page. BEst. Ralph

Also going back to the header builder and complaince issue for ADA. I built the new header but it is showing the following error messages. Do you understand what I would do to Fix these?:

  1. THE SOCIAL MEDIA ICON in the header eg facebook
    This element uses aria-hidden="true" , which hides it from screen readers.

How to fix it:

Check whether the element should truly be hidden from screen reader users. If it contains important content or functionality, remove aria-hidden="true" . If it’s decorative or redundant, leave the element alone and dismiss this warning using the “Ignore” feature in Accessibility Checker.

2, says the same facebook social icon is an empty link
This is an empty link that does not contain any meaningful content for assistive technologies.

How to fix it:

Add descriptive text inside the <a> element. If the link uses only an icon (e.g., SVG or webfont), hide the icon with aria-hidden="true" and add a descriptive aria-label to the link or include screen reader-only text to explain where the link goes.

Hey @Ralphmyes,

Please check out this documentation: https://theme.co/docs/page-settings#slider-settings
There should be a page setting that allows you to easily insert a Rev Slider above or below the masthead of the page.

Meanwhile, this is the structure of the social icons:

<div class="x-social-global">
  <a href="https://www.facebook.com/Blackleaf-Construction-771801649658562/" class="facebook" title="Facebook" target="_blank" rel="">
    <i class="x-framework-icon x-icon-facebook-square" data-x-icon-b="" aria-hidden="true"></i>
    <span class="visually-hidden">Facebook</span>
  </a>

  <a href="https://www.linkedin.com/in/black-leaf-construction/" class="linkedin" title="LinkedIn" target="_blank" rel="">
    <i class="x-framework-icon x-icon-linkedin-square" data-x-icon-b="" aria-hidden="true"></i>
    <span class="visually-hidden">LinkedIn</span>
  </a>

  <a href="https://www.instagram.com/blackleafconstruction/" class="instagram" title="Instagram" target="_blank" rel="">
    <i class="x-framework-icon x-icon-instagram" data-x-icon-b="" aria-hidden="true"></i>
    <span class="visually-hidden">Instagram</span>
  </a>

  <a href="https://www.pinterest.com/blackleafconstruction/pins/" class="pinterest" title="Pinterest" target="_blank" rel="">
    <i class="x-framework-icon x-icon-pinterest-square" data-x-icon-b="" aria-hidden="true"></i>
    <span class="visually-hidden">Pinterest</span>
  </a>
</div>

You may ignore the warnings in the Accesibility Checker.

Thanks.

ok I have figured out the Accesibility issues and ALL good. Thankyou

Also I have figured out the SLIDER Issue. ALL good thankyou

HOWEVER my final question is about www.gomotorcycling.net I have made a new compliant header in header builder but it will not show up as a hamburger menu on Mobile. It is showing correct in the header builder for mobile but does not translate to the actual mobile device.

I am using a child theme would this be causing an issue. The Menu breakpoints are set correctly bu the menu is showing vertically on mobile devices and the hamburger is empty

Please help

I found a configuration that seems to be showing correctly on the builder now for all types of devices. Is that what you see?

Hey @Ralphmyes,

This is what I am seeing on my phone:

It could be just a caching issue. Since you are using the WP Rocket plugin, make sure to clear all your plugin caches first before testing the site again.

Best Regards.

Thankyou for all your help and responses! have a great weekend

Glad to assist. Enjoy your weekend.