Focusing on Focus

Client-Side Web Dev (JavaScript, Angular, React, etc.), 0

---

When we think of CSS and Accessibility, what comes to mind? Is it adding alt attributes to image tags? How about color contrast? Is :focus given that much thought since browser's style these by default? Often, focus outlines are turned off in CSS to meet non-inclusive design standards, but this causes problems for keyboard users. How can we make the web a more inclusive place while maintaining design intent?. As we build more and more things on the web, we must do our part in building awesome, accessible user experiences. Except native default browser styling of the :focus pseudo class is rather blah, don't you think? There has to be a better way to add some pizzazz to elements when users navigate without a mouse. In this talk, I will demo numerous ways to provide custom focus styles despite known limitations in the web platform. For users with disabilities, it's imperative that visual design finds a way to meet in the middle.