It allows web authors to style the focus indicator only if it would be drawn natively.ĭespite being a new feature that has recently landed on the web platform, it’s already being used by almost 1% of web pages (according to the Web Almanac by HTTP Archive). The :focus-visible pseudo-class matches elements based on the browsers heuristics. The problem is that removing focus styling breaks website accessibility, causing trouble for people navigating the page using the keyboard.įortunately, a new CSS selector comes to the rescue, avoiding this kind of accessibility issue while providing the behavior web developers were looking for. This avoids the “false positive” focus styles that cause complaints from many users. The net result, unfortunately, has been that the most common use of the :focus selector has been to remove indicators altogether. The trouble is that using it meant losing the heuristics. The goal of the old :focus selector was to allow authors to better style the focus indicator to be in tune with their overall design choices. Interfaces that do not employ those heuristics feel unnatural. This is important because all users need to know where their input data will be placed. A text input, for example, will display an indicator regardless of how it received focus.
If the user is navigating the page with the keyboard, it should. Focus indicator on different elements in Safariīased on lots of feedback and study, browsers have long employed heuristics about both the type of element, and how it came to gain focus, in order to determine whether the focus indicator should be displayed.
However, for decades now, whether a browser will actually display a focus indicator natively has been a considerably more complex affair. That sounds simple enough, and it perfectly describes what the old :focus selector makes possible. The “focus indicator”, as its name suggests, visually indicates (often with a kind of an outline) that an element has focus.
0 kommentar(er)
