Jonathan: At Hassell Inclusion we know people are creating sites and apps at a faster rate than ever right now. But accessibility audits have always taken time. You ask someone to look at your site. Then two weeks later you get a huge document telling you all the things you’ve done wrong. You then need to try and understand them all, before getting them into your bug tracking system so your team can try and fix the issues. That’s useful. But it’s not as agile as many organisations need. So we created Live Audits, where our auditors spend a few hours working through the key user journeys of our client’s site or app. That happens live with their team over Zoom, demonstrating the issues we find. To give you a glimpse of what we can do in a Live Audit, I’ve asked Rob and Jon to give you a quick demo. And, just for the demo, we’ve broken our website’s accessibility, to illustrate 3 common problems, how we’d find and demonstrate them in a Live Audit, and help you to fix them. They’ll look at colour contrast that impacts people who are vision-impaired, mark-up of headings for people who use screen readers, and visible focus for keyboard users tabbing around the page. Over to you Rob.
Rob: Okay, so having a look at the site here, I can see there’s an issue with the navigation colour here at the top so let’s… let’s have a quick look and we can check this with a tool in Chrome… So let’s just check the contrast of that blue against white we can see it’s 2.16
Jon: Rob, quick question what should be the contrast level for that?
Rob: So we’re looking for a contrast level of at least 4.5 to 1 for any text against a coloured background. So just looking at the stylesheet here let’s just change that blue to black, and then check it again let’s have a look now… We can see it’s up to 21 to 1 now which is great.
Jon: What about the headings?
Rob: So I’m using ChromeVox screen reader here… so if I jump to this one
Screen reader: Our latest in thought leadership, heading 2
Rob: It’s announced as a heading 2. Let’s have a look at this one…
Screen reader: Empowering organisations globally to embed digital accessibility, article
Rob: So it’s announced as an article. I’d expect that to be the main header of the page. Let’s have a look to see what’s going on… So we can see here , rather than a heading, it’s been marked up as a P tag. So let’s change that to a heading 1, and try again…
Screen reader: Article, Empowering organisations globally to embed digital accessibility, heading 1
Rob: Great. That’s now a heading 1.
Jon: Great Rob. Now we’ve done the home page, what about if someone wants to contact us?
Rob: OK. So looking at the contact us page here if you’re just using a keyboard you want to know exactly where you are. So at the moment I’m in ‘Enter your name’ input. If I start tabbing I can see the cursor there in ‘Phone number’ and then nothing – I can’t see that I’ve landed on the select input. So here’s a little tweak that I made, adding a border to the select just to give you an example of how this could work. So you can see the cursor now: my name, email, phone number… and when I tab onto the select, we’ve added a 5 pixel green border on to that. And this is something that we would look to introduce onto to all our inputs. You can obviously tweak the design to suit your site and brand.
Jonathan: So that’s Live Audits. I hope that’s given you some understanding of how they can help you improve your site or app’s accessibility. If you want any more information please find it on our website. Thanks so much for watching
