search

materializecss / materialize

Materialize, a web framework based on Material Design
https://materializeweb.com/
MIT License
918 stars 105 forks source link

Web Accessibility Feature Idea: "Skip Navigation" #234

Open nh916 opened 2 years ago

nh916 commented 2 years ago

I have seen this on other websites where you can skip navigation from tab key, and I think in the past every developer had to write this out for themselves and I think it would be very nice if we could add this into the framework to increase web accessibility and add another cool factor to our framework. We could even have it as an option if each developer wants to enable it or do something of their own, so we don't get in their way.

Navigation menus are often hard to navigate on keyboard because there could be lots of menus and submenus, and if someone wants to get to a part of the content it would be cumbersome to have to tab through all the menu items or worse have every single one read to them by screen reader.

Often many websites have a "Skip Navigation" hidden link that is only shown when navigating the website via tab key. The skip nav link allows the user to skip navigation and go straight to the content.

Here is a cool video that I found and I think would be helpful to illustrate what I am saying. https://youtu.be/jDDaOFr9nqQ

Heres an article about it from webAIM that speaks more about it: https://webaim.org/techniques/skipnav/

If we decide not to add this I think we would still be completely fine, but I think it would ultra cool if we did.

brennanyoung commented 2 years ago

Good idea. These are tricky to get right, so if the lib can handle it, so much the better. The webaim article linked above has pretty good implementation guidelines.

gselderslaghs commented 1 month ago

This seems more like a functionality to implement in the ready-to-use templates provided by Materialize. As it's a great feature with multiple purpose effect on web accessibility, as explained in the WCAG 2.1 documentation (https://www.w3.org/WAI/WCAG21/Techniques/css/C7.html) , there is no direct component in my opinion where this feature would be able to apply to.