Blog

Accessibility testing – faking it with Stylus

Doing accessibility evaluations for a website or web app can be a slow process – if you’re going through a WCAG checklist (such as the WCAG accessibility evaluation spreadsheet I made), there are a lot of things to check. Anything that can speed you up is a good thing.

Stylus

Using the Stylus browser plugin for Chrome and Firefox can help with the following WCAG success criteria:

  • 1.4.12 Text Spacing
  • 1.4.4 Resize Text
  • 2.4.7 Focus Visible
  • 2.1.1 Keyboard
  • 2.1.2 No Keyboard Trap

To get started, go and install Stylus in your browser:

Note: I haven’t fully tested Stylus itself for accessibility, but it does looks as though there might be a couple of focus traps. I use Stylus because I can, and it speeds up my own workflow. I know the Stylus team are open for contributions via the Stylus github page, so if there’s anything that can be improved and you can help out, go for it.

1.4.12 Text Spacing (Level AA)

Here’s what the WCAG 2.1 Quick Reference for 1.4.12 Text Spacing says:

In content implemented using markup languages that support the following text style properties [line height, spacing following paragraphs, letter spacing, word spacing], no loss of content or functionality occurs by setting all of [them] and by changing no other style property.

Normally, those things would be tricky to test in a browser. Not with Stylus.

  1. Open Stylus, go to ‘Manage’ and select ‘Write new style’.
  2. Copy and paste this CSS snippet into the style editor window:
	body * {
	    line-height: 1.5em !important;
	    letter-spacing: 0.12em !important;
	    word-spacing: 0.16em !important;
	}

	p,
	.para,
	.paragraph {
	    margin: 2em 0 !important;   
	}
  1. Give the style a name, such as ‘WCAG 2.1 1.4.12 Text Spacing’.
  2. Save it.

You can now toggle the styles on and off from the Stylus plugin menu in the browser address bar. So when you come to be testing the Text Spacing success criteria, you have a quick way of getting a good idea on conformance.

1.4.4 Resize text (Level AA)

Here’s what the WCAG Quick Reference for 1.4.4 Resize text says:

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

It turns out, users do change font size in their browser.

According Internet Archive’s study, more that 3% of users prefer a base font size different to the browser default of 16px.

Testing whether the website or web application you’re looking at supports text resizing isn’t difficult. In Chrome, for example, you can go to Settings > Appearance > Font size, select an option, then go back to your original tab and see if anything changed.

But there’s a quicker way, using Stylus.

  1. Open Stylus, go to ‘Manage’ and select ‘Write new style’.
  2. Copy and paste this CSS snippet into the style editor window:
	:root {
	    font-size: 24px;
	}
  1. Give the style a name, such as ‘WCAG 2.1 1.4.4 Resize text’.
  2. Save it.

Toggling that style on and off from the Stylus plugin menu in the browser address bar gives you a quick shortcut to testing whether or not text resizing is likely to work on the page you’re looking at.

You can set the root font size to anything you like, of course. In Chrome, I found 24px matched Chrome’s ‘Very Large’ preset size fairly closely. It’s not perfect, but the object of this exercise if to see if font resizing works at all on this web page. You should be able to spot quick easily if a page isn’t supported, or if there are certain elements that can’t resize.

2.4.7 Focus Visible (Level AA)

Here’s what the WCAG Quick Reference for 2.4.7 Focus Visible says:

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Testing whether or not focus styles are provided is pretty easy. You go to the web page and start hitting the tab key. If you can tell what’s focussed, you’re happy. If there’s anything that isn’t indicated when focussed you can give the page a metaphorical thumbs-down for this success criteria.

2.1.1 Keyboard (Level A) and 2.1.2 No Keyboard Trap (Level A)

If the page has missing or insufficient focus styles it actually makes 2.1.1 Keyboard (Level A) and 2.1.2 No Keyboard Trap (Level A) considerably more difficult to test for a sighted tester.

Using Stylus, we can force the web page to give us visible focus styles. And because we don’t care about aesthetics right now, we can make the focus indicator as bold as we like. Here’s how to set it up:

  1. Open Stylus, go to ‘Manage’ and select ‘Write new style’.
  2. Copy and paste this CSS snippet into the style editor window:
	*:focus {
	    outline: 4px solid red !important;
	}
  1. Give the style a name, such as ‘WCAG 2.1 2.4.7 Focus Visible’.
  2. Save it.

Give it a try

These techniques using Stylus aren’t 100% perfect, but they can give you a really good, quick idea whether or not a web page is likely to conform to these success criteria.