Skip Main Navigation

Accessibility-driven styling

17 December 2020 · 1 min read

  • Previous post about design systems talked about wanting to maintain consistency

    • One way is through a style system if UI tech isn’t the same
    • At SFIX we’ve got Rails & React
  • Style system is SASS mixins (clever!)

    • Downside of style systems (like Bootstrap & Foundation) is that the HTML (and JS is left to dev)
    • Additional downside w/ mixins is that they work best w/ single element
  • Example: text field

    • the input, a label and a (error) message
    • we had to put the label after for the mixin to work
  • How do you handle states?

    • Hover and focus states are easy because of pseudo classes
    • What about an error state?
    • Would be easy in React, just add a class when that state happens
    • But what about mixins?
    • Use ARIA attribute for the styling, which enforces devs to have proper accessibility to get visual effects

Keep learning my friends. 🤓

Hi, I'm Ben Ilegbodu. 👋🏾

I'm a Christian, husband, and father of 3, with 15+ years of professional experience developing user interfaces for the Web. I'm a Principal Frontend Engineer at Stitch Fix, frontend development teacher, Google Developer Expert, and Microsoft MVP. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on Github

Attend upcoming minishops

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They’re highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day.