Hacker News new | ask | show | jobs
by darekkay 2791 days ago
Please, please don't make your UI components unaccessible by removing the focus ring("outline: 0"). You're basically excluding all keyboard users from using your widgets, because I simply cannot tell which element is currently focussed.

If you really find the default browser focus ring ugly, feel free to style it or provide another alternative (like a box shadow).

3 comments

I don't understand what you mean. It's just using border instead of outline. It would still show as active if focus is from a keyboard. The changes are not tied to click events.
Most of the elements do not change visually at all when tabbed to?
That's a browser implementation and an html issue. They're just displaying the items here, not putting them in a true form.

If you put these components into a <form> tab would work fine. The :focus state would still happen, and that's what's styled.

edit: I see what you're saying. I was only looking at form inputs, but i see no focus state on buttons as you said.

I agree also. Another method, albeit more advanced, is an option to not show on mouse clicks, and do show when using the keyboard or cycling through tab indexes etc.
You're right. I just fixed this. :-)