:focus-visible Is Here Posted October 10, 2020 by Matthias Ott 1037 Webmentions #a11y #accessibility #browsers #css #focus #ui #usability One of the most important features of a website that is built with accessibility in mind is that it can be navigated with a keyboard. Most blind users and many users with motor disabilities rely on keyboard navigation, either with a standard keyboard or with a device that mimics the functionality of a keyboard. Providing strong visual indicators that highlight the element that currently has keyboard focus is therefore indispensable. In CSS, the focus styles for an element can be changed via the :focus pseudo-class. a:focus { outline: 3px solid blue; } Hiding Focus Styles Is Bad Practice # Besides accessibility requirements, there are also design considerations to be made, though: For some users, a strong visual focus indicator once they click an element with a mouse or touch it with their finger can be irritating or feel “clunky”. Often, the focus highlight is only visible for a short time just before a page change occurs. This is an additional visual change in the interface that users have to process and understand. Without the knowledge that this highlight around the element is actually an accessibility feature, people might be distracted or irritated. Sometimes, it is even perceived as an error. And while some designers certainly are far more sensitive to the aesthetic qualities of an interface than its users – and would be well-advised to get used to a bit more accessibility-oriented, contrasted designs –, it is still relatable that focus indicators might feel like an intrusive break in an otherwise carefully balanced visual design if the designers missed to actively style them. Many clients and designers, therefore, insist that developers remove the focus styles altogether for purely aesthetic reasons. a:focus { outline: none; } Don’t do this. It is an uninformed decision that actively excludes people and should not be an acceptable solution in 2020 anymore. We have to do better. But how? One way out of this dilemma would be to consciously design the focus state of an element so that it is perceived as a natural part of the transition from one state of the interface to the next. This, however, is not always easy or possible. :focus-visible to the Rescue Luckily, there is now another option: The :focus-visible pseudo-class. According to the spec, “the intent of :focus-visible is to allow authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where the focus is, and not visible in other cases.” Or, in other words, it lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator: /* Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */ :focus:not(:focus-visible) { outline: 0; } /* Show focus styles on keyboard focus. */ :focus-visible { outline: 3px solid blue; } In October 2020, Chrome 86 shipped with support for :focus-visible, Firefox also supports it since version 85, and older versions of Firefox support it via the :-moz-focusring pseudo-class since 2011. Support in WebKit is also coming, thanks to a recent initiative by Igalia. Edit: Support for :focus-visible shipped in Safari 15.4. So there is no need to hold back. You can start using :focus-visible now! Once more, progressive enhancement is your friend here. You can define regular focus styles for non-supporting browsers and then overwrite them for browsers that support :focus-visible. :focus { outline: 3px solid blue; } :focus:not(:focus-visible) { outline: 0; } :focus-visible { outline: 3px solid blue; } You can try it out in this Codepen: See the Pen :focus-visible Demo by Matthias Ott (@matthiasott) on CodePen. Note that :focus-visible always applies in combination with :focus. So if you inspect it in Chrome’s Developer Tools, for example, make sure to tick both boxes to see the appropriate focus styles. A Polyfill for Older Browsers # If you need to support a wider range of browsers, including Safari, there is also a polyfill. It simply adds a focus-visible class to all focused elements in situations in which otherwise the :focus-visible pseudo-selector would match. Once the script is added to your page, the code looks much like in the examples above. The only difference is that now we are using classes to define the visible focus styles in our CSS: .js-focus-visible :focus:not(.focus-visible) { outline: none; } .js-focus-visible .focus-visible { outline: 3px solid blue; } If you decide to use the polyfill, make sure to pay attention to how it behaves in combination with your existing focus styles. It might still be a valid choice to only use the polyfill until Safari also adds support for :focus-visible. But regardless of which method you decide to use, it is fabulous that we now have a solution to a problem that was often “fixed” by developers and designers by making websites less accessible. :focus-visible now offers a solution that is accessible and makes users, designers, and developers happy. Further reading # With :focus-visible, you can have focus styles when it makes sense, by Hidde de Vries The Focus-Indicated Pseudo-class: :focus-visible, W3C CSS Selectors Level 4 Giving users and developers more control over focus :focus-visible and backwards compatibility, by Patrick H. Lauke focus-visible Polyfill Can I use :focus-visible CSS pseudo-class? Navigate using just your keyboard, by Dave Rupert Focusing on Focus Styles, by Eric Bailey - This is the 62nd post of my 100 days of writing series. You can find a list of all posts here. ~ 1037 Webmentions Matthias Ott Also added it to the list of links at the bottom of my :focus-visible post from a while ago… ✅; matthiasott.com/notes/focus-vi… Matthias Ott ????;????; Just updated my post on :focus-visible – because Safari 15.4 added support as well! 🥳🙌 Matthias Ott Glad it was helpful, Amber! ????; Arnaud Delafosse If you've been asked to remove "that ugly border" on links and buttons by someone who knows nothing about #a11y, you can still style your own focus ring with :focus-visible and not exclude people using keyboard navigation.👍 matthiasott.com/notes/focus-vi… + tpgi.com/focus-visible-… Marcus Herrmann Maybe your code example could feature outline-color: transparent; instead of outline: 0;🙂Background: Windows High Contrast Mode and, let's say, IE11: nicchan.me/blog/tips-for-… Matthias Ott Thanks a lot Marcus! This makes a lot of sense – I’ll change that! ????; Matthias Ott Just updated my post on :focus-visible from last year and included the latest updates: Full support in Firefox 85 and progress on an upcoming WebKit implementation! 🎉 Hyeonseok Shin ????; 브;라;우;저;에;서; 키;보;드; 포;커;스;와; 마;우;스; 포;커;스;를; 구;별;해;서; 넣;으;려;나; 보;네;요;. matthiasott.com/notes/focus-vi… devolute Just read a Reddit thread full of devs saying how `:focus-visible` isn't supported so don't bother. Now #Chrome 86 supports it so that's half the world. Plan ahead for new #a11y features, dum dums. Just added it to a client site. Nice guide by @m_ott here: matthiasott.com/notes/focus-vi… Alex Moldovan :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… kiril delovski :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Halfvet De :focus-visible pseudo-class is gelanceerd en maakt een deel van de :focus-stijlen overbodig. matthiasott.com/notes/focus-vi… Darren McMillan :focus-visible is here, I don't really see the need for it myself I think we can manage fine with :hover :focus having accessibility and good UX, but knock yourself out... matthiasott.com/notes/focus-vi… \\ uto-usui // :focus-visible 使;っ;て;、;マ;ウ;ス;と;キ;ー;ボ;ー;ド;の;フ;ォ;ー;カ;ス;ス;タ;イ;ル;を;コ;ン;ト;ロ;ー;ル;す;る;+ matthiasott.com/notes/focus-vi… Joulse :focus-visible Is Here matthiasott.com/notes/focus-vi… Bramus! Shipped in Chrome 86 is `:focus-visible`, which is the pseudo class you're looking for when trying to style the focus ring (mainly used with keyboard navigation). 🔗 matthiasott.com/notes/focus-vi… Manorisms Newsletter :focus-visible Is Here by @m_ott — You may have been tempted to hide the CSS outline on focus (example: a:focus { outline: none; }, but this isn't good for accessibility. Thankfully there is :focus-visible to save the day! matthiasott.com/notes/focus-vi… Jacky :focus-visible Is Here · Matthias Ott – User Experience Designer matthiasott.com/notes/focus-vi… Gary Stevens frontendfront: :focus-visible Is Here matthiasott.com/notes/focus-vi… Front-End Front :focus-visible Is Here matthiasott.com/notes/focus-vi… Access42 Cet article concis de @m_ott résume ce qu’il faut savoir sur :focus-visible : matthiasott.com/notes/focus-vi… L’outline ne sera visible qu’à la tabulation et n’apparaîtra pas au clic. Les navigateurs ne supportant pas :focus-visible afficheront l’outline comme d’hab’. #a11y #UX #CSS Quentin Bellanger We can now show focus styles only on keyboard focus. #a11y matthiasott.com/notes/focus-vi… Friday Front-End :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Phong Duong (Koogio) :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Murilo Siqueira matthiasott.com/notes/focus-vi… Front-end Bookmarks 📣 New article by @m_ott matthiasott.com/notes/focus-vi… frontendbookmarks.com/css/selectors/… Peter Demaria :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Blake Niemyjski :focus-visible Is Here matthiasott.com/notes/focus-vi… #web #accessibility #CSS я;є;αℓ;ιѕ;т; נ;ανѕ;т;αн; ????;????; :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Guillaume Barbier Une fonctionnalité intéressante pour ces situations où nous arrive pas à concilier le designer/le client et les exigences de l'accessibilité (un Joker en qq sorte) :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Seb Dancer-Michel :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… WebSupport.tech :focus-visible Is Here matthiasott.com/notes/focus-vi… #css ua5aw98z 参;考;ま;で;。;🐶 matthiasott.com/notes/focus-vi… Kyle Poole :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… SO excited about this! thomas villain :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… míchє;l mαíllαrd :focus-visible Is Here · Matthias Ott – User Experience Designer matthiasott.com/notes/focus-vi… RuwanLokubalasooriya matthiasott.com/notes/focus-vi… Chris Heilmann 👉🏻 “:focus-visible Is Here” 🔗 matthiasott.com/notes/focus-vi… @m_ott on a CSS feature that may bring peace to the "keep it keyboard accessible" and "but I don't want ugly big blue outlines" debate. Yohan J. Rodríguez #CSS #Automated | :focus-visible Is Here matthiasott.com/notes/focus-vi… Amy Dutton @adamwathan Have you seen this? I know you've been talking about focus states for @tailwindcss. matthiasott.com/notes/focus-vi… Sergey Romanenko ✌;️;❤;️;✊; Chrome 86 just shipped with support for :focus-visible. matthiasott.com/notes/focus-vi… #css #ui #web Mattia Michini :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Steve Lee :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Daiane Assen :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Bryan Matthews :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Brian Birtles I wrote a tailwind plugin to support this in a backwards compatible manner: https://t.co/VB7Xeee5WB Tammy Jensen :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Aurelie Touchard ????; ????; ????; Ca va réconcilier ceux qui ne veulent pas afficher le contour au focus sur un élément, et ceux qui tiennent à leur affichage ! 👍 #css #focus #accessibilite #accessibiliteWeb #webAccessibility matthiasott.com/notes/focus-vi… Mazik Solutions :focus-visible Is Here matthiasott.com/notes/focus-vi… dailydevlinks. 📝 :focus-visible Is Here 🔗 matthiasott.com/notes/focus-vi… #html #css #javascript #webdev #dailydevlinks webdesignrepo :focus-visible is here matthiasott.com/notes/focus-vi… @m_ott #Accessibility #CSS Deborah Edwards-Oñoro :focus-visible is here matthiasott.com/notes/focus-vi… #CSS #a11y Pablo Lara H :focus-visible Is Here by @m_ott #a11y #accessibility #browsers #css #focus #ui #usability matthiasott.com/notes/focus-vi… WPbonsai :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Johan Ramon :focus-visible Is Here matthiasott.com/notes/focus-vi… #accessibility #a11y Matthias Ott No, thanks for taking a look at it! ????; But would you say that it works as expected? I didn’t expect this post to get that much attention and am happy to hear about anything I might have overlooked so that people get to read correct information. 😅 patrick h. lauke it does work as expected "in browsers that don't support :focus-visible it behaves just like it always does/did". hadn't had my coffee, and somebody asked me "so why is the demo not working in Firefox?" which got ME confused until i realised the demo WASN'T polyfilled too ????;♀;️; Stefangnie ????; Waltergeist ????; #CSS :focus-visible Is Here. Honestly, I never met any users who said that the focus was "clunky" in any tests, I think that removing the focus is mostly a "designer think it's breaking their design" problem. Still here's a solution :) matthiasott.com/notes/focus-vi… patrick h. lauke (ignore my last two, tweets, got confused thinking the codepen was already using the polyfill) Adilade :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Anna :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… jebswebs Good reminder: ":focus-visible Is Here" #a11y matthiasott.com/notes/focus-vi… Jon Kantner It’s really good news that `:focus-visible` is getting more browser support. It has recently landed in Edge and Chrome 86, so now we wait on Safari. 😄 matthiasott.com/notes/focus-vi… #CSS gabi alvarez :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Smashing Magazine 🎉🥳 Hurray, :focus-visible is here! /* Hide focus styles, e.g. when an element receives focus via mouse. */ :focus:not(:focus-visible) { outline: 0; } /* Show focus styles on keyboard focus. */ :focus-visible { outline: 3px solid blue; } matthiasott.com/notes/focus-vi… via @m_ott biou matthiasott.com/notes/focus-vi… В;е;б;-с;т;а;н;д;а;р;т;ы; :focus-visible у;ж;е; з;д;е;с;ь;. М;а;т;т;и;а;с; О;т;т; о;б;ъ;я;с;н;я;е;т; п;р;и;н;ц;и;п; р;а;б;о;т;ы; п;с;е;в;д;о;к;л;а;с;с;а;, п;о;я;в;и;в;ш;е;г;о;с;я; в; Chrome 86, и; п;о;к;а;з;ы;в;а;е;т;, к;а;к; п;р;и; п;о;м;о;щ;и; п;о;л;и;ф;и;л;а; д;о;б;а;в;и;т;ь; п;о;д;д;е;р;ж;к;у; в; с;т;а;р;ы;х; б;р;... Б;у;д;н;и; в;е;р;с;т;а;л;ь;щ;и;к;а; Н;е;м;н;о;г;о; п;р;о; :focus-visible в; с;т;а;т;ь;е; @m_ott: matthiasott.com/notes/focus-vi… И; в;ы;ж;и;м;к;а; к;а;к; в;с;е;г;д;а; н;а; к;а;н;а;л;е;: t.me/htmlshit/453 #HTML #frontend #CSS Florens Verschelde But since it would mostly affect power users who may know what focus styles are anyway, I think I could live with that. Florens Verschelde Perhaps not ideal for primarily mouse users who focus a form field and tab through several fields after that. They end up in "keyboard mode" even when using the mouse after that. The focus-visible polyfill handles it well in my experience. Emilio There's probably a bit of spec work involved. I think Gecko's focusring behavior of making outlines always visible once you've tab-navigated should be allowed by the spec. And then probably also some -moz-focusring behavior changes like making it match on some programmatic focus. Emilio Yeah, I implemented it behind a flag, but I think to ship it we probably want to make it a real alias of :-moz-focusring. I tweaked -moz-focusring behavior to be more sensible a while ago with the intention of doing it, but I haven't got to finishing that work. Matthias Ott Thanks for the update and explanation, Emilio! Much appreciated! 🤗 Alexander K. J. Schmidt #css :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… Emilio Yeah, the Mac focus-on-click behavior is in fact special, but it mimicks the platform convention (i.e., matches Safari). Em No worries! It happens all the time. :) Florens Verschelde Woops sorry, wrong Emilio ^^ I meant to tag @ecbos_ who worked on this feature. Florens Verschelde :focus-visible has an implementation in Firefox either behind a flag or enabled only in Nightly, not sure. @Emilio might know more about if it could be enabled more widely or if there are blocking issues. Em Sorry mates; web development isn't my strong side. Those CSS properties look super useful, though! :) tyankatsu #hrb_frontend matthiasott.com/notes/focus-vi… Matthias Ott Yes, same here! 😄 Matthias Ott AFAIK, Firefox still only supports the feature under the name `:-moz-focusring` (see screenshot). But (!) on Mac, buttons still don’t have a focus style on click in Firefox. That’s what confused me a bit, when testing it. I’ll add this to the article… developer.mozilla.org/en-US/docs/Web… Geoffrey Crofte ????; Oh yes ok I understand now. It's the Mac behaviour that made me think Firefox supports it by default. Thanks for pointing this out ????; leandro 💡 ótima dica Geoffrey Crofte ????; Great news! I'm not sure what you mean with Firefox support because I use it for several weeks now. Or maybe I missed something ????; Onur Oztaskiran This is a lifesaver for design focused front end development. Laurence Cliff This’ll get designers who hate being able to see accessibility features off our backs! Rafa Garcés Uuuh nene! Paul Welsh After being schooled by @patrick_h_lauke and @a_frontend_dev - it’s good to see this more on the wild Irshad Ali ????;????; This is what I need now. Fresh Frontend Links :focus-visible Is Here matthiasott.com/notes/focus-vi… Matthias Ott 🙌😁 James Maclean I wrote this demo to solve this problem last week. I guess it’s now a polyfil codepen.io/jqim/pen/QWNZw… Matthias Ott Hey Imran! Sure! I wrote the CSS myself, so no theme. The typefaces are Nudista by Suitcase Type Foundry and FF Spinoza by FontFont. Imran Ahmed hey, may I know what the theme and font is Cathal Mac Donnacha Yes! No need to set outline:0 on buttons which is an accessibility killer! Dennis Lembrée ????; #webdev #a11y #css Glafira Zhur Э;р;а; л;и;ш;н;и;х; и; г;л;ю;ч;н;ы;х; с;к;р;и;п;т;о;в; п;о;д;х;о;д;и;т; к; к;о;н;ц;у;! 😍 Д;а;ё;ш;ь; focus-visible! Jakub G Websites hiding focus indicator "because it's ugly" has been a major issue on the web for long time. Hopefully with being able to distinguish keyboard/mouse focus, this antipattern will go away. patrick h. lauke ah, all good, missed that :) Matthias Ott Oh yes, 100 %! I’m also linking to your article. 😄 Maybe the screenshot in the tweet is incomplete in that regard… 🤔 patrick h. lauke developer.paciellogroup.com/blog/2018/03/f… David Hellmann New link: ":focus-visible Is Here · Matthias Ott – User Experience Designer" — Direct Link: matthiasott.com/notes/focus-vi… 10 Reposts Julien Roche Giorgos Sarigiannidis Vitalii Bobrov Rinat Valiullov Stephan Zavodny Ruben Duiveman Comandeer Р;и;н;а;т; В;а;л;и;у;л;л;о;в; Manuel Matuzović; Jacob Proffer 924 Likes Cynthia Swindoll Aurelie Touchard ????; ????; ????; Daria Czerniawko Mikaela Ola Ola Oliver Kilian Valkhof Christian Alden Jacobs Felipe César Edward J. Milner Name can not be blank H.K****** Nico Thiebes Christoph Jerolimov Mohan Dere ????;️;⌨;️;????;????; Vil@????;Mango:~$ cd /mnt/c Emilio Rico Sta. Cruz bicho-da-seda Miguel Machado Matias Eduardo Marta Radziszewska Kalii Jeff Kielman Gowtham ????; kukunayida plomobit hosmel Kathryn Grayson Nanz Steve Clay Matt Ström Jeffrey LeBoeuf Santi Martin Sebastian Osorio Cruz / Joseph Chirag Patel Bart Torment Joel Louzado mourgeon manon zin_chen FrontEnd Dude ????;????; Graham Bancroft Patrick Dahms Nicolai Simonsen Mark McMullan Simon Mollweide ????; ctrl + j ????; Christian Cousquer Thomas Tastet ☂;️; Alberto Vélez Jon Maskrey ّ; Fredy Philipp Schardt Pete Lambert Marine Vedran Jaic Toni Feistauer Arthur Stolyar Tobias Ahlin Lars Wittenberg Mike Ed Knowles Marco Villuendas Robb Owen Matt Draycott Christian Stuff Juho Vepsäläinen Jeff Andrei Gatej O-P Jauhiainen Adam Howard Muhannad Stefen Alper Amber Stickel M M JIBIN-P Resi “package: An Amazing Project.json” Respati Hardik Shah Juk Samuel Ramírez Mike Herchel Prathamesh Satpute James Ross Brian Mitchell Francisco Junior Mark Branly Tristan Gibbs Zubin Khavarian PerseveraЯ; ば;な;さ;ん; Lou Verdun Manaia Junior ⚡;️; Sabrina Jacqueline Meli Borgius Trevor Casey Selman Nur Steve™ Rafa Fran Kace 東;條; ????; (a.k.a. Beep) Manish Manohar chPaik Gabriel Canderoli Jan Nicklas Desiré ????; Jorge Rubiano Serprix Bastien Mariusz Pianowski Joel Turner Neil M Anki Sean Wu useless_tangent Sarah Teigland Yu Sato Carolina Sanchez calebo Alberto Pedrero William Cunha Abdullah Sonja Boris Cabezas maxinteractive Darek Kay Rich Donnellan Dilī;p Shukla (द;ि;ल;ी;प; श;ु;क;्;ल;) Guillermo Peralta Frederik Christensen Aman Mahajan Su Leonardo Maldonado Javi Victor Gonzalez Hjalmar Sköldefors ????;????;????;????; . ????; Casey Klebba Patrick Racenberg Brett Sinclair Derk Marcos Rivas ????;????;????; Andrew Noblet Gareth Clubb Aksana Ti ™️; Diogo Ferreira Rafael Rigueiro Kristofer Wallöf w00t Benjamin Gondy Nene Jake Bennett David Brewitz Alfonso Vargas Mathew Teague ™ Tony Feldman Wills Bithrey Vladimir Mikhaliuk Andre Landgraf James Sorbello Ayrton Denis Lanz Andrés Nieto Max Eckel Ercan Murat KISACA manuel odelain Dominic Sebastian MGquadro Web Agency Michal Szymczak Daniel Peplow Artem Sheludko Nikolay Zainchkovsky madebydotun madinlove Theba Gomez Constantin Angheloiu Adriano de Azevedo Rasmus TomiGottschau Scott Kyle Leo Pitt SOURAV DUTTA Morteza Paul van Dyk Guido Slotboom Laurent Clavier ????;????;????;????;????;????; Fernanda Lemos Rafał; Rudol Sergi Dote Teixidor Raja Jaganathan Onyeka Aghanenu can can ali can Martin J Robert Nelson theswayambhu Marvin Danig Justin Pascual Alexis J. Villegas David K. ????; Benjamin Marte Patrick Arlt Kenny ????;️; MrCodeDev????; Daniel Infante Robert McNeill HBH Harinder Sahajpal Rob Pasquale Errico Thomas Holland Alexa Mehmet HAZMAN tyankatsu Enzo Notario Octávio Turra ... Gulshan kumar Albert Soriano Anwesh Gangula Hyeseong Kim Stefan Hoard Danielus Maximus Jason Miller roberto soberanis Marco Wright Michal Slíva Jon Du-EEK! rong-sen Con. Cathy Fisher Simon Coudeville Ben Cawrse Victor Valle Jason Atkinson Terry Oxana Tiago Oliveira gugha srinivasan Aiden ????;????;????; Kishore Kumar Paul Sandrico Provo ????;????;????; Dan Andreasen Joseph ????; Script Maxim Siebert Tamas Dohany Ujval Shah John Hurley André Mendes Nicole Findling Hara Kazunari ✌;️; Claus Stadel Warren Johnny Rodgers Piotr Rutkowski Carlos Amador Harpal Tareq Abuhajjaj Mariano sssupers Julio César Neil В;л;а;д;и;м;и;р; Ш;а;м;ш;е;е;в; F. Paul Mrinmay Joro Yordanov sartin Sean Curtis Rico ????;????;♂;️; Dario Corsi Marta García Saroz Maharjan JP Santos Joe Donnelly Matt Gaunt AD⒭;⒤;⒠;⒩; Shraddha Bagrodia Stefan Galescu José Fonseca Ganapati V S ????;????; Chris Shaw Roman Veselý Left Wingman Simon Petry Gheorghiț;ă; Hurmuz Piyush Walia Kyle Turman Kranthi Matt Duggan Nick Gard Daniel Herzog James Derrick Schott Naomi Hauret spooky chris ☠;️; Adam Argyle Wilvin Jiménez Vishal Prajapati endouz Jonathan Muth Jan Baer Mono Samuel Gomez Aaron Dancer 傅;子;威; Alberto Albericio test test castastrophe Martin Klepsch dimonskiy Shawn Beatty shaneeza Cécile Dezy David Notté Steven De Kock Josh Humble || Design Praveen Poonia the_k_mada Mike Smedley João Pedro Vieira Claudio Procida #BlackLivesMatter Steven Beshensky Guillem Aldeguer Oliver Davies Urmil Bhatt Hurdy Gurdy Man Smugller Rogério Silva Louis Pablo Crossa Marcin Kwiatkowski Wahid Shafique François Leproust Kathleen Stough Danger Manley Luis Tim Dobbins Onur Oztaskiran Clément Pittet Soumyajit Pathak Vlad Coroiu {{ Mark Phoenix }} Kyle Fredin boryyytoe Juliana BF Esther Mario Blas ????;????; @ 127.0.0.1 ????; Mark Jansen Raghav Singh Jan Gustavo Felipe Shôbítor Matt Clough Nikola Pajic Daryn St. Pierre Laurence Cliff Cristina Golubov Nikita Alex Mickaël Isaert Johannes Tom Wagner Antoine M Aswathprabhu R Ruben Amorim george75 Towhid Chris Mytton Frank van Eldijk-Smeding Steven Fabre Nedim Türkkahraman Aman Verma Sasivarnan R ????;????;????; Carsten Bach Robert van Steen Diego Lorenzo Cyril de Wit PaquitoSoft Winston jetskibeat Joulse Keith Chu Ismael González Bastien Jaillot Antoine Vinial Nico Arredondo Alberto Pérez de Rada Fiol Martin Nøhr Åskov Hansen Bastian Gebhardt Matthias Triendl kohgpat dear hunter Fredrik Broman · 橋;男; Mitch Gavan D1 Aleksandar Dragojlović; James Marshall Zander Sylvain Prevost Anne Bovelett Oscar ????; Marcus ✨; Leonard Zakoor Mazin ????; Chris Bews Pieter Delbeke Maarten de Graaf Jake Peters 米;老;朱; Younes Ladefoged Touati Darren Pinder ????; Nasi Atanasov Gil Zhenya Nemerovchenko Ю;р;и;й; М;а;т;ю;х;и;н; Pandemically Joshua Rob Harrell ... Jason Mayo ????; Stedman Halliday Hung Do Georgios Kotziabassis Jo Spelbrink Guillaume Dumoulin Stéphane Richin Nessar ????;????;????;????;????;????;????;????;.????;????;????; Stepan Bolotnikov Greg Bergé Robin Malfait Prateek Gogia ????; Alec Rust Alex Sindustries Pete Hotchkiss Mainak Wilfrid Jens Geiling slatina ????; prince of dark mode ????; Shaun Levett Hasan Aydoğ;du Ruggero Castagnola Albert Fernández Aron Rotteveel LoïcUV Marko Trebiž;an Rachid sid ????; Huw Martin Luis Manchado Christoph Gwihs Ionut Melih Uçar Jorge del Casar (@ home ????;????;????;) Dmitry Kuznetsov Rocco Aliberti Bogdan Soare Erwan Poupard Rob Voets ????; Sukant Gujar М;а;к;с;и;м; David Flanagan Becky Boyce (AmbrosiaBlue) Volodymyr Khytskyi Michael Schmid Aditya Vikram Singh Alex Oliveira Timothy Achumba Axl Crawford Pierre-Arnaud Allumé Mr.Zyan Alperen Türköz Adrián. David Danko Dubajic /r Masaki Kobayashi Matúš Lukáč; Joel Eade Jackson tanishq Alex Moldovan ✌;️; Jonas Røssum Taran Vohra Prateek Stephen Scoza kie Chilli Jay Alex Ilinskiy Р;о;м;к;а;р;а;н;т;и;н; ????;????; Marcio Barrios xdk78 Christopher Adams viktor Florian Chris Anne Jortveit Jelmer de Maat Marco useCauseAndEffect() Daniel Vladan Kotarac kozikaChargement.. Lee Taylor Antony Kennedy (he/him) Djeradi ☀; L!n James Hemery peterjparra Rafa Romero Dios ₪; ????;????;????;????; Noreh AD georges benjamin Miguel Morera Adam Chwilkowski Gopu Marshall Thompson Kai Eichinger Charly L. Lewis Newton evil_kirby163.jpg Jeroen van Beek Arne Van Kauter Ł;ukasz ????; Bob Estropajo ????; Tim van der Lippe GabyGaby Clément Galidie wh1zk1d Dave Cunningham El niño del pixel Markus Remmen Nuno Paco Segovia ????; Damian Zawadzki abhishek Hidde Eertman Adrian Florescu Rafa Garcés Ramona Jaydip Suvagiya Edo Cavazza Vlad Balabanovich Jan Rode Hrvoje Jurišić; Judicaël Andriamahandry Spyros Ioakeimidis Marco Fugaro Steve Thomson Stanislav Govorukhin Joe Gaffey Victor Gosse Alex Edwards Thorsten D E E P A K davehearne HoNooD Г;о;п;а;н;ч;у;к; В;і;к;т;о;р; yonasg_ Anton Van Eechaute Dan Harris PrinCSS Nina ✨; Bruno Charrier Vasyl Zubach Jorge Maiden ????; Nyalab-in-JS Björn Rixman Aybüke Ceylan eshaan Andrés Д;м;и;т;р;о; С;и;ч;е;н;к;о; Demangeon Julien /# Limichange Rubén Illodo Brea Rubén Valseca Barry McGee Leo Mari☀;️; Vineesh Venugopal Jonathan Kingston Mithicher Baro Jonathan Svärdén Queven Ribeiro Gema Anggada ✌;︎; Eric Alberts BIK-BITV-Test Volodymyr O.????;????; Pierre Georges Miikka Koskinen Evald Smalyakov S. Martín-Cleto ????; Noah vipul Abdón Rodríguez Benjamin HUG Usman Nasir Hasan Naser-ح;س;َ;ن; Josh Dan Loris Leiva Vasanth Srivatsa Fernando Delgado Shahma Ahmed Andreas Juuun Daniel Bannert Kristian Roebuck My Kim Bui Sam Dale Peter Mouland ᴍ;ᴀ;ᴛ;ᴛ; sᴇ;ʏ;ᴍ;ᴏ;ᴜ;ʀ; Victor Uvarov Oliver Daniel Vinod Kumar Josh Carpenter James Ives Sebastian Sebald Lady Batarei Mike Skowronek Anna Stasiuk Keith Devon AJ Klein Daví Machado Batista Salman Ahmed Stas ⚓; Carlos Faria Anoop Vasudevan Fitzy_Longhorn Adam Saint Carlos EAM Teemu Suoranta saravankumar Damian Ponce Scott O'Toole Olanrewaju Dharti Karan Sapolia Adam Sedwick Bartek Igielski Josh Jelte ⚛; Margarida Dinis Ayush Gupta ????;????;????; Kostadin Daan Ketelaars Coreen Toni Fisler frytaz1 Mason Hahn Antoine Doury ????; ????; ????; Т;Р;О;Й;Н;А;Я; IPA Kevin Cleppe Tyler Earls Abreeza Saleem ????; Aaron Farber Greg Smith Petyo Ivanov Carlos Blanco Medet Erdal Martin Stub eugene Lukáš ????; Sadegh Barati Magnus Nyquist Mustafa ismail Rody Davis VialectusŽ; Brian Walters ????; profiks Franco Correa jonnie tecate David Sánchez L me, an internetual Pierre-Do Putallaz Mike Morici Konstantin Rouda Andrey Morozov Stephen Brown-Bourne Tomi Tomion Tyler ; Manish Karki Michael John ✊;????;✊;????;✊;????; Ramil Mamedov Adam Juran Samuel Paul C Abdessalam jail Fabien Rassinier Giovanni Morelli Jakub Skala Syed Shibli Mahmud ????;????; Gulshan Akash Verma Jesús Macedo ????;????; Kim Hallberg Johannes Alvarsson Lord Tester Javier Rios Name cannot be blank Cody Averett Nikita Voloboev Karan Ganesan Chris Gift Egwuenu Srinivas Reddy João Bomfim uncle fucka Walnut Myroslav Momot Brandon Surowiec ਪ;੍;ਰ;ਸ;ੰ;ਨ;ਜ;ੀ;ਤ; | Prasanjit Thorsten Griebenow Craig Paul Rob Dodson Monel Luke Meyrick koos RusoCucu mbiza Thomas Mattacchione ipl2020 tweets i18u Jon Earley ????; stormcloud266 Carwash Shorty Jonas Kuske Bruno Carvalho Alcides Augusto Luke Taylor Nutti Saelor Sibelius Seraphini czerlyadz Ivan Annamalai Daniel Emily Mikl Nick Freeman Dustin Autery TheoMw ????;????; Leo Andrew Maldonado Hampton Moore Allen Kleiner devrsi0n Nirmal Rijal Lisa Sy Mich; khaitawng James Sann Etzahuu mendoza Konstantinos Antoniadis Ryan Liu ????;????;????;????;????;????; ????; Chris Johnson monsterooo Stewart Knapman kay ☕; Brandon Wright VirtualOverride????;????; Harold Cáceres Marshall Crosby Parthasarathi G K Matt Popovich Andres Galante Leonardo Alves Mac Daniel Dony Sukardi Dylan Vann Vincent Grafé - Black Lives Matter Bennett Feely razh Rose aakash@hey.com M liveelsewhere Vinicius Zucatti David ⚡;️; Vitaly Iaroslav Mamalat Damir Sarajlic avellar ????; Muhammad Tarek Kevin Wu????; Luis Romero Marcel Lele Braux Martinez Kier Borromeo nek4life Alan JULIUS ????;Yee好;????; TARNG ????;????; Batbayar B. Nass.js ????; Nick Rosen Martin Hofmann Nckcol Jen Gorfine Brett Jankord Miguel Piedrafita ????; Chris Coyier Lokesh Dhakar Carmen Blow Mehdi Vasigh Ryan Warner 海;岛;心;hey Ross Johnson Ben ????; Lenny Lesley jameschurchman Abhas Bhattacharya ⤵;️; Rohan Benstead Zach Edwards arial Josh Beitler ????; Josh-o-lantern Lupita Code ????; Fernando Carrettoni Nicolas Ramz Adrian Grimm Sim Ankur PRW Martin Garnett Elizabeth Manrique Alonso DeLaQuintana Allan Pope Nadja Müller-Schade Robert Newth Brooke Roy Quilor Jon Milner Joe Lamyman nico fonseca (•ε • ) Rı;dvan Bayı;r Matt Elphick ????; Rakesh ❤;️; JavaScript Anton Lenev Stijn Marc Friederich craig mike Yaroslav Dubinskyi Martin Mädler Cyril Viale inaktiv Nicolas Erny Mert Ülkü 1arsz Pete Coles Y A N I S й;о;р;и;к; Sova Juan Carlos John van Hulsen Saylor Allf Sil van Diepen yellow_by Wolfgang Wiese Ashley Rose Hebler Si Anthony ✌;️; Eyal Eshet Aitor Resano ????; Patrick WC yuuki iguissouma Nat Alison - An Awesome Project Stage Analysis P E G Jacob Lindström bedomax Pete Withers-Jones М;а;к;с;и;м; П;а;в;л;о;в; Mohsen Khakbiz Julien Roche Zach Saucier Kai Hisham Abdul Majeed Derek Cavaliero Vitalii Bobrov Antoine Martin double web-standards ????;❤;️;????; Cameron Campbell Corey Megown Demian Tatay Ryan Mulligan Yeu-Kang Hua Jacob Berthelsen amberleyville horror ????; madalyn Eddie Ebeling Jon Leverrier Neil Norman Peter Antonius Ruben Duiveman Mike Fraser bedot Gregg Nakamura Juan Fernandes Р;и;н;а;т; В;а;л;и;у;л;л;о;в; Tim Grochowski Murilo Siqueira Glafira Zhur Stefan Josh Collinsworth Jakub G Tom Hermans????; Jake D????;hm valderama Alexey Ch-H Jalen Davenport Adrián Bolonio Manuel Matuzović; Jacob Proffer CSSpooky ????; Stephanie Eckles Ivan Richard Radermacher Lara Littlefield Giovanni Benussi Marco Hengstenberg cybai.await? Gaël Poupard Paul Grenier ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions. Have you published a response to this? Send me a webmention by letting me know the URL. Ping! More Notes Ad Infinitum Lazy and Prompt Buckle Up At Machine Speed
Matthias Ott Also added it to the list of links at the bottom of my :focus-visible post from a while ago… ✅; matthiasott.com/notes/focus-vi…
Matthias Ott ????;????; Just updated my post on :focus-visible – because Safari 15.4 added support as well! 🥳🙌
Arnaud Delafosse If you've been asked to remove "that ugly border" on links and buttons by someone who knows nothing about #a11y, you can still style your own focus ring with :focus-visible and not exclude people using keyboard navigation.👍 matthiasott.com/notes/focus-vi… + tpgi.com/focus-visible-…
Marcus Herrmann Maybe your code example could feature outline-color: transparent; instead of outline: 0;🙂Background: Windows High Contrast Mode and, let's say, IE11: nicchan.me/blog/tips-for-…
Matthias Ott Just updated my post on :focus-visible from last year and included the latest updates: Full support in Firefox 85 and progress on an upcoming WebKit implementation! 🎉
Hyeonseok Shin ????; 브;라;우;저;에;서; 키;보;드; 포;커;스;와; 마;우;스; 포;커;스;를; 구;별;해;서; 넣;으;려;나; 보;네;요;. matthiasott.com/notes/focus-vi…
devolute Just read a Reddit thread full of devs saying how `:focus-visible` isn't supported so don't bother. Now #Chrome 86 supports it so that's half the world. Plan ahead for new #a11y features, dum dums. Just added it to a client site. Nice guide by @m_ott here: matthiasott.com/notes/focus-vi…
Halfvet De :focus-visible pseudo-class is gelanceerd en maakt een deel van de :focus-stijlen overbodig. matthiasott.com/notes/focus-vi…
Darren McMillan :focus-visible is here, I don't really see the need for it myself I think we can manage fine with :hover :focus having accessibility and good UX, but knock yourself out... matthiasott.com/notes/focus-vi…
\\ uto-usui // :focus-visible 使;っ;て;、;マ;ウ;ス;と;キ;ー;ボ;ー;ド;の;フ;ォ;ー;カ;ス;ス;タ;イ;ル;を;コ;ン;ト;ロ;ー;ル;す;る;+ matthiasott.com/notes/focus-vi…
Bramus! Shipped in Chrome 86 is `:focus-visible`, which is the pseudo class you're looking for when trying to style the focus ring (mainly used with keyboard navigation). 🔗 matthiasott.com/notes/focus-vi…
Manorisms Newsletter :focus-visible Is Here by @m_ott — You may have been tempted to hide the CSS outline on focus (example: a:focus { outline: none; }, but this isn't good for accessibility. Thankfully there is :focus-visible to save the day! matthiasott.com/notes/focus-vi…
Jacky :focus-visible Is Here · Matthias Ott – User Experience Designer matthiasott.com/notes/focus-vi…
Access42 Cet article concis de @m_ott résume ce qu’il faut savoir sur :focus-visible : matthiasott.com/notes/focus-vi… L’outline ne sera visible qu’à la tabulation et n’apparaîtra pas au clic. Les navigateurs ne supportant pas :focus-visible afficheront l’outline comme d’hab’. #a11y #UX #CSS
Quentin Bellanger We can now show focus styles only on keyboard focus. #a11y matthiasott.com/notes/focus-vi…
Front-end Bookmarks 📣 New article by @m_ott matthiasott.com/notes/focus-vi… frontendbookmarks.com/css/selectors/…
я;є;αℓ;ιѕ;т; נ;ανѕ;т;αн; ????;????; :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Guillaume Barbier Une fonctionnalité intéressante pour ces situations où nous arrive pas à concilier le designer/le client et les exigences de l'accessibilité (un Joker en qq sorte) :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
míchє;l mαíllαrd :focus-visible Is Here · Matthias Ott – User Experience Designer matthiasott.com/notes/focus-vi…
Chris Heilmann 👉🏻 “:focus-visible Is Here” 🔗 matthiasott.com/notes/focus-vi… @m_ott on a CSS feature that may bring peace to the "keep it keyboard accessible" and "but I don't want ugly big blue outlines" debate.
Amy Dutton @adamwathan Have you seen this? I know you've been talking about focus states for @tailwindcss. matthiasott.com/notes/focus-vi…
Sergey Romanenko ✌;️;❤;️;✊; Chrome 86 just shipped with support for :focus-visible. matthiasott.com/notes/focus-vi… #css #ui #web
Brian Birtles I wrote a tailwind plugin to support this in a backwards compatible manner: https://t.co/VB7Xeee5WB
Aurelie Touchard ????; ????; ????; Ca va réconcilier ceux qui ne veulent pas afficher le contour au focus sur un élément, et ceux qui tiennent à leur affichage ! 👍 #css #focus #accessibilite #accessibiliteWeb #webAccessibility matthiasott.com/notes/focus-vi…
dailydevlinks. 📝 :focus-visible Is Here 🔗 matthiasott.com/notes/focus-vi… #html #css #javascript #webdev #dailydevlinks
Pablo Lara H :focus-visible Is Here by @m_ott #a11y #accessibility #browsers #css #focus #ui #usability matthiasott.com/notes/focus-vi…
Matthias Ott No, thanks for taking a look at it! ????; But would you say that it works as expected? I didn’t expect this post to get that much attention and am happy to hear about anything I might have overlooked so that people get to read correct information. 😅
patrick h. lauke it does work as expected "in browsers that don't support :focus-visible it behaves just like it always does/did". hadn't had my coffee, and somebody asked me "so why is the demo not working in Firefox?" which got ME confused until i realised the demo WASN'T polyfilled too
????;♀;️; Stefangnie ????; Waltergeist ????; #CSS :focus-visible Is Here. Honestly, I never met any users who said that the focus was "clunky" in any tests, I think that removing the focus is mostly a "designer think it's breaking their design" problem. Still here's a solution :) matthiasott.com/notes/focus-vi…
patrick h. lauke (ignore my last two, tweets, got confused thinking the codepen was already using the polyfill)
Jon Kantner It’s really good news that `:focus-visible` is getting more browser support. It has recently landed in Edge and Chrome 86, so now we wait on Safari. 😄 matthiasott.com/notes/focus-vi… #CSS
Smashing Magazine 🎉🥳 Hurray, :focus-visible is here! /* Hide focus styles, e.g. when an element receives focus via mouse. */ :focus:not(:focus-visible) { outline: 0; } /* Show focus styles on keyboard focus. */ :focus-visible { outline: 3px solid blue; } matthiasott.com/notes/focus-vi… via @m_ott
В;е;б;-с;т;а;н;д;а;р;т;ы; :focus-visible у;ж;е; з;д;е;с;ь;. М;а;т;т;и;а;с; О;т;т; о;б;ъ;я;с;н;я;е;т; п;р;и;н;ц;и;п; р;а;б;о;т;ы; п;с;е;в;д;о;к;л;а;с;с;а;, п;о;я;в;и;в;ш;е;г;о;с;я; в; Chrome 86, и; п;о;к;а;з;ы;в;а;е;т;, к;а;к; п;р;и; п;о;м;о;щ;и; п;о;л;и;ф;и;л;а; д;о;б;а;в;и;т;ь; п;о;д;д;е;р;ж;к;у; в; с;т;а;р;ы;х; б;р;...
Б;у;д;н;и; в;е;р;с;т;а;л;ь;щ;и;к;а; Н;е;м;н;о;г;о; п;р;о; :focus-visible в; с;т;а;т;ь;е; @m_ott: matthiasott.com/notes/focus-vi… И; в;ы;ж;и;м;к;а; к;а;к; в;с;е;г;д;а; н;а; к;а;н;а;л;е;: t.me/htmlshit/453 #HTML #frontend #CSS
Florens Verschelde But since it would mostly affect power users who may know what focus styles are anyway, I think I could live with that.
Florens Verschelde Perhaps not ideal for primarily mouse users who focus a form field and tab through several fields after that. They end up in "keyboard mode" even when using the mouse after that. The focus-visible polyfill handles it well in my experience.
Emilio There's probably a bit of spec work involved. I think Gecko's focusring behavior of making outlines always visible once you've tab-navigated should be allowed by the spec. And then probably also some -moz-focusring behavior changes like making it match on some programmatic focus.
Emilio Yeah, I implemented it behind a flag, but I think to ship it we probably want to make it a real alias of :-moz-focusring. I tweaked -moz-focusring behavior to be more sensible a while ago with the intention of doing it, but I haven't got to finishing that work.
Emilio Yeah, the Mac focus-on-click behavior is in fact special, but it mimicks the platform convention (i.e., matches Safari).
Florens Verschelde :focus-visible has an implementation in Firefox either behind a flag or enabled only in Nightly, not sure. @Emilio might know more about if it could be enabled more widely or if there are blocking issues.
Em Sorry mates; web development isn't my strong side. Those CSS properties look super useful, though! :)
Matthias Ott AFAIK, Firefox still only supports the feature under the name `:-moz-focusring` (see screenshot). But (!) on Mac, buttons still don’t have a focus style on click in Firefox. That’s what confused me a bit, when testing it. I’ll add this to the article… developer.mozilla.org/en-US/docs/Web…
Geoffrey Crofte ????; Oh yes ok I understand now. It's the Mac behaviour that made me think Firefox supports it by default. Thanks for pointing this out ????;
Geoffrey Crofte ????; Great news! I'm not sure what you mean with Firefox support because I use it for several weeks now. Or maybe I missed something ????;
Laurence Cliff This’ll get designers who hate being able to see accessibility features off our backs!
Paul Welsh After being schooled by @patrick_h_lauke and @a_frontend_dev - it’s good to see this more on the wild
James Maclean I wrote this demo to solve this problem last week. I guess it’s now a polyfil codepen.io/jqim/pen/QWNZw…
Matthias Ott Hey Imran! Sure! I wrote the CSS myself, so no theme. The typefaces are Nudista by Suitcase Type Foundry and FF Spinoza by FontFont.
Glafira Zhur Э;р;а; л;и;ш;н;и;х; и; г;л;ю;ч;н;ы;х; с;к;р;и;п;т;о;в; п;о;д;х;о;д;и;т; к; к;о;н;ц;у;! 😍 Д;а;ё;ш;ь; focus-visible!
Jakub G Websites hiding focus indicator "because it's ugly" has been a major issue on the web for long time. Hopefully with being able to distinguish keyboard/mouse focus, this antipattern will go away.
Matthias Ott Oh yes, 100 %! I’m also linking to your article. 😄 Maybe the screenshot in the tweet is incomplete in that regard… 🤔
David Hellmann New link: ":focus-visible Is Here · Matthias Ott – User Experience Designer" — Direct Link: matthiasott.com/notes/focus-vi…
