What do you think about this forum navigation?

I have trying to do a mockup for a new forum (there are too few out there :slight_smile: and tried to find another way to navigate. Right now it is read only and a bit unstable, but I do appreciate opinions about the navigation especially. It is developed so you can navigate easy on a mobile.

http://94.237.92.101:3030

What do you think? Easy, dull or hard?

  • You have no keyboard focus indicators for your links so I have no idea where I am while tabbing through your menu.
  • Every link should have some sort of text/label. Right now your icon links do not have any and thus someone using a screen reader will have no idea what those links are for. In this case, because you are using the <img> tag you could use the alt attribute for the link text.
    https://www.sitepoint.com/15-rules-making-accessible-links/ (See rule 12)
1 Like

I went to your site on my iphone XR. The second column of the navigation, that shows text, doesn’t always get hidden once I have been linked to a page. For example:

Do you mean that the keyboard not work as expected or does not work at all? Mac or PC?

image

Agree.

As there are several options, you have to select one to make the submenu disappear.

I mean that as I am tabbing through the links in the menu with my keyboard there is no indicator of where the keyboard focus is because you have set the CSS outline property to ‘none’ for you links.

I was not aware of this. Outline is not possible on a Mac AFAIK. What settings do you recommend?

That would be news to me :slight_smile:

At the least you should remove outline: none from your CSS. Even better would be to add some styling on the :focus pseudo class for your links so that it is clear which link has keyboard focus.

Done. More suggestions?

http://94.237.92.101:3030/home

My suggestion would be to try to use your menu with the keyboard only. I think you will see that it is not clear where the keyboard focus is and thus you don’t know what you are clicking on.