Tab Accessibility Missing

[nh916]

Materialize CSS currently has an accessibility issue that needs to be fixed for future versions to make it even better! 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.

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

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.

We can do way better!

https://imgur.com/a/fJMKS0u

[wuda-io]

Which Browser are you using?
On the latest Firefox it works for me.

[nh916]

I was using chrome. I just checked it on firefox and I am still not able to know which button I am hovering over when I am tabbing. In other frameworks the one that you are on with the tab is focused and has a ring or something around it to indicate that you are focused on that one, but with ours currently there isn't any way of knowing

[wuda-io]

Yeah you are right, I just re-checked it - and only sometimes you are able to recognize where you are.
On my personal project i set a focus color with a good recognizeable bg-color, so you can better see which button is focused.
Maybe we should make this the default, but this has to be a Sass thing i guess. Unfortunatly I have very less knowlede of Sass so:
Who is the Sass Pro here? Can you help us out with an awesome PR?
Thanks guys.

[nh916]

If you already have the code for adding the focus ring around the buttons that would be a good help to share for anyone implementing it in sass. They would have a starting point to go from

[DanielRuf]

Are you well experienced with accessibility and resolving such issues? Because I think such input and feedback is great and we should not ignore it but we would need someone for materialize, who can see and resolve such problems.

Who is the Sass Pro here? Can you help us out with an awesome PR?

A PR would be great.

Where do we have to add the focus ring?
Anyone interested to volunteer and help creating a PR together? @materializecss/members

[nh916]

I have a limited knowledge in accessibility, and I would categorize myself as a beginner.

I think a way to know if a website is accessible to every user is to turn off the mouse and navigate by keyboard and if we can navigate by keyboard and its successful and its not too buggy then we are good.

Another way to test accessibility for blind people or hard of seeing people is to turn on the screen reader and turn off the monitor and try to navigate through a website and see if its possible to do it easily and without too much complications.

These are both extreme ways of testing and anything that is not accessible would pop out easily.

The focus rings would have to go around every button, or I think anything that you could interact with on a mouse I think. Usually if you tab through a website you should always be able to see where you just tabbed on and if you cannot see or tell where you are on the website when you hit tab then that is a problem.

I recommend this video by a guy who used to work for Google in the accessibility department of chrome and he is a great expert on accessibility for websites.

He has a great video on how he audits websites and checks for accessibility bugs within them.
accessibility check

Also, a short video on focus rings by the same guy
Focus rings

[gselderslaghs]

I've been digging into this issue for a while now and it turns out this is more kind of global theme thing on the buttons component

While even the button is selected, the focus state is missing from several button styles as standard and floating buttons, but seems to work on additional styles like filled, tonal, outlined

Most of the time people listed in the categories as described in #543 are working in browsers and operating systems with extended configuration, this results for them the invisible focus state are visible anyway

From my opinion the most important aspect on this topic, would be that every element is accessible by keyboard interaction (tab), this means it can be triggered, opened, the additional functionality is accessible and every element can be closed with keyboard interaction

Hope this clarifies your concerns