Building an accessible portfolio website
Accessibility (noun) — the practice of making your websites usable by as many people as possible.
Welcome to my first ever shout into the void. I’ve written about making my portfolio website as accessible as possible, in hopes it might help anyone else starting out with accessibility. Over the last few weeks I’ve really been getting to grips with the nuts and bolts of accessibility.
Over 2 million people are living with sight loss in the UK (Source: NHS). 700,000 people are on the autistic spectrum (Source: National Autistic Society). 13.9 million people live with a disability (Source: Scope). Bad web design means an awful lot of people cut off from a fundamental digital resource and all the wonderful things it has to offer (including, obviously, my portfolio website).
In my previous jobs accessibility has often been someone else’s concern, at least when it comes to technical details — that clearly left me a little too complacent. After recently refreshing my website I realized I’d gone about the whole process focused on aesthetics and usability (for people similarly able to me), with accessibility an afterthought. Accessibility affects almost every part of a website, you can’t just tack it onto the end. So back to the drawing board I went.
Getting started: research, sketch, re-structure
My starting point was research (isn’t it for most things?): working out what issues users might face when using my site, and brushing up on the basics tenets of accessibility. I did this using:
- gov.uk’s delightfully simple accessibility posters
- Advice on Mozilla
- Reading guidelines from the World Wide Web Consortium
Then came wire-framing, a welcome relief after a lot of staring at screens. I did some basic sketches to work out what parts of my layout I could keep and what new things I needed.
Once I had a clear idea of the structure of my site (how many pages, what are they, how do they fit together), I suppressed any sadness at losing old designs and started breaking stuff up and moving it about.
Go over your content cynically
After restructuring my site, I turned to all the words and pictures, trying to be as skeptical as possible. Is everything written in simple language and short sentences? (Answer: probably still no, I’m still working on that). Does every image have alt-text so screen readers don’t just see a big blank space? Are buttons and links clear and descriptive?
If you can rope in a sympathetic friend at this point to help you review things then do. When you’ve read or seen something a million times you lose perspective on what’s clear. (If you can rope in a sympathetic group of friends, ideally a diverse group with different levels of digital skills, who can test everything throughout the whole process then you are very lucky, absolutely do it, and then send me all your friend's details).
Test as you go
Louder for the people at the back: TEST AS YOU GO! I cannot overstate how useful testing things out while you’re still working is. It can show you really quickly what might not make sense for people with screen readers, or sight issues, for instance.
To do some testing I installed two Google Chrome plugins:
- Open CC checker — a way to check the colours on your site, it gives you a clear ‘pass’ or ‘fail’ for whether the contrast between foreground or background colours is strong enough. If it’s a fail that colour will make it hard for people with vision difficulties.
- ChromeVox Classic — this is a very simple screen reader. It’s got terrible reviews on the Chrome extension store because you cannot turn it off and on — it reads everything, always. I got around this by installing it on a browser that uses a different Google account.
If you don’t have a Google account, or multiple Google accounts, and ChromeVox narrating your every move doesn’t sound like fun, there are other free screenreaders you can use. I’m a Mac user so I also used VoiceOver which is a utility included in the OS. I found this much easier to use than ChromeVox: it has simpler keyboard shortcuts and, sweet relief, an easy way to turn it on and off.
Testing things yourself is obviously no substitute for getting other human beings with different digital needs to test what you’ve made, but it’s a start.
Use checklists
Lots of websites and digital services offer accessibility checklists, they’re a good way to check you haven’t missed something fundamental. Here are two that I referred to:
- Wix accessibility checklist — explains key terms and concepts.
- World Wide Web Consortium — a more comprehensive checklist
Accept it’s not a quick fix
Even with a portfolio website — a relatively simple set of pages featuring just images and text — there’s no magic button to ‘make things accessible’. It requires commitment, knowledge and testing. I think I’ve got the basics nearly right on my website, but I know that there’s more I can do, and no doubt I’ll keep discovering more.
Sometimes it can be hard work, and make you want to through your computer out of the window (ChromeVox narrating undeterred as it flies through the air) if things aren’t working as they should. But imagine that sheer frustration all the time, trying to navigate a web that doesn’t take you into account.
