bootstrap why the button background color change when cursor hover it

That’s what focus indicators are for.Ī focus indicator is a visual indicator that “highlights” the currently focused element. Just like mouse users, they need to be able to see where they are on a page as they Tab their way through it, otherwise they won’t be able to identify the elements they are interacting with. This allows them to jump from one interactive element on the page to another. Keyboard users typically navigate their way through websites by pressing the tab key. By designing and implementing accessible focus indicators, we can make our products accessible to keyboard users, as well as users of assistive technology that works through a keyboard or emulates keyboard functionality, such as voice control, switch controls, mouth sticks, and head wands, to mention a few. A keyboard user’s cursor equivalent is the focus indicator. Their equivalent of a mouse cursor is usually hidden on too many websites, making it almost impossible for them to navigate those sites. Unfortunately, keyboard users experience the Web in a similarly frustrating manner too often.

You could try clicking and then finding out, but you can probably already imagine what a nightmare of an experience you’re about to get into. But if you are hovering over one, you don’t know which one it is. You may or may not be hovering over a link or a button or any other form control at any moment. Your hand may be still on the mouse, and you’re moving the mouse across the screen and across the page but you can’t see where it is. And as you move your cursor onto the page, it suddenly disappears. You want to buy something or maybe book a flight somewhere. Imagine you visit a website and you want to browse it for some content. Resources, references and further reading.Showing the focus indicators only for keyboard users.Examining the accessibility of focus indicators in popular design systems and UI pattern libraries.The focused element cannot be fully obscured Contrast with adjacent colors in the component The focus indication area and the contrasting area New focus indicator accessibility requirements in WCAG 2.2.

Bootstrap why the button background color change when cursor hover it