CSS as a Testing / Accessibility-enforcing tool

Building a CSS framework to be used across multiple product is an easy thing. Making sure developers use it in the right way was always the challenge.

Raise your hands if you wasted so much time refactoring code that other developers created because they didn’t know proper CSS, proper html semantics nor how to follow accessibility guidelines.

In my last project I came up with an idea that would help us minimize our CSS madness and increase our productivity, so basically my idea consists of two things

• Using Css as a testing tool for our HTML.
• Using CSS as an accessibility enforcement tool ( to enforce proper semantic for accessibility)

So lets dig into it and see how anyone can apply this to any CSS framework

CSS as a testing tool

I’ll be using SCSS for this tutorial but if you are using anything else it shouldn’t really matter. This is how my SCSS folder structure looks like.

Basically, I’ll be adding a specs file for each SCSS module and ill be importing and compiling a separate stylesheet for them that will only be used on my development environment.

Lets start by creating the styles of how we will display our CSS issues, so it will be just a box that shows on top of the element that has an issue, I’ll also created them as mixins for re-usability .

We will only have two types of CSS issues

1. Warnings : Will have a yellow background and will alert the user for a potential violation
2. Errors: Will have a red background and will alert the user for violations

So let’s start by writing our first rule on anchors. We want to create an error if the anchor doesn't have an href. We will use the :not() CSS selector for this and pass in the message to our error mixin

Once the developer forgets to add the href this error will show

YES! it’s that simple, you can test anything with the :not() selector !!

Let’s look into a warning message example. Let’s say the developer is using a div as a button ( in some very minor cases it should be fine ). So lets assume we will warn him and not flag it as an error

lets see how it would look like

div with warning message

There you go! Less code review for the CSS guru on the team , less code refactor and more productivity and consistency.

Let’s now talk now about how to enforce HTML and accessibility structure.

CSS as an accessibility / html enforcing tool

Some of you might not agree with this method, I’m pretty sure if you are a BEM supporter you wouldn’t want this technique in your framework.

Basically this technique is to make CSS only target specific elements and specific html structure.

If a developer adds a CSS class to an incorrect HTML element it basically won’t be styled, so lets look at an example let’s say buttons, in our previous example. We warned the user if an element doesn’t contain the attribute role='button’ but it still looks like a button. Now how about we create the styles to only affect buttons so if a user tries to use .button class on a div the styles wont be even affected.

Let’s look at the code, I just specified which element this class should always affect.

As you can see the div has no longer any style applied to it and our and our css gave us a warning.

Let’s look at a more complex code that enforces accessibility , let’s create a custom checkbox , as accessibility requirements we want it to have a label with a for attribute that should reference the id of the input[type='checkbox'] so let’s do this with html first and then CSS

Let’s see how we can now force this Html structure and the accessibility guideline related to checkboxes using SCSS

As you can see from our SCSS. if you even change the order of the input with the label, these styles won’t be applied and if you forget the for attribute it won’t still be applied.

Custom checkbox

So using this method you can see how you can force the same Html code structure across you product(s) and enforce accessibility guidelines!