Y’know that situation where you tell the client, “Here’s your website and you can edit those four (4) little homepage features in the CMS” and the client says “Okay okay okay” and you check the site a week later and it looks bad because the client —despite your incredible documentation— put an odd number of items in the feature grid? It’s a major minor problem that’s tough to explain to the client, but it all comes down to… The dangler.
CSS nesting is a convenience syntax addition that allows CSS to be added inside of a ruleset. If you’ve used SCSS, Less or Stylus, then you’ve most certainly seen a few flavors of this. An official CSS version of this syntax is being strongly considered and we have a split in preference that we’d like to employ the help of the community to break the tie.
Firefox has become one of the best tools for accessibility audits. Let’s go over Firefox’s accessibility features that you can use today. In this article I’ll discuss The Accessibility Tab, where we will begin and then move through to each component of the Accessibility Tab. First, the Check for issues tab, the Simulate menu, and end with the Show Tabbing Order checkbox. I’ll finish with the Checks and Properties panel.
Focus outlines are a great way to improve accessibility. They are traditionally set with the :focus pseudo class. That still works, but with :focus-visible we have a new way to only show focus styles when they make sense. How does that work? The thing is, :focus-visible isn’t a “indicate focus only to keyboard users” pseudo class, it is “indicate focus when the browser thinks it’s right, based on some heuristics”.
The front end is changing. It’s no longer something we have to push, tap or click. It has quite litterally taken on a voice of it’s own, and using technologies like Speech Synthesis Markup Language (SSML), the Web Speech API and (maybe one day) the CSS Speech module, we can create Alexa skills, Google Home actions, and web applications that sound a lot more interesting than you might think!