"When we treat focus outlines as essential design elements rather than afterthoughts, we create interfaces that are both beautiful and inclusive." #a11y https://medienbaecker.com/articles/focus-outlines
Comments
Log in with your Bluesky account to leave a comment
Really useful primer! I’m definitely guilty of not always factoring in things like background color into my outline colours ( I set it once and then expect it to work every where!) its definitely easy to neglect it as a design element!
Many say that "beautiful" and "accessible" cannot coexist together. Well that's not true. A button is more beautiful with a hover animation right? Why shouldn't the focus state have the same attention?
Great compilation of design, code, and reference examples. I’ve been a fan of the double, offset focus outlines for accessibility for a while and try to get them into projects whenever possible and situationally appropriate.
Yeah, me too! Been working on a draft for awhile on how to try and make the double focus outlines dynamically colored, maybe I should redouble those efforts 😅
You can swap out the color values with variables, I’ve messed around with it on my personal site as a playground a while ago but it’s definitely out of date… but the focus outlines do change with depending on the situation. I’ve used that trick for context (error states) and light/dark modes
Comments