I am a beginner with Grav and now i am testing the Quark theme for blind visitors. Unfortunately it is not accessible as it is not possible to navigate in the main menu to reach any submenu with the tab key. I have tried to implement the method described on this site:
I’m not very familiar with the Quark theme and I just very quickly skimmed the article you linked to. But I’ve just recently implemented a dropdown menu for my own theme and since nobody else got around to answer your question …
If I understand you correctly, you’re trying to turn Quark’s menu into a CSS based dropdown by adding CSS. To be honest, I don’t know if that is possible (i.e. if the HTML structure produced by Quark’s template is suitable.) But even if it is: Writing and testing CSS of any more than trivial complexity is somewhat hairy. I would rather start from scratch and develop template and CSS (SCSS, rather) together from scratch.
Implementing a real world dropdown is more involved than these kind of explanatory articles let on. (They’re great for explaining the logic, though.) For starters, a real world menu would have to function as an accordion menu on mobile devices at the same time.
I’d recommend you write a feature request to the Quark developers on Github and ask for implementing accessibility. I’m sure they’d welcome this, especially if you are knowledgeable and willing to test.
Hi @Utis…
Thank you for engaging in this matter. I like the structure and design of Quark and don’t want to give up on this yet. When I use Quark and turn off the css-templates in my browser, the dropdown-menus work as I want. That is, the visitor can navigate with the tab key even in submenus. This means that it may be worthwhile to continue researching the (S)CSS structure. I will also make the request on Github that you suggest.
A blind user running a screen reader on a mobile device avoids the problem of mouse-controlled menus because pointers and navigation are not separate.
If possible, I would like to test what you have achieved in your own theme.
I think it would be best if this could be incorporated into Quark, since more people could benefit from it, then.
However, I’m writing the following in case you want to give it a more serious try on your own: You might want to look into theme inheritance in the Grav documentation.
This page also mentions how to deal with Sass/SCSS in theme inheritance. The wellington compiler mentioned in the section above should also work. (Personally, I use the more arcane setup of sassc with a Makefile.)
If I see this correctly, if you follow these instructions, you should be fine by copying the files quark/scss/theme.scss and quark/scss/theme/_menu.scss into the folder of your derived theme. Then edit <your-theme>/scss/theme/_menu.scss and compile <your-theme>/scss/theme.scss (which imports _menu.scss) into <your-theme>/css-compiled/theme.css
I don’t have time right now to actually go into this myself; though if you really want to tackle this, I might give advice down the line. Though, again, incorporating this into Quark would probably be best.
Thank you for that offer! My theme isn’t released yet and won’t be for a while. I also noticed already after reading your post that tabbing doesn’t work. When I get around to fix that in a couple of days, I would write you a PM, if that is alright.
Hi @Utis…
Yes, it’s alright. to continue exchanging ideas with me. The request is now placed at Github > grav-theme-quark. I have too little knowledge to build my own theme, and will be using existing tools and themes as a foundation to build on.
On my to-do list is now:
Keep experimenting with Quark and the menu structure.
Try other Grav themes.
Testing other lightweight cms for replacing Wordpress. (Grav, Pico, Razor, October …?)
Found a custom solution myself, with a custom (child)theme css:
.dropmenu ul li:focus-within > ul
{
visibility: visible;
opacity: 1;
display: block;
}
Not quite beautiful, but works with well-known screen readers and browsers. MS Edge does not currently have this css feature. No major grief as blind users often avoid Edge.
As suggested by @Utis, I posted a request for a more professional solution on github:
When I get around to fix that in a couple of days, I would write you a PM, if that is alright.