The 10-Minute Web Accessibility Audit

[Oliver]
Hello everyone, and welcome to today’s webinar on the ten minute web accessibility audit.

My name is Oliver Emberton, I’m the CEO of Silktide, and this is probably going to be the quickest and most direct webinar you’ve ever seen. I certainly hope so. Our intention is very straightforward. We are going to help people test their accessibility with a lot less work.

So I’m assuming two things about you. The first thing I’m assuming is that you care about accessibility. If you don’t care about accessibility, this probably isn’t going to be too compelling to you, and I’m afraid it’s not the webinar to teach you why you should care. The second thing is that you don’t have enough time. I think this applies to pretty much everyone on planet Earth right now, but I’m going to assume it for you specifically.

You want to do more with accessibility, but you simply can’t find the time to do it. What are we going to do today? Well, we’re going to look at four main areas and we’re going to help you understand how you can test for those things with a lot less work than you may have needed in the past. Let me show you.

So firstly, we’re going to talk about motor impairments. These are things that essentially affect someone’s ability to operate traditional hardware, such as a keyboard or a mouse or touchscreen. We’re going to look at visual impairments, which generally affect someone’s ability to see something, whether it’s as extreme as they are blind or whether it is as simple as they need glasses to use a computer.

You may be surprised at some of the things that come up. We’re going to look at cognitive impairments, which is generally your ability to understand or process information. And lastly, we’re gonna look at auditory. Now, these are not all going to get equal weight. Visual and motor in particular are going to be tested more rigorously. Auditory is often, for most people, more of a checkbox and only applies to some sites.

Right. That’s enough of the preamble. Let’s get into it. So for the majority of today, I’m going to be looking at live websites and I’m going to be showing you what we’re going to do with them. So the first example I have here is probably familiar to many of you. gov.uk is a go-to standard for how to do pretty much everything right in accessibility.

I am going to have the tiniest bug to bear that’s incredibly minor later on, so stay tuned for that. But basically, if you want an exemplar of how to do this properly, you should probably check out this website. It’s great. I’m also going to contrast it with a different website, which is Fake University. Now, Fake University is a complete— you can probably guess, fake university, but we have created a deliberately bad website that is riddled with accessibility issues.

And it’s useful for demos like this because we don’t like getting sued by people who have real problems. So we’ll dive into that later. The other thing I should point out is I’m going to be installing a piece of software, which I would encourage you to follow along with, which is the Silktide toolbar. I’ll show you how to do that and how to use it later on.

Anyway, so let’s get started. I mentioned earlier on the first of the four areas to concern was motor impairments. Now, motor impairments could be a very wide reaching area and it covers a lot of challenges. I just want to give you a quick feel for what it actually means. So imagine that, for whatever reason, you couldn’t use your traditional input mechanisms for your computer.

So, for example, you couldn’t use maybe a keyboard or mouse or trackpad or touchscreen, whatever it is that makes sense to you and the technology that many people are used to. Let me give you some examples of what that might look like. So if you haven’t seen these things before, a mouse stick is an example. This is a technology that can be used to operate a computer literally through a stick in your mouth.

Or you may have heard of things like sip-and-puff. These are devices that enable people to control a computer essentially through slipping and puffing into a tube. These may seem extreme, and indeed they can be, but they are examples of assistive technology that enable you to operate a computer but in a fundamentally different way. So you can’t necessarily take for granted that someone can move their hand around and click on your button.

You have to think of the way your website’s operated differently. What does this mean? Well, in practical terms, it means you should learn how to use your computer with a keyboard. So what I’m going to start off by doing here is very quickly show you how that works, because it’s extremely easy, and how you might apply that to real websites.

So what you’re gonna need to do, you need to be on a web page like this, and I’m just going to start by pressing the tab button with my browser selected. And if I do so, you’ll notice it selects— I don’t know if you can see that in the middle. It selects different areas of the page. And as I continue to press tab it steps through the page. And I can then press enter in order to go into a page and I can press backspace to go back.

So that is kind of the absolute barest minimum you could possibly need to know. But you can simply use tab to step through things, and actually you can use— if you hold down shift, shift and tab, to go back. Now, this seems kind of elementary and yet it actually hides a lot of profound insight into how most websites are built.

This website is built very, very well. So then if I only have that control, I can search, and that’s the first thing I see, or I can go to the menu. It then allows me to go through the key links that they’ve made very easy to access. The most popular things are right at the top. And then to dive down into a more nuanced areas.

And if I keep stepping through things, I can eventually get through to, well, anything on the page. But they’ve done all of this where we take it for granted. If you take a website that doesn’t do this correctly, what it will do— you’re actually gonna have to strain to see this —is if I press tab here… Actually, sorry, start again.

This page has been used, let me load it again. There we go. The first thing that loads is biological sciences, which is kind of random, and if I press tab again, it’s economics. If I press tab again it goes back here, press tab again and it goes here. So notice how this is kind of immediately not in a logical order, right? This is kind of confusing.

It’s not what you’d expect. You’d expect— or probably want —to go to the navigation first, or maybe explore courses, or search. And then if I continue to press tab, eventually, I can’t even see what’s selected at all, because this website hasn’t accommodated for that. Now, this is like a core principle of accessibility. You want to be thinking about how people are not the same as you.

You want to think about, If you were in their position, what might your experience be? And as much as possible with motor impairments, the easiest way to do this is simply to try using a keyboard, because even though it’s not quite the same, most of the things that you will find with assistive technology are analogous to this. So if you can use a keyboard to navigate a website, you have a massively, massively higher chance that standard assistive technology will work in the same way on your website.

Right, now, I mentioned earlier on there is a Silktide toolbar. This is something that we are quite proud to have announced and launched today for Global Accessibility Awareness Day, and if you haven’t already got it, you really should go to silktide dot com forward-slash toolbar and it’s a free extension for Chrome and Edge. I already have it installed, so there’s not really much for me to do here, but you literally just click a button and add it to Chrome.

It’s that simple. Now I’m going to show you here how it can help with what we’ve just looked at and kind of accelerate you a little bit by providing awareness of focus order. Let me show you what that means. So once you’ve got the toolbar installed, you simply click on this icon in the top right. And then you’ll see there’s a whole range of cool tools.

We’re not going to go through all this today, but we are going to cover four them, and I’m going to go into focus order, and focus order simply shows you what the navigation will be like if you step through it with your keyboard or other assistive tech. So in this case, I can immediately see going through one, two, three, four… Kind of stepping through this page in what appears to be a very reasonable, logical order.

And that’s very obvious. You can see immediately what’s going on. That makes perfect sense. But if I went to my other website earlier on, Fake University, and I did the exact same thing and hit focus order, you’ll notice it’s a scrambled, jumbled mess. You’ll see that it starts here in the middle and it goes to here and it goes back here and here and it gets up here.

And this is exactly what you’re trying to look for. You’re trying to identify these kinds of problems because this is the classic mistake that many websites miss. The other thing, of course, that they might miss is they don’t even have this tool. They may not even have the ability to focus the things that you need on the page.

So you may not even see the lines, or you may see lines missing key functionality, like maybe none of the news articles on your site are tabbable to, for example. The great thing about this check is you literally just hit focus order and then you can immediately see it and you can get used to eyeballing this, just looking at it and going, okay, that looks good.

Or, clearly we’ve got work to do. Okay, so moving on, let’s take a look at visual impairments. So visual impairments, what are they? Well, firstly, it’s any kind of reduction or potentially elimination of sight. So, for example, at the most basic level, you can imagine someone, for example, is short sighted, but there’s actually an almost infinite array of ways that your eyesight can be impaired and there are specific key accessibility considerations behind those.

I’m just going to give you a couple of examples. And again, to do this now, I can use my toolbar. So we have a tab here called impaired vision, and this is designed to help you empathize and understand with many of the common visual impairments and indeed use them to actually test your website more effectively. So let me give you a few quick examples.

So the first one, which is what I recommend using the most often to be honest, is cataracts and myopia. Essentially, this is blurring your vision. So the most extreme level, let’s just dial that really up. Obviously there’s essentially no legibility here. You may not understand the definitions of visual impairment, but essentially, if you are legally blind, it is that you cannot read text.

And one of the things you can do here is you can kind of see how that could work on a continuum from a mild impairment all the way up to, “I simply can’t see what’s going on.” Now in this case, what I recommend is sticking with a level of 20, which is our default. What this does is impairs a reasonably severe level of visual impairment that gives you a natural appreciation of why so many other accessibility requirements actually matter.

Let me show you. So here on this site, if you’re paying attention, this low contrast, you’ll see this word “courses” here. This word, courses, is written in a kind of a pink color, it’s in a thin font, and it’s over a darker version of the same color. Now, this is moderately hard for me to read personally, but I can read it and I might think it’s okay.

But if I was to simulate this level of visual impairment and scroll down, you’ll see it’s functionally illegible. I can actually read, “Join us on our open day, a gateway to your future.” But then this is practically impossible for me to see, and that’s one of the reasons why this matters. It’s also even clearer when you go down here to, say, light-grey text, right?

So this is a common design trick is where someone goes, I’m going to write light, faint text over a different background color because it looks cool and it looks trendy. And I get that. But at the same time, if your vision is impaired, that text is drastically harder to read than a simpler, higher contrast level of text would be, like this.

And incidentally, if you contrast this, let’s take a look at gov.uk and see how they’ve done it. So we go to impaired vision and they’ve done a pretty great job. They’ve stuck with either a very legible blue or very legible black or a very legible purple for visited links. And although it is hard to read, it is possible to read with that level of impairment.

Now there are more things that could happen to your eyesight. I would not suggest that you need to stimulate all of these on a day-to-day basis, but they are interesting to explore just to gain an appreciation of the kinds of things people may experience on your site. So glare is basically light. Yellowing… There’s a variety of there. This is particularly worth understanding. A loss of peripheral vision means that you have essentially visual tunnel vision and you can only see within a limited field.

And the reason this matters is because if your design has things in it like tables and you say, you have text over here and you have text over here and there’s no continuous line joining the two, you might be reading something over here and then reading something over here and you can’t tell which part joins which part. So this is useful for testing that, but otherwise I would focus most of your energies on this.

Right. One other additional area to consider there, by the way, is color contrast. We provide a contrast checker which is simply a tool for checking any two colors. So I can pick a color, we can pick a color, and it will tell me if they contrast sufficiently for WCAG. And also you can use this to— In fact, let me show you a quick example of that. Sorry, the site is deliberately so bad that it is hard for me to find.

Say you’ve got something like this. Say you’ve got a colored text over, in this case, a colored background, simply go to color contrast, pick the first color— oops, hello. That’s the background. I’m getting the wrong way around. But whatever, background and foreground, and there you go. Not unsurprising that you can see that that is insufficient to contrast. So it can be useful when you’ve got more complex things like text over images and so on.

Anyway, let’s come out of that. Right. Next up, cognitive impairments. So what are cognitive impairments? Well, essentially think of it as anything that impairs your ability to think or understand. So this can be as simple as the language the website is written in is not your native language. We often don’t think of it like that, but that is a form of cognitive impairment from an accessibility standpoint.

It’s also a convenient analogy to actually understanding the overall thing you want to think about, which is you want to think about what would this be like if it was harder for me to process or understand? Now that’s an easy thing to say and it’s a harder thing to experience. But what we’ve done is we’ve added a simulator which was not perfect, gives you some kind of feel to that.

So let me quickly show you. If I open up the toolbar and click on dyslexia, what this does and this is not a perfect simulation of dyslexia for anyone who knows, it’s more the feeling to some extent of having a page that’s harder to read. But what this does is it scrambles the words on the page. So you’ll notice these words here, and what it’s doing is actually keeping the letters the same, but it’s also keeping the first letter, it’s capital. But it’s rearranging the order in which they’re written and it’s kind of moving them very gradually over time. So they’re slightly drifting. Now the idea of this is you can still use the page. If you look at it, I can be like, What’s that saying? “Open day” I can figure it out. It just takes me more effort.

Right? And once you experience a website, when it takes you more effort to use it, you start to appreciate all of the useful cues that enable you to avoid that effort in the first place. So what do I mean by that? I mean things like when you’re looking at say, this does this image here help me understand this text here? Because I can see the image.

I can always see the image in this case, but I don’t necessarily find it easy to read your text. So does the image support my understanding of the page? Does the layout support my understanding of the page? You know, I’m looking at this, and even if I can’t read the words, I can probably guess this is a search with a search box, even if I couldn’t read those words.

So this is just kind of a empathy thing. But you want to consider how your website would look and how you might want to improve it or accent it with design and in particular, icons or imagery that support your understanding of the page. And that could be as simple as choosing effective images to go alongside articles. But it could also be things like using effective icons or cues.

For example, these little dropdown carets helped to tell me this is a menu option and I know that when they click on it, it’s going to expand. Now, gov.uk, if I was going to them, and let’s use dyslexia… So things that they’re doing that are good, they’re using capital letters in certain areas to make things clearer. They’re using very clear and short text descriptions.

The only thing that maybe and it’s honestly, it’s a bit of a debate here, maybe could be considered maybe slight visual affordances. They have these icons here for “Featured” and the trouble here is, I mean, that again, this is I’m really kind of being overly critical to something that’s generally doing a spectacularly great job. But you could argue that these icons don’t particularly support the feature descriptions.

And if I was only able to look at the icons, I probably would have no idea what, say, this generic document icon or maybe this suitcase would actually refer to. Anyway, moving on. So, auditory. Now auditory simply is any impairment that affects your ability to understand audio, which is actually the easiest one for most of us to understand because almost everyone here has tried to use their phone in a loud environment or in an environment where it’s inappropriate to make noise.

And so they’ve turned sound off on their devices and we already know how you handle that. You handle that through the use of captions or transcripts. Now, I have an example here. I believe it’s the “About” page. So this is an example where all you really need to do is find the audio and video in your site and you need to make sure that certain key requirements are met.

What are those requirements? Well, for video, you’re going to want captions. If the video is prerecorded, like in this example, you can look at, say, this is YouTube, and you can see immediately that subtitles and closed captions are unavailable. And this is a media accessibility failure. If there is important audio in the video, which in this case I happen to know from personal experience, this video has a voiceover, it has not been captioned and therefore this video is categorically failing.

If you have live video, the requirement for this becomes WCAG AA, which is still very important, but is a lower level of importance than providing captions for prerecorded video. And then for audio, the requirements are slightly different because if you have audio only, so say you have a podcast, prerecorded, it requires a transcript. Of course, you can’t have captions for an audio recording like a podcast, but you can have a text equivalent.

So you might have, for example, a link to an audio file here and you have a transcript below it. For live audio that becomes a AAA requirement. So that’s to say, much less… Well, for most people on this call, if you’re targeting a legal requirement, the requirements tap out generally at level AA. So there’s level A, level AA and level AAA.

And if that’s you, then having transcripts for audio that is live is not a requirement. It’s just something that’s advocated for and recommended. A few things very quickly to cover on that. Many people use AI nowadays to do captions, at least in my experience, it still isn’t quite there. Our company, of course, is called Silktide and it’s quite common to find AI transcribe that as something embarrassing like “silk ties” or “silk tied” and then many other versions of that.

And for that reason you should always review any AI-generated transcripts manually before publishing them. Nonetheless, it is very useful to have AI to help you, and again make sure that they’re spelled correctly and actually makes sense. You should actually review them again as a human. So anyway, that’s the four main areas. I want to cover one final thing and just kind of show you a few of the extra bits that are available to you in this toolbar.

The thing that you are going to find very useful day to day when you’re doing this is the simple accessibility checker at the top. And the reason for that is because it’s automated. And what this automated check will do is it will help you find many other areas more quickly than you would be able to test for it manually.

So as an example, early on we saw that I used keyboard navigation to go through the site. What I didn’t see when I did that was a skip to content link. Why does that matter? Well, let me show you gov.uk and what they do properly, right? So if I’m pressing tab here, they have— Sorry, start from the top of the page. There we go.

They have a skip to main content link and this is widely considered best practice. This enables me to simply skip down to the rest of the page. So if I’m reading an article and I have a skip to content link, it allows me to bypass all the navigation, it allows me to get into the meat that I care about. The absence of this typically requires, so like here, typically requires I step through every link on the page.

Actually I can’t do it because this site’s so bad. Let’s do something else. Say BBC News, right? So I have to step through all of these links, which there might be hundreds, in order to get to the actual content I care about. So the presence of the skip to content link is super important and it’s one of the many things that you can get for free when you just go into our accessibility checker.

It will detect that. It will tell you if you’re missing it. It’ll also tell you how to fix it. So if you click on this, we’ll give you code examples, we’ll talk about it, we’ll give you justification, and so on. And this goes on, there are over 200 accessibility checks. We’re covering WCAG 2.0, 2.1 and 2.2 all the way up to AAA.

And whilst there’s no way for an automated scan to cover every single part of your website’s accessibility, we do cover an awful lot and we make it very easy to dive into any of these and find out things that you may have missed. To give you one pretty quick example: text contrast. Earlier on, I pointed out here that this link is low contrast.

Well, if you click on it, you can see that’s exactly the kind of thing that it will detect for you automatically. And you can continue to click through here and explore all of the other aspects of the page that are falling short. So for that reason and so many more, I would strongly recommend that you download the Silktide toolbar. It’s completely free and it’s designed specifically to make manual testing like this a thousand times easier. Right.

Just going back to here. So we looked at a few areas, we looked at checking motor impairments and how would you test for this, you’d look at the focus order check and you would actually use your website with the keyboard. This typically can take 1 to 2 minutes. It doesn’t have to be hard, you’re just going to look at a page, you’re gonna wanna use tab to navigate it.

You’re gonna wanna make sure the key areas work. And then a review of the focus order. Is that comprehensive to the nth degree? No. Will it find most issues, particularly with navigation? Yes. Which is why you should always do it. Visual. You should look at simulators. The primary simulator you want to look at is what I showed you, the visual impairment for blurred screen.

What I didn’t show you is we also have a simulator for colorblindness, which works in much the same way. And we ran out of time for it today, but there is a full screen reader simulator that enables you to look at the experience of using your website in a screen reader, which is something profound that we don’t believe anyone’s ever done before.

And we’ve made it freely available as part of our toolbar. Cognitive impairments. We looked at a dyslexia simulator. Again, it’s not a perfect simulation because there is no perfect simulation of a full array of cognitive impairments, but it does give you some appreciation of what it’s like to have your understanding of a website challenged. And mostly I’d encourage you here just to develop empathy, to think about what would happen if this was harder for me to understand or make sense of. How can we make it easier to understand?

And then auditory. You’re just going to want to review the video and the audio on your pages, and make sure that they have, where appropriate, transcripts or captions. And lastly, running that automated scan is one button. You simply press one button and you get a ton of information and it’s easy to dive into and it’s a lot of additional value.

Okay, so if you didn’t get it earlier on, that was silktide dot com forward-slash toolbar. That’s where you can download that. I’m going to hand over now to Q&A. So if any of you have any questions… Jess, I believe you’re still on the line. If you have anything there, feel free to read it out.

My name is Oliver Emberton and you can follow me on LinkedIn.

[Jessica]
We have one so far. They were asking whether the accessibility checker works on PDFs.

[Oliver]
Not at this time. So the challenge for PDFs and a browser extension, as far as I understand it, we don’t have an easy ability to inspect the contents of a PDF in your browser because it’s not actually looking at a web page. I may be wrong there to be fair, I think if I understand correctly, Chrome takes PDFs and it turns them into HTML.

That’s kind of its own renderer. So whether or not we can actually access the original file, I don’t know. We have PDF testing tech at Silktide that we use in our main product, but it’s not part of the free extension that you just saw. So maybe an interesting one to look in later. I’m going to make a note. Any other questions?

[Jessica]
Yes. They’re starting to roll in, now. Do you have any specific tips for screen readers?

[Oliver]
Yes, I actually regret that I didn’t go through it. If I’m being honest, I forgot to go through the screen reader. So I will very quickly show you this because I think it’s worth seeing. There’s a screen reader tab here.

[Screen reader]
Web Area.

[Oliver]
Now I’m going to mute it. You may not hear this at the moment, but if I step through this…

[Screen reader]
Link. List with six items.

[Oliver]
So that’s going to become very annoying pretty quickly. So I’m going to just turn off the audio. But what we’ve done is we’ve provided a simulator that is designed to kind of 80-20 the experience of using a real screen reader without the difficulty, if you haven’t had it already, of installing one and learning how to use it.

So this is very much kind of like a Fisher-Price simple screen reader, but it gives you the core experience. So you can step through aspects of a page one at a time. You can use keyboard shortcuts, by the way, to do this, so now I’m using my cursor keys to step through these. And you can interact with aspects of the page. And I have very much a similar experience from using a screen reader.

The primary difference is we actually give you a transcript to actually see what was read out and you can review what was read out and see if that’s actually what makes sense to have on your site. There’s also a whole ton of additional controls. So if you want, if you’re familiar with a real screen reader, you’ll know you can usually use keyboard shortcuts like H to skip to the next heading on the page.

D to skip to the next landmark. We provide analogs to all of those, so I could, for example, press H here to skip to the heading, heading, heading, and so on. Now the idea of this, and to get to your kind of question as to what should you look at when testing a screen reader? So the first thing to think about is that you’re experiencing a page in a linear fashion.

Okay, so this is similar to earlier on, when you’re using keyboard navigation, you need to think about what is your page like if it’s read out in sequence and then what are the key areas that people would want to skip ahead to if they were doing that? So imagine if you had a book and it didn’t have page numbers or a table of contents or an index or any other way to search the book, you just had to listen to every word in the book, read out one at a time, like an audio file.

That would be very difficult to work with. And if you were providing some assistance for someone reading a book, you would provide like logical, like a table of contents, so they could skip to headings and skip to other areas. It’s the same with a web page. You want to think about what parts of a page make sense to be able to jump around and do that.

So if I was to look at a page like W3C here, and open this toolbar, you actually click on headings. I didn’t show you this either, but it will show you where those headings are, so heading 1, heading 2… Yeah, heading 2 again. So you can see that this page is pretty logically structured and it’s easy to jump around.

And likewise you could do landmarks which shows you the areas of your page: navigation, main, and so on that you can jump around, and screen readers provide kind of shortcuts to jump around these areas, which is why that’s so helpful and it’s why it’s useful to make sure that they make sense to you on your site. But yeah, the TLDR is really you should use a screen reader simulator and you should explore using your site, get a feel for what that’s like. Develop sort of a natural understanding of it.

And then from there you want to make sure that you’ve got logical headings. Your focus order’s in the right order and you want to take care of your landmarks. Probably my top priorities. Okay, that was a lot. Next question?

[Jessica]
Do you know of ways you could show impairments when it comes to like Microsoft 365, you know, like Office?

[Oliver]
Right. I actually don’t use Office 365 so I’m probably out of touch on that one.

I’m going to guess, is it web based software or is it a desktop software? I think it’s both, isn’t it?

[Jessica]
They do both.

[Oliver]
Okay. I mean, in a— Oh sorry, but you might actually be referring to accessible documents, is that right? As opposed to actually using the product itself?

[Jessica]
I’m gonna guess and say it might be about the documents and like how you would be able to show what the experience is like.

I didn’t know if you knew so I…

[Oliver]
No, so, accessible docs are always an entire much longer webinar in their own right, and we’ve actually done a couple of them, say for PDFs for example. But generally speaking, Office is increasingly well designed to help you in that area, so the built in tools, I know this for, Word for an example, are actually pretty good, not perfect, but they definitely try and help you work through things like providing alternative text and so on.

Generally, the further you go into complexity, the bigger problems you’ll have. So for example, if you’re going to use a complicated table, if you’re going to use a complicated layout, if you’re going to do things like text over background images and so on and so on, the further you go into that, the harder it gets. Doing what GDS has done with their website, many people might find that boring.

But the thing about that is that that level of plainness and simplicity is almost accessible by default, and that’s one of the reasons it’s so accessible. It’s just so clean and minimal. And I’d say the same approach applies to documents. But sorry, without a bit more context, I’m going to struggle to answer that further, I think. What else have we got?

[Jessica]
If you change the settings, would the tool highlight which videos need to be translated into BSL for example?

[Oliver]
At this time, there are areas which we can’t test in the free toolbar for video. So for example, I know, if we go into “About” to this video I showed you earlier, we can’t currently detect that this video is omitting subtitles, closed captions, because it’s embedded in YouTube and we don’t have access to it.

That is something that we’re actively researching and seeing if there’s ways we can do. For some other videos, we can detect it. So if we embed the video natively, in most cases, we will know that you are not using, for example, properly defined captions. It gets trickier. There are areas where, imagine I had a video, it didn’t have captions, but then below it, it had a link to a transcript.

That’s currently an area where only human can kind of make sense out of that. AI’s advancing pretty fast. I would be surprised if that isn’t something that can be automatically checked in the near future, but at least right now, that’s not something we can fully, reliably determine automatically.

[Jessica]
Does the plugin generate a report or an export that you can send on?

[Oliver]
No. So the toolbar as it stands, just to give a bit of context, so some people on this call may be in fact our customers so I’ll just give you a feel. This is free and we’re giving this out because there are a number of free checkers out there, but we’ve not been satisfied by the quality of them. And so this is something that we can sustainably allow the whole world to use ad infinitum.

And we actively encourage them to do that. We do have a paid product that does exactly what you’re describing. It does allow you to get, for example, to test all of the pages in your site and to create reports and dashboards and email them to your staff and so on and so on. So that’s definitely a thing we do.

I mean, if you’re interested, just click this button at the bottom. But yeah, the free checker is very much designed to work standalone inside a website and just let you get a quick feel of your accessibility in roughly 10 minutes.

[Jessica]
Awesome. From your experience, how important are ARIA labels in practice and can they be overused?

[Oliver]
So ARIA, for those of you who don’t know. So Aria, I’ll just Google it so you can see— Oh, of course it’s going to give me the Las Vegas hotel. No. Let’s just put accessibility in there. So ARIA is like a standard for extra information that can be added— this is not a great example —that could be added to existing HTML to make it accessible or in theory to make it accessible.

So actually the example they’re given here is a progress bar, and they’ve added these extra attributes to tell you that the progress bar is 75% loaded. There’s a whole ton of ARIA, there’s literally hundreds and hundreds of tags. And it could be a bit much and it can be abused by people who have got the idea that to make something accessible, they just have to add ARIA to it.

Generally speaking, you very rarely need to use ARIA. There are equivalents, often better equivalents, built in to regular HTML. ARIA was kind of originally added to patch a lot of gaps, and many of those gaps have increasingly gone away with time. ARIA label is one that can be used effectively. So the gist of it is, you simply, you take something like, let’s take this button or something.

You could give an ARIA label to this that would be longer than the word search. I don’t know why— Actually I can tell you where you’d do it. You might do it for something like this. So if you’ve got an icon here, you could use aria-label=search. And then the idea would be, if this was being read out by a screen reader or assistive tech, instead of saying, you know, that it’s got an icon in it or whatever, which is not very helpful, it would actually say “search” which is what you would want as an actual experience.

So that is a good example of where ARIA label could be used. Ironically, I know for complicated technical reasons they didn’t. They actually did this. They actually hid text in there if you wanna get— They actually hid the text in there with CSS, and that’s how they did it. But as a general rule, that would be a good example of using ARIA label.

If you’re using ARIA label everywhere on your site, maybe something is wrong, but I’d have to look at a specific example to get into advice on that.

[Jessica]
Oh, let’s just give them the ARIA maxim. It’s the, “Don’t use ARIA unless you need to. Always use it when you need to. You’re doing it wrong.”

[Oliver]
I like that, that’s really good. Yeah, I’m going to steal that one.

[Jessica]
Do you have a toolbar for Firefox?

[Oliver]
Not at this time. So the simple fact of the matter is we, we have to prioritize where the audience is and Chrome— Building the Chrome extension gets us Chrome and Edge, because Edge uses Chrome extensions, and those two browsers are in the kind of like 80% roughly of people.

We have to do quite a bit of work to get it working in Firefox. It is going to happen. It’s just obviously we focused on launching to largest audience at first, but yeah, it is on a road map. It’s going to happen one day and for the same reason we’re also going to support other non-English languages in the future.

But right now it’s English only.

[Jessica]
VoiceOver and NVDA have a links menu for the rotor, that’s good for scanning poorly named links. Does the plug in have, or we will be adding the function?

[Oliver]
You know what, at this time we don’t have links. That is a good one to add to our list. So we have just about everything else. So for example you can look at, you know, I showed you headings, or my favorite actually is alt text.

I didn’t show you this, but it’s really great. If you’ve ever used a website and you want to find the alt texts. Let me show you this. So like this is BBC News again. It’s my go-to news site. Then I go to alt text, look at this, we highlight and show you the alt text on the images as you scroll through, which is so useful for seeing where they’re in place.

So if you’ve ever worked with any other tool for doing the same thing, we think this is a great way of doing it. And likewise, when you’ve got something and it’s missing, it makes it super clear because you’ve got the word missing highlighted over the image. But yeah, we could easily add something like that for links. So that would be the way of reviewing them all in one place and checking when they’re not well labeled.

I like that idea. I’ve written it down.

[Jessica]
It’s not in the automated accessibility checking?

[Oliver]
So we do— Yeah actually that’s a good point. Yeah. So if I go into here, we do have an automated check for that. It’s just we don’t have— So I think you’ll find the link purpose in this case— there you go, perfect. So yeah, we will highlight say the read mores on this page. So that’s where the link text is both repeated but also not particularly helpful.

Read more is very generic. It doesn’t help users understand what’s going to happen when they click on that link. And none of this incidentally is a link either, so this is, yeah, this is really important in this case. We do that, but I think sorry, my interpretation was it would be useful to have a screen like say this one which actually lists the links on the side so you can just quickly skim the text and go, Wait a minute, this is bad and maybe we could highlight the ones that are like this in isolation so you could process them in one go. But yeah, I like that as a feature request. Let’s get that added.

[Jessica]
For sites with promo banners at the top of the page. Do you have a recommendation for what ARIA landmark to use for that? If it’s sitting outside the main content.

[Oliver]
For the landmark, I’d actually… I’m trying to think off the top of my head.

I want to say a side, but actually I genuinely don’t know. I would I would have to research that. So yeah, this is a bad example. This is a terrible site. Yeah, I’m not— I would actually I’d be curious to see what gov.uk does. I’m going to— I can’t do it incognito. Let me just nuke their cookies because I think the cookies…

Yeah, just do that. I’m kind of curious. I know they have a banner here. I wonder what they’ve actually used. This is my real time diagnosis. Or does that go away? Oh, yeah. You know what? We actually dismissed that, I think when you come in here. So that’s not going to show. Okay. I’d be curious to find out what they’re using, because I guarantee GDS have probably spent some time figuring that out.

Role=”region”. Okay, that’s not obvious. Yeah, I wouldn’t have guessed that, but they probably have a good rationale for it. I’d have to do some more digging.

[Jessica]
What’s the most accessible website for children and young people? If you had to give an example?

[Oliver]
So I don’t have children. So. So I am uniquely poorly qualified to answer that question, I’m afraid. Sorry, I’d love to help, but I just don’t know.

[Jessica]
Can the tool highlight HTML code in dev tools? As in, areas where an ARIA role is used out of context or a label’s missing from a checkbox, things like that.

[Oliver]
So we do. If you’re looking at something like this, we do show you that we have a HTML of you here at the bottom, so let’s find…

Let’s go back into alt text, HTML, there we go. So if you’re looking at something like this, you can scroll down, you can see the source code, but we actually don’t use dev tools. It’s kind of by design, actually. We’re trying to get all of the HTML views in here. It might be useful to have a button that would also open in DevTools for people who want.

But failing that, what you can do, of course, is you can right click and inspect, and you will get the element in DevTools that way. Perhaps having a direct link in here would also be useful. So I’ll make note of that. I’m really just using this webinar to get good feedback product.

[Jessica]
Right? Give us new ideas. Gary’s left us a nice comment saying this is brilliant. I used to use your old simulator to show the impact of bad docs, but this is going to be so useful for teaching digital accessibility to staff and students.

[Oliver]
Wonderful. Also, another thing, by the way, sorry, if you haven’t noticed, I’m just going to show you, we’ve made this really subtle, but that’s Jess who’s talking right now. That’s her in the corner, and we actually put a bunch of Jess’s very helpful accessibility videos right in the product.

So if you’re curious about how to make images accessible, it’s one click link into there.

[Video]
Hi, I’m Jessica Chambers from Silktide—

[Oliver]
Which you should totally check out. But anyway, sorry, I’m just thinking of stuff, Jess I thought you’d enjoy that.

[Jessica]
That is one of the better videos! Does Silktide allow you to scan your live web pages to find a particular word or sentence or term in your web estate?

[Oliver]
Yes. Short answer yes. Outside the scope of today’s webinar, because we’re looking at our free tool. But yeah, the paid product has the ability to search for words, for phrases… You can even set up complex things like regular expressions. So you could, for example, find if a word was used and was followed by an apostrophe and an S and something like that. You can look for all sorts of things if you want to go there.

[Jessica]
But that isn’t the free extension. That’s available in our platform.

[Oliver]
That’s correct. So the free extension is purely focused on this kind of accessibility experience. But our paid product does include, among other things, policies which allow you to say, I don’t know, say the word “Fake University” say that’s your name. You might imagine other people could call it “The University of Fake” for example, or “FakeUniversity” is one word instead of two or whatever it might be.

You could actually define those kind of rules and then have them automatically checked. So that is something that we do, yeah.

[Jessica]
And we default check for profanity. Just going to put that out there.

[Oliver]
That’s correct.

[Jessica]
Oh, they said, great, we actually have your paid product, we need to go deeper into it.

Reach out to support. We will help you. I think that is mostly wrapping up what’s going on here.

[Oliver]
Okay, wonderful. Okay. Well, thanks a lot, guys. I hope you found this useful. This is the first of many webinars— Well it’s not the first it’s something like the fifth, actually, of many webinars we’re doing this year. There’ll be more to look forward to. So if you haven’t already, please subscribe. You will have the option to do so on our website and in your inboxes shortly.

Thank you so much. Until next time.

[Jessica]
Happy Global Accessibility Awareness Day everyone.