Skiplink (to menu) does not work in small screens

internetstandards / Internet.nl

Internet standards compliance test suite

https://internet.nl

174 stars 37 forks source link

Skiplink (to menu) does not work in small screens #306

Closed julezrulez closed 4 years ago

julezrulez commented 6 years ago

When someone zooms in until the menu is a hamburgermenu, the skiplink still consist of "Go to main menu". This link does not work while the menu is hidden. There are 2 solutions:

Leave the Skip to main menu out when the hamburger menu appears.
Make it skip to the hamburger menu (when applicable). (just choose one of these)

julezrulez commented 5 years ago

Prio 1 Assign to @paulvanbuuren

julezrulez commented 5 years ago

Solved by hiding the skiplink in case of menu button appears. Example here: https://internet.nerdnerd.nl/templates-php/41-responsible-disclosure.php

To test:

Open the page on desktop size screen
Use tab-key to see skiplinks appear on top of the page (3 links appear)
Resize window until the menu button appears
Use tab-key to see skiplinks appear. Now the link to menu is gone

gthess commented 5 years ago

Could you please create a Pull Request for the summer branch? Frontend related parts are in the frontend and checks/templates folders.

paulvanbuuren commented 5 years ago

Add an ID to the 2nd skiplink: <div class="skiplink" id="skiplink-sitenav"><a href="#sitenav">[...]</a></div>

paulvanbuuren commented 5 years ago

Pull request created: https://github.com/NLnetLabs/Internet.nl/pull/407

gthess commented 5 years ago

CSP would prevent messing with the style inline in HTML. I kept the same solution but replaced the inline style change with a CSS class instead.