8. 8
    Use Sass Mixins to Style Inputs with Accessible Contrast and Keyboard Access
    7m 28s

Use Sass Mixins to Style Inputs with Accessible Contrast and Keyboard Access

Stephanie Eckles
InstructorStephanie Eckles

Share this video with your friends

Send Tweet

We'll begin to apply our theme styles for our text inputs by creating the .form-field component. We'll make use of the Sass feature of "mixins" to create :focus and :disabled styles that can be reused. While creating the :focus and :disabled states we'll discuss the importance of contrast and keyboard access for accessibility.

An important take-away is that you need at least a 3:1 contrast ratio between your border and background AS WELL AS a 3:1 contrast ratio between your border and focus state.