materialize
materialize copied to clipboard
Dogfalo
Tab Accessibility Missing
Materialize CSS currently has an accessibility issue that needs to be fixed. The user cannot tab through any of the fields created with Materialize CSS. This is a major issue for User Experience, User Accessibility, and SEO.
Are you sure about this? Have you checked your JavaScript console for errors? I use tabbing extensively and have never once had a problem. In fact when I’ve had issues with fields because I haven’t linked the labels properly I’ve used Tab to move through them. Can you supply a JS Fiddle that illustrates the problem?
I think this can make what I am saying clearer, if not please message me again and I'll try to clarify.
When I go through bootstrap and start tabbing through their buttons and their whole page, I know exactly where I am but when I try to do the same thing with Materialize I have no idea where I am. I think this can be easily seen in their websites docs that they both put up.
https://getbootstrap.com/docs/5.0/components/buttons/
https://materializecss.com/buttons.html
I hope that makes it clearer, but if not I can try to create a Gist or maybe even a short gif to clarify
Interesting one. I think I can see the issue you're referring to now - however there are semantic differences between the two pages. Bootstrap is using the
Having said that the first Submit button on the Materialize page IS a button AND it displays a slightly altered style (a darker green transition) so it does illustrate it.... just not as clear as one would like. It would be a very simple override to fix that in my opinion and depending on colour you may actually find the highlight is easier to see perhaps.
I thought you were referring to fields (textboxes and the like) which make it very obvious when tabbing where you are on the form.
Bootstrap has been around forever and it had longest time to mature but materialize is doing really well since it was created only recently and is getting better everyday.
I could code that part into my style pages myself, but I think it might be a better idea if it was coded into the css framework itself because every website that uses materialize will need the tab accessibility portion and if we can enforce good accessibility by default that would be all the better.
One less thing that the developers using materialize would have to think about and it makes a perfect website by default from UI, UX, and accessibility perspective. The developer then has to try to mess it up for it to not go perfectly.
Yeah good call. Unfortunately I'm still struggling to get my head around the daily builds and all that. I know recently this commenced to try and get things moving again on the MaterializeCSS fork. This really needs to be added as a PR to see if it can be picked up. Strikes me that it would require some sort of discussion group to determine the appropriate style to default to. Yes Bootstrap is clear but some might argue the cartoony look of the default page isn't appropriate on a corporate page .... but you have to start somewhere!
I think everyone has moved from this repo to this repo https://github.com/materializecss/materialize
it seems like its going to be maintained by a different community from now on