Theme update: improved accessibility

Hi Guido,
I am experiencing, only on the iPad, a problem with submenu’s. After selecting a mainmenu item the submenu is shown. However after a second it disappears again, so not able to select a submenu item.

Is this a result of your update and what must be done, I use a child theme.
Hans van der Brugh

Hi Hans,

Over here the submenu works fine on iPad. Check this temp link, the menu also contains several subpages. Please let me know if that one works as expected or not.

Guido

In another topic I’ve found the URL of your website. I notice you still have the old version of the header file.

As mentioned in the main topic above, there are 2 changes in file header. Link to this file can be found here.

I have added a skip-to-content link: line 22-39.
The (opening and closing) div of the mobile menu bar is changed into a button: line 57.

Guido

Hi Guido,

I checked the menu “Example page” of yours Guido’s “test” Website.
The problem I mentioned (The submenu list disappears without a click of a submenu item) is also there. A remark: The longer the submenu list, the shorter the display time.

Hans

Hi Guido, have a problem with your onecoloumn theme, has been running well fora coupe of years when a few months ago i updated woocommerce and it caused site to crash big time, the only way i could reinstate site was from an previous day back up, having since turned off all other plugins and trying to update woocommerce again, it still crashed, so im thinking there could be something wrong with the theme ? what you think ?

@brughjhamvd – I’m using an iPad 2017 and the menu at both my test site and your site works as it should be. Sub menu doesn’t fade away after a certain amount of time. So are you able to check the site at another iPad?

@velolocation – can you open a topic at the OneColumn forum please? I will try to help you there. In the mean time I will do some testing with WC plugin.

To narrow down my iPad problem I tried my website on different iPad models.
On a iPad with iOS 14.3 the submenus work fine.
On a iPad with iOS 9.3.5 the submenu doesn’t show at all.
On a iPad with iOS 12.5 the submenu is shown but disappears within a second AND in addition it generates a click on the mainmenu item (showing the content page of the submenu group).

Hi,

I have no idea why it’s not working over there. This theme has been around for quite a while and has always worked fine on iPad. Just checked the test site in another one, with iOS 14.3 running and just works fine as well. Will look for more iPads with older iOS on them.

Guido

Guido,
I have installed a brand new WP version and tested the submenu problem with some WP themes and the result on the older iPad’s IOS is the same as mentioned before. So I now suspect that it is related to the newer versions of WP.
Hans

Hi Hans,

Thanks for the update.
I’ve Googled it and came across many issues with submenu in older versions of iOS. But until now I did not find a proper fix or explanation why this was happening.
How long are you using my theme? Did the menu work properly before, in older iOS?

Guido

Hi Guido,

I am using your GridBulletin theme since 2017 without any problems with the older iOS versions. Using the (old)IE on Windows7 also doesn’t show the submenus.

Hans

Hi Hans,

I have IE 11 myself (but I never use it) and do notice now that the submenu isn’t working there. Will take a look at this issue and keep you informed.

I did remove support for IE 8 and older some time ago. But I want my themes to support IE 11 at least.

Guido

Hi again @brughjhamvd / Hans,

It’s caused by something I’ve added to support tab navigation, the :focus selector. This isn’t supported in IE11.

If you add this at the Additional CSS page of the Customizer in your dashboard, submenu will work again in IE11. And maybe in other older browsers as well:

.nav-head ul li:hover > ul {height:auto; overflow:visible; opacity:1;}
.nav-head ul li:focus-within > ul {height:auto; overflow:visible; opacity:1;}

You will notice the :focus selector in code above, but that’s for supporting tab navigation in other (recent) browsers.

Still have to look for a fix to support tab navigation for submenu in IE11.

I will update my themes later.

Please let me know if it works over there..

Guido

Hi Guido,

I added your code in the extra CSS page of the Customizer. With IE11 the submenu’s are shown correctly this time. However still not in the Safari browser of the older iPad iOS versions.
Thanks,
Hans

Hi Hans,

I did a test with an iPad that has iOS 10 on it and it works fine. I do want to make my themes support older OS versions, but if they don’t support newer CSS I will not try to find an alternative solution. Takes too much time and market share of these old OSs is almost nothing.

But of course I will add the fix for IE 11 in next update.

Guido