Level Up Your Understanding of Accessibility

For many years at Appius we’ve promoted the benefits of web accessibility to our clients. Whether it be a public service required by law to meet the most stringent levels of compliance, or an everyday website looking to make the experience just that little bit better for everyone.

In that time we’ve learnt a lot about all kinds of disabilities and the standards designed to accommodate them. Eventually, one develops a kind of spidey-sense that tingles whenever some element might be worth a second look. This intuitive sense of when something feels “off” is the most valuable skill for non-specialists (designers, developers, general testers) when it comes to understanding accessibility.

Here’s the good news: this skill doesn’t require extensive knowledge of the Web Content Accessibility Guidelines (WCAG) and needn’t take hundreds of hours to learn.

Allow me to introduce a series of simple challenges that will show you first-hand what “accessible” actually means to real people. The challenge is split into four levels, from easy to hard and can be played in just a few hours using a website of your choice. This could be a site where you’ve been involved in the design or build, or any site you’re familiar with from regular usage.

When you’re ready, let’s begin with…

Level 1: Seeing things differently

We’ll start out with a condition affecting more than 3 million people in the UK: Colour Vision Deficiency. Commonly known as colour blindness, CVD comes in many flavours, but the most common is red-green. As a condition affecting an estimated 1 in 12 men and 1 in 200 women

(ref: https://www.colourblindawareness.org/colour-blindness/), there are fair odds you might be one of them!

1. Open Chrome and browse to your target site.
2. Open developer tools by pressing F12.
3. Open the command window by pressing Ctrl + Shift + P.
4. Type in “deuteranopia” and press enter.

The difference might not be immediately obvious. Pay particular attention to the contrast of text on coloured backgrounds. Is it as readable as it was before? Look out for graphics like maps or charts that rely on colour to communicate different categories of information, or validation messages where success or failure might be colour-coded. Are those differences as obvious with the filter enabled?

It should only take a few minutes of browsing to get a sense of where CVD might cause issues. Remember these areas the next time you open the colour palette or type out a hex code.

To reset your browser, simply press F12 to close developer tools.

Bonus Level: why not try out some other visual conditions? Type “Emulate” in the developer tools command window to see the available options.

Level 2: (Ab)use the magnifier

Sticking with the visual theme, this time we’ll try something different. Often sight issues don’t affect the whole field of vision equally, but impact some areas more than others. To simulate this we’re going to artificially limit your field of vision.

Don’t worry, you’re not going to be strapping Smarties tubes to your head. We’ll be using a feature already installed on your computer, which you might never have used (or might have only activated by accident).

1. Unplug any secondary screens, so you can concentrate on looking in one place.
2. From the Start menu, open the magnifier tool.
3. Crank up the zoom factor to at least 800%, or higher if you’re on a particularly high resolution screen.
4. Switch back to your site and enjoy the view.

If you were looking closely before, you should find you’re now looking a little too closely. Hint: moving your cursor to the edge of the screen will pan the view around, allowing you to “see” different areas.

Try to navigate your chosen site using the menu systems. Maybe fill out a form that includes validation. Besides the inconvenience of having to pan around, do you notice any features that are especially difficult to use? Look out for interactions that cause effects elsewhere on the page, or elements like tooltips and menus that are revealed and hidden by moving the mouse cursor.

Before long you’ll likely encounter at least one control that appears to do nothing, or a feature that’s difficult to operate when your mouse cursor is effectively doubling up as your eyes. How might you avoid these same problems in the user interfaces you design and develop?

When you’re ready to move to the next level, close the magnifier and your screen will return to normal (on Windows PCs you can use the hotkey Windows + Esc). Phew, it’s good to see the bigger picture again!

Level 3: Hacker mode

You’re probably feeling good after breezing through the first two levels. Well now it’s time to get serious, with one of the simplest challenges but also the most revealing.

1. Unplug your mouse.
2. Tidy up the cable / remove the battery and place it in a drawer.
3. If you have a trackpad or touchscreen, keep those fingers well clear!

Now, using your keyboard as the only input, go back to your browser and go about your day as normally as possible. It probably won’t take long until you get stuck, but stick with it. To get the most from this level you really need to try it over a longer period – I’d suggest at least an hour.

Here’s a few pointers to get started: the Tab key will generally shift focus to the next element, while Shift + Tab will focus on the previous one. Up and down arrows are useful for scrolling. Feel free to print the full list of Chrome keyboard shortcuts as a helper (that’s Ctrl + P, by the way).

Notice how focus jumps around the page. Does it move in the way you were expecting? Are there elements you can’t reach, or controls you can’t activate? Did you get trapped in an area of the page that you couldn’t escape? (it’s more common than you might think).

If you lasted an hour or more, congratulations! Hopefully you’ve come away with a new-found appreciation for how even this small difference can totally change how we interact with our devices. Maybe you even learned some useful shortcuts in the process.

It’s important to differentiate at this point between your own abilities (limited knowledge of standard keyboard shortcuts) and genuine accessibility issues (sites failing to implement those standards correctly). Put yourself in the shoes of someone who uses their computer in this way all the time. You can safely assume they will know all the shortcuts, so consider that too when you think about the accessibility of your own work.

Now it’s time to reconnect your mouse and up the difficulty one more time, with a technical challenge that will turn your understanding upside-down (perhaps literally).

Level 4: No sense of style

Modern websites are built from dozens of separate technologies, all layered one on top of the other. This is what makes the web of today so rich and engaging, but it also risks obscuring its foundations. These underlying features are important not just for users with disabilities, but for everyone – including machines (for example if you want your site to be understood by Alexa, or rank well with Google).

So let’s peek behind the curtain just a little and see what we can learn.

Caveat: I’m about to ask you to do something unwise, which is to copy and paste some code into the developer console. This is something you shouldn’t generally do, particularly if you don’t understand what the code is doing or if the site is of a sensitive nature (e.g. online banking). Bad actors can use this technique to steal personal data, passwords or worse.

1. Navigate to your target page.
2. Open developer tools by pressing F12.
3. Click the “Console” tab at the top of the developer tools window.
4. Copy and paste the code below into the developer console, then press enter.

setInterval(() => {

   for (let s of document.styleSheets) s.disabled = true

   for (let e of document.querySelectorAll("[style]")) e.removeAttribute("style")

}, 100)

The transformation should be immediate. Like Keanu seeing the matrix for the first time, you are now viewing the page without the usual veil of Cascading Style Sheets (CSS) applied over the top. Very few users would ever see the page in this way, but it is a very convenient shortcut to get to grips with the hidden structure of a page.

Notice the order the elements appear in. How far down do you have to scroll before you find the first piece of useful content? Note the hierarchy of headings on the page. Is there a clear relationship flowing from one section to the next, and does the basic styling that remains (e.g. bold, italic, underline, bullet points) still make sense in relation to the content?

Thinking about the “naked” structure of a page can help improve your work in many ways, not just in terms of accessibility but also search engine optimisation, page speed performance, maintainability and general usability. Remember: the wallpaper might make a nice first impression, but if the foundations are crumbling the customer will find out sooner or later!

The changes made by the code above are only temporary, so to restore the styles simply reload the page.

Congratulations, you made it!

How far did you get? Which part of the challenge did you find most difficult?

Although they may seem trivial, all the challenges above tie into real-world web accessibility guidelines – including some of the most common mistakes that we see at Appius when we’re auditing third party sites. Hopefully even this short experience has given you something to think about in your own work.

If you’re interested in learning more then the WCAG website has a set of short perspective videos from people affected by some of the issues discussed. If you’d like to learn more about the accessibility then read our blog post on 'What's new in WCAG 2.2?' to understand more.  If you would like us to take a look at your own site then get in touch. We regularly provide accessibility audits for third-party sites and would be happy to help.

Now I‘ve got to go; the hairs on the back of my neck are tingling and I think someone’s just published an image without an “alt” attribute…