Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

[SOLVED] Accessibility for blind visitors

Solved by Thomas Sandström View solution

Started by Thomas Sandström 7 years ago · 6 replies · 918 views

7 years ago

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:

Solved with CSS! Dropdown Menus

Seemed nice since it's without js. In a custom.css I have tested:

TXT

.dropmenu ul li a:hover, ul li a:focus-within > ul . . .

.dropmenu.animated ul li a:hover > ul, ul li a:focus-within > ul . . .

...in different variants. No luck so far. Does anyone have a suggestion how to proceed properly?

7 years ago

Hello, @Zebull!

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.

7 years ago

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.

7 years ago

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.

@Zebull:
If possible, I would like to test what you have achieved in your own theme.

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.

7 years ago

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 ...?)

7 years ago

Review my code, it's designed for aural readers: https://after-dark.habd.as

7 years ago Solution

Found a custom solution myself, with a custom (child)theme css:

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:

Make Quark accessible...

(marked as solved)

last edited 09/06/19 by Thomas Sandström

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	197	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	92	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	454	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	47	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	127	3 months ago

Suggested topics