Jonathan: At Hassell Inclusion we know people are creating sites and apps at a faster rate than ever right now. So we’ve added in a quick new way of finding accessibility issues called Snapshot Audits. We spend a couple of hours working through the key user journey of our client’s site with their team over Zoom, demonstrating the issues we find. To give you a glimpse of what we can do in a snapshot audit I’ve asked Rob and Jon from my team to give you a quick demo. And, just for the demo, we’ve broken our site’s accessibility, to illustrate three common problems, how we’d find them in a snapshot audit, and help you to fix them. They’ll look at colour contrast that impacts people who are vision impaired, markup 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 color 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 Snapshot Audits. I hope that’s given you some understanding of how they can help you improve your website’s accessibility. If you want any more information please find it on our website. Thanks so much for watching
