Theme update: improved accessibility

Theme Author Guido
(@guido07111975)

5 years, 7 months ago

Hi,

About the recent GridBulletin theme update:

Main reason for last update is to improve accessibility and better support for screen readers.

Because of this I had to change the CSS of main navigation. Mainly the CSS of submenu and mobile menu.

Those changes might have broken some of your CSS customizations, I’m sorry for that. If you want help to fix it again please open a topic in support forum.

For users with a child theme, I have updated file header. Added a skip-to-content link and changed the div with class “mobile-nav-toggle” into a button.

Guido

Viewing 15 replies - 16 through 30 (of 30 total)

← 1 2

brughjhamvd
(@brughjhamvd)

5 years, 5 months ago

Hi guido,

I tested the submenu of my website (https://www.etnos.nl/geschiedenis-tno/) with safari on a iPad with iOS 9.3.5 and that worked fine now.
On my iPad with iOS 12.5.1 however I tested this submenu with Safari/FireFox/Chrome and the submenu items disappeared so quickly that I am not able to select a submenu-item.
I understand your considerations, thanks.
Hans

Theme Author Guido
(@guido07111975)

5 years, 5 months ago

Hi Hans,

I’ve thought about this some more.. Maybe this is caused because when clicking the parent menu-link (to open submenu), is also loads that parent page. So it does 2 things when clicking for submenu: it loads the parent page and it briefly shows the submenu. Can you confirm this?

Guido

brughjhamvd
(@brughjhamvd)

5 years, 5 months ago

Hi Guido,
I confirm that that exactly is the case.
At https://www.etnos.nl/ipadair-submenu-geschiedenis/ I have a short video to demonstrate this.

Hans

Theme Author Guido
(@guido07111975)

5 years, 5 months ago

Hi Hans,

Fortunately we now know what the problem is. This helps me to look for a possible solution (if there’s an easy one).

I found this article, that describes the problem.

The link you’ve added links to a Nothing Found page, but is not needed anymore.

Guido

PS – Can I reach you via your website, in case I have some testing to do in older iOS version?

Theme Author Guido
(@guido07111975)

5 years, 4 months ago

Hi again,

Can you please check submenu again in old iOS? Have added a fix but don’t know if this works. You might have to clear browser cache first.

Guido

brughjhamvd
(@brughjhamvd)

5 years, 4 months ago

Hi Guido,

Thanks for all your research.
The article you provided me makes it very clear. Still i am wondering why it is depending on an iOS version.

I have checked the menu’s on your testing site and guess, it works as expected! You did it!

The link i provided (https://www.etnos.nl/ipadair-submenu-geschiedenis)
should work now.

Yes, You can reach me at [email protected]

Thanks,
Hans

Theme Author Guido
(@guido07111975)

5 years, 4 months ago

Hi,

As discussed via email I will update my themes with several fixes. Will do this within several weeks.

Guido

Theme Author Guido
(@guido07111975)

5 years, 4 months ago

Hi,

Another theme update today, with mostly accessibility fixes:

– Fix: submenu in IE11
– Fix: submenu in older iOS version
– Fix: image caption
– Updated support for screen readers

Enjoy!

Guido

brughjhamvd
(@brughjhamvd)

4 years, 11 months ago

Hi Guido,

I have noticed that the menu of the GridBulletin theme on a mobile phone is not expanded anymore, so you cannot select any menu-item.
When you click on the ‘Menu+’ nothing happens besides the color changes.

Hans
Theme Author Guido
(@guido07111975)

4 years, 11 months ago
Hi Hans,

Yes, I have removed the jQuery dependency from my themes and in order to do that I had to make few minor changes in file header (again). Sorry for that.

You can update file header of your child theme very easily..

Look for:
```
class="mobile-nav-toggle"
```
Change into:
```
id="mobile-nav-toggle" class="mobile-nav-toggle"
```
Look for:
```
class="mobile-nav"
```
Change into:
```
id="mobile-nav" class="mobile-nav"
```
So I have added ID tags to those 2 elements.

Guido
brughjhamvd
(@brughjhamvd)

4 years, 11 months ago

Hi Guido,
Thanks for your reply. I made the changes you proposed. It seems to work on my laptop when I mimic a mobile-phone, however on my mobile phone there are some quirks: Selecting the ‘Menu+’ form the homepage it doesn’t work, however when I select a random post the Menu+ is dropping down its submenus, thats ok. When I select the Home menu-item its submenu’s are not shown again.
Please some advise for this quirk behavior.
Hans

brughjhamvd
(@brughjhamvd)

4 years, 11 months ago

In addition to my last post I just experienced that the problem is with the FireFox browser on my mobile phone. With the Samsung Browser Menu+ selection works fine.
Hans

Theme Author Guido
(@guido07111975)

4 years, 11 months ago

Hi Hans,

I have an iPhone with default browser (Safari) and mobile menu looks just fine. Maybe a cache thing of Firefox?

I do notice the search form in (mobile) menu has an empty submit button?

Guido

brughjhamvd
(@brughjhamvd)

4 years, 11 months ago

Hi Guido,
Thanks for your suggestion: The FireFox caching on my mobile was the root of all evil.

The missing submit button: I removed/hide this because of lack of space on the main menu as I wanted one row of man-menu-items. Will consider an alternative in the future.

Thanks again,
Hans

Theme Author Guido
(@guido07111975)

4 years, 11 months ago

Hi Hans,

Don’t know how you’ve added that search bar there but if you need help with that, you can send me an email.

Guido

Viewing 15 replies - 16 through 30 (of 30 total)

← 1 2

The topic ‘Theme update: improved accessibility’ is closed to new replies.