I Spent Two Weeks Writing an Accessibility Report for Brush Ninja

A few weeks ago, someone emailed me asking if Brush Ninja had a VPAT. It didn’t. I also didn’t know where to start - but since a lot of schools use the app, I thought it was worth taking seriously.

For anyone new to the term (as I was), a VPAT (Voluntary Product Accessibility Template) is a document that describes how accessible a product is. It isn’t a pass or fail test - it’s guidance that helps people, like schools, decide if a tool/ website meets their accessibility needs.

Getting Started

When I first opened the template, I’ll admit I felt overwhelmed. There were rows and rows of criteria, and I wasn’t sure how to tackle them. Eventually, I took a deep breath, made a hot chocolate, and started going through each one - slowly, methodically, one item at a time.

I’ve always tried to make Brush Ninja accessible, but I’d never done a proper audit. A lot of the answers were easy - things like Supports or Not Applicable. Others needed more attention.

Sometimes I could have ticked “Partial Support” and moved on, but I decided to fix the problems instead. If I was doing this, I wanted to do it properly.

The Changes I Made

While working through the VPAT, I ended up improving quite a few things:

  • Better focus styles. Making sure it’s always clear which part of the app is selected.
  • Accessible modals. The tab key now locks focus inside the modal and returns it to the button that opened it once closed.
  • Improved file uploads. They now look good, support drag and drop, and work with a keyboard. (CSS :focus-within was a lifesaver here.)
  • A rebuilt animation timeline. The keyboard focus order now makes sense, and the selected frame is obvious.
  • Added Captions to all user animations. The Brush Ninja gallery is controlled by me, I download videos from social media and re-upload them to the gallery. I went through and added descriptions of the animations to every one.
  • Skip Navigation Link. A hidden link at the top of the page that becomes visible when focused. I used to add these in WordPress themes, they allow keyboard users to skip straight to the main content.

None of these were huge changes on their own, but together they made the app feel smoother and more consistent - not just for accessibility, but for everyone.

I have now made a public accessibility statement for Brush Ninja which you can read on the Accessibility page. You can also download the full VPAT document there if you’re interested in the details.

Reflections

Writing the VPAT was a really useful exercise. It forced me to look at Brush Ninja with fresh eyes and consider details I’d taken for granted.

I’ve also learned a lot about accessibility best practices along the way. Things like ARIA roles, semantic HTML, and keyboard navigation are now much clearer to me.

Why It Matters

Accessibility isn’t just about ticking boxes. It’s about making sure that anyone - whether they use a mouse, a keyboard, or a screen reader - can create something. I’ve long understood that accessibility is important and not just for people with sight deficencies. Motor impairments, cognitive differences, and temporary disabilities/ impairments all play a role in how people interact with technology.

Brush Ninja is used by classrooms all over the world. If this work helps even one more student express themselves, it’s worth every minute.

Resources

If you’re thinking about doing your own accessibility review, these tools helped me a lot:

  • WAVE Evaluation Tool – a quick, visual way to spot common accessibility issues.
  • Axe DevTools – a browser extension that finds more detailed WCAG problems and gives clear suggestions for fixes.

Both are great starting points if you’re new to accessibility audits - and just trying to get these scores as high as possible will make a big difference.

How was it for you? Let me know on BlueSky or Mastodon

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

Related Posts

30 Jun 2007

WordPress tips and tricks – Custom Page Templates

Some time ago I posted the first of my tips and tricks for WordPress, and I thought it was about time I posted some more so, to start things off, here is a short tutorial on custom page templates in...
03 Aug 2018

What Non-Disabled People Get Wrong About Accessibility

I have thought quite a lot about accessibility in recent years. I am definitely not an expert, and I am sure there’s a lot of areas I could improve, but I always strive to make my projects as accessible as...
25 Jun 2018

Brush Ninja

4 years ago I uploaded a video of an animation creator website I was building called Brush Ninja. Then mostly forgot about it. A video of the original version of Brush Ninja from over 4 years ago. The project was...
20 Jul 2016

Empathy in Web Design

I wasn’t able to make WordCamp Europe this year, but they’ve been really quick at getting all of the talks online, and so I have been watching some of them – and this one stood out.Morten Rand-Hendriksen is an experienced...
13 Jul 2009

Fussing over the (web design) details

Having spent the last couple of months (on and off) messing around with the new Binary Moon design I am now at the stage where I want to say it’s finished and move on to something else.There’s a well known...
27 Feb 2013

Designing Perfection – A Waste of Time?

I know it’s a little bit old but I read an article on Dustin Curtis blog recently about how perfection is a make or break element of a performance or product – and craftsmanship has been lost… and I don’t...