View the video on YouTubeDate of recording: 26/08/2020
Speakers: Julia Voortman, Customer Success Manager at Silkitide; Jessica Chambers, Technical Support Manager at Silktide; Rob Fowles, Head of Digital Channel Management and Ellie Westwood, Digital Channel Manager.
Video length: 57:20
Julia: Oh there we go. Yes indeed it is, yeah really nice to be here I am a Customer Success Manager here at Silktide. I'm just gonna share my screens so that I have got this up. Can you see that okay Rob?
Rob: Perfect, sorry I’m struggling to unmute myself.
Julia: That's okay so we're going to be doing a core session today on web accessibility specifically for content editors. I am one of the accessibility trainers here at Silktide and I’m joined today by my colleague Jessica Chambers so she's our Technical Support Manager and she's going to be able to help out with any questions that you might have toward the end of today's session.
I'm just gonna stop my video quickly. There we go. So what are what are we covering today? Basically we're going to take a broad look at accessibility as a whole but we're also going to focus on some of the key areas that concern content editors in particular.
Rob: Julia we can't see your screen.
Julia: Sorry guys, let me just see - back to share. There we go can you see that? Yes? Okay sorry guys. We're gonna be covering four types of accessibility talking a bit about for each one of those how they affect people and then what you specifically can do about it. It's gonna be a really really practical session so there's absolutely zero technical knowledge required at all. I mean I say that assuming you know how to use a computer. But basically this is going to be pretty easy going but nevertheless we're going to go pretty deep into a couple of different topics.
So just to frame the conversation very very quickly - what do we mean by accessibility? I'm sure a lot of you already know but a lot of people would describe it kind of like what we would see here so something you know web accessibility meaning that people with disabilities can use the web equally. This is actually it's a very valid description we're citing the W3C so they're the people in charge of the you know Web Content Accessibility Guidelines you know the main standard. So they know what they're talking about really here but we would actually argue that there's a slightly more nuanced and appropriate definition.
So the trouble is when people think about disability they very often think about one of these icons here right? So they think of somebody who's you know in a wheelchair or they're deaf or blind or you know, and whilst these are of course genuine things and it's definitely things we need to be aware of it's actually a pretty limiting definition for disability.
So we actually prefer to think of it more as on a continuum like you're going to see here. So today we're going to go through these four areas on the left so Hearing, Visual, Motor and Cognitive. But if you think of them as kind of being on a spectrum so you know ranging from permanent disabilities which are sort of the traditional things you would think of such as deafness or blindness through to temporary impairments which could be things that somebody has on a short-term basis so they may have broken an arm or they might have an ear infection and then finally on to situational impairments which are going to be things like maybe someone's in a loud room or they're trying to walk and use their phone at the same time.
These things in a lot of ways actually they mirror each other and we're going to see this as we go into a bit more detail how something as simple as being in a loud room is in many ways kind of equivalent to being deaf from the perspective of somebody who's using your website. So you know many of the same accessibility approaches are applicable in all these situations and another you know way to think about this of course is that because everybody experiences situational disability at some point in their lives, accessibility you know it really affects everybody.
So why does accessibility matter? You probably already know because you wouldn't really be here but very very quickly there are four main reasons.
Firstly, you're gonna maximize the number of people that you reach. So here's a photo we see not too often nowadays. Very remarkable how quickly that got dated. But one in five people approximately has a quote unquote you know traditional definition of a disability and that number is you know definitely a dramatic underestimation because the number of people who are affected by these issues as we just saw they don't just affect people with permanent disabilities but they also affect you know those experiencing situational or temporary impairments.
Secondly, it's something that's going to improve your overall user experience. So this guy here, to some extent, he's having a compromised situational experience and his usability of your website or your mobile app or whatever it is is actually going to be improved by the exact same measures that are going to help everybody else.
It's a legal requirement as of this September for all UK universities and other public sector websites. So that's an important one with some very small exceptions for very specific content types but as of September of this year it's a legal requirement.
Lastly, if that doesn't all persuade you really it's ultimately the right thing to be doing. This is something that actually really makes a measurable impact in the quality of life for millions of people and especially in the current climate with social distancing and people being a lot more reliant on the internet it's really never been more important.
So let's dive into the actual meat of today what we're going to be doing is we're going to be focusing on these four main areas and we're going to dive into each one and we're going to look at how they can affect people and also how they can affect in particular your work as a content editor.
So we're going to start with the easiest one we're going to work our way up to the hardest, and the hardest is actually probably about 50 percent of the work here but let's start off with something nice and easy and that's going to be auditory.
This is actually super easy it's almost trivial but it's a good place to get started so just to frame this with a couple of examples off the bat so you can think of auditory impairments again kind of running on this continuum so a situational impairment would be something like you're in a loud room or maybe more commonly you're in a quiet room and say you're in a library you're not actually able to listen to the sound on your phone or your computer or whatever it is and if you're in public in general you know you're waiting at a train station you're probably not going to be able to use sound.
And then of course a permanent auditory disability of course would be you know that you might have hearing loss or that you're deaf but again in this case from the perspective of a user on your website these things are basically equivalent. You just don't have the ability to hear and that is something that i think everyone here has experienced quite extensively you know it's just turning the sound off on your phone.
85 percent of Facebook video is watched without sound so that's obviously a huge, huge number so you know the five people at least in this shot here they're almost certainly working on their phones they might well be enjoying the latest movie trailers whatever but they're not able to actually use the sound on their phone. So whatever experience they're having it needs to work without sound and again this is, you know, such an obvious thing it almost doesn't need to be said because we take it for granted we understand.
Then just very quickly of course 19 percent of the UK suffers from hearing loss so it's actually one of the most common disabilities so that's kind of another stat worth bearing in mind. Again how do people manage? Well we know. We work with captions so chances are if you've watched a movie trailer or a funny video or something on Instagram or Facebook, whatever platform it is, you've got video with captions on it and there's a reason nowadays that like movie trailers the companies producing these they produce them with captions on by default because again this has kind of become the standard way that we consume this content.
But of course the same approach works for somebody who's deaf and doesn't have another choice. So there's that approach, the other approach of course is that you can provide a transcript so if you've got something like a podcast here or a video a lot of people like to copy and paste out a transcript of the material and include that it's also good for other reasons you know some people just prefer reading. It's also really good for search engines and so you see this pattern across everything that we're going to dive into today.
A lot of the stuff that you would do for quote-unquote accessibility is actually going to significantly aid all of your users as a whole. So in this case what should you do? Well from a legal standpoint it's really simple if you have audio only content you want to add a transcript. If you have audio and video content you want to a transcript and captions. So that will allow anyone with any number of the preceding conditions consume your content. There are some exemptions in the case of you know UK universities in the public sector for example live video doesn't need to be covered by that but generally if you're looking at pre-recorded material you want to be having a text equivalent of that multimedia.
And then just a very quick note here on what we mean by captions because a lot of people get captions and subtitles mixed up. So just to clarify subtitles are what you see here so a subtitle is when you take what a person is saying and you write it on the screen. So Anna's saying you know what a beautiful day and then captions are where you describe any key pertinent information so in this case there happens to be a train approaching and that of course changes very much interpretation of this scene so where the absence of audio would cause some lapse in understanding you would be expected to provide that additional contextual information and that's captions.
From a technical standpoint it's usually very very easy to do if your cms or your video editing software or whatever lets you do it it's usually very very straightforward or failing that you know you can always just add a transcript at the bottom of your video.
Okay so that's auditory - nice and simple but the next one is going to be a little bit harder and we are moving on to Cognitive. So Cognitive impairments again looking on this sort of continuum running from situational to permanent you'll recognize many of these this is definitely not an exhaustive list but a situational cognitive impairment might be that you're trying to use a website and you have a screaming child in the background for example if that's happening good luck you can obviously still use it but it's going to be a lot lot harder and it's kind of an analog for a lot of other conditions you might experience so whether that's something temporary like anxiety or you're going you know all the way up to somebody who might have ADHD or even Alzheimer's.
Obviously again not a direct equivalent but very much the approach for how you think about these issues and tackle them is going to be quite similar.
So to go into some specifics - let's take a look at what some of this is actually like and we're going to start with Dyslexia. Now Dyslexia affects about 10 percent of the people in the UK and it's actually it's surprisingly hard to get your head around.
So we built a simulator that I'm going to show you and you can try this by yourself you can actually kind of experience what it's like to use the web with Dyslexia.The basic idea is a bit like you're going to see here on the right in this picture. I don't know if you recognize it this is GOV.UK their coronavirus page but of course all the letters are scrambled up this is kind of one of the effects of this dyslexia and it is a crude approximate but it's close enough that you know the letters get jumbled and that's a bit what it looks like. The thing that this picture is not actually showing is that for people with Dyslexia very often those letters continue to kind of jumble as you're looking at them. So to appreciate this properly we built this free tool bar and I’ll give you this link a couple of times in the talk because we're going to use it a couple of times but it's totally free it's a chrome plug-in so you need to be using your you know chrome as your browser but you just go to silktide.com/toolbar follow the instructions I think it takes like a minute to set up it's very very easy and yeah I’m going to show you how it works.
Now we're going to use it to look at a web page and experience a little bit of Dyslexia so let's do that. I'm going to jump out of my slides here. So once you've installed this toolbar you'll actually see this little 's' logo up here in the top right corner and if you click on that it'll open up this little miniature window and we can turn on a number of different, simulate a number of different disabilities but we're going to look at Dyslexia. I'm just going to turn this on quickly and then minimize that so here you can kind of get an appreciation for what it might be like for somebody using the web with Dyslexia.
Obviously everything is still readable on this page it just takes a lot more cognitive effort to get through sentences and words and stuff like that so you know for instance you know 'the best place to find government services and information' - it's possible to read but it's going to take a lot more effort to get through. GOV.UK actually does an excellent, excellent job of accessibility probably you know one of the best government sites in the world certainly and it's not obvious you know just to look at it but you can see they've done a lot of things right.
You know short headings everywhere this search button it's very visually obvious it's a search button I don't have to read anything or look for it. They do other things like short paragraphs of text, simple language, broken out figures images that support their headings lots of stuff like that. And it looks quite simple but it's actually quite difficult to do it takes a lot of thought and effort to do this well but they do it really, really well.
Just by way of comparison and I’m going to compare this to a different page and this is a bit unfair because it's you know it's a legal website but we'll turn it on here. You can see for somebody who's you know working with Dyslexia it's going to be very, very difficult to be fair this they've still done some things right you know they've broken it down into paragraphs they've got some clear headings and such and it is legal text but you can understand you know the level of effort required to get through the content on a page like this is going to be significantly higher.
Okay so just jumping back into my slides very quickly i'd like to also show you one other cognitive condition which is an attention deficit disorder. The WebAim organization - they're an accessibility organization - they've produced this sort of this little game just to kind of give you an idea of what it's like to try and use a website at the same time as you know having any one of these cognitive impairments and basically what you have to do is you have to perform, you don't have to read all this text here on the screen now but you have to perform a couple of different tasks and at the same time you have to keep some bombs from hitting the ground with a little stickman and I’ll show you what this looks like.
So you can see here we've got our simulation tasks in the top left I'm playing this game my eyes are darting you know left to right trying to concentrate on two things at once trying to find the centre director's email address so I mean going through these headings here oh no lost okay back back got the tasks um okay still looking for the director's email address um...yep found it okay on to the next task and you kind of get the idea you know your attention is split, your eyes are you know distracted darting from side to side you're getting lost so unless that page is designed extremely clearly it's going to take you a lot more effort to do what you need to do.
These kinds of simulations they approximate other situations so you know in this case you know being a non-native language speaker so 7.7 percent of the UK don't have English as their first language.
Low literacy in general, again things like attention deficit disorders, forgetfulness, maybe you're tired or you're ill or you're distracted or heaven forbid drunk. So the solution for this is it's really simplicity and this is it sounds obvious again because everybody agrees you know simplicity is great but to actually take it to the level that you know sites like the government do it actually takes a lot of thought and effort.
So what should you do as content editors? At a high level you want to be writing super super clearly avoiding unnecessary words, jargon, obviously and if you have to use jargon always defining your words, again avoiding the use of sort of lofty superfluous prose and as well breaking up your text is super super important not just because it looks good but because it really does help you know aid in lowering the cognitive strain on people who are trying to consume your content.
It's good just in general to make it easy to understand but it makes a huge huge difference if you're suffering from one of these conditions so yeah things like headings, bullets, images in particular all help to ease comprehension.
So just by way of example you can compare these two images here so on the left we have some slightly flowery prose 'in the event of a vehicular collision a company assigned representative' etc. this is obviously terrible and really just a pain to read and the same content could really be written in a much, much clearer way by using things like bullet points, simpler direct English and also maybe a slightly relevant diagram that supports the messaging being made. It just really makes it easier for everybody to follow and get through.
And if you were to see the same text again with a little bit of Dyslexia you can really, really appreciate it so again just imagine having to read that text on the left and how much patience you're going to have for that text whereas what's on the right although maybe it's still demanding it's clearly much much easier to get through.
So that was cognitive next we're going to move on to Motor. And motor's a little bit different so this is going to be a bit more of an appreciation rather than a practical session that you'll see.
But again just a couple examples of motor impairments what do we mean by motor impairments? Well this is essentially where people have some difficulty that impairs their use of a traditional input method.
So for example, they might struggle to use a keyboard or a mouse or a touch screen or whatever device you're expecting them to use when they're operating your website. The easiest example you know would be something like you're trying to use a website you're walking down the street maybe trying to catch a train and you're using your phone one-handed you're obviously you know maybe cognitively impaired but certainly your motor function is also impaired and we all have experience with this. Again, common injuries you know such as breaking an arm I think the average person breaks two limbs in their lifetime so it just becomes a lot harder to do certain things. You know using a phone with two hands suddenly becomes a lot lot trickier if not totally impossible.
Tremors of course we're getting to something significantly more challenging here. In this case some people will struggle just to use a machine in general so if you want to watch somebody who has tremors use a mouse for example if they try and double click on something it's really, really hard because they'll click on something and then they'll kind of move the mouse again before they click it again so the computer won't recognize that as a double click, it'll see it like a click and a drag and that's actually one of the reasons we very rarely double click anything anymore in case you're wondering.
But on websites this can cause all sorts of problems and there are usually alternative technologies to supplement their use of a website as a result. And then if you get to something really severe if you're looking at something like you know the late Stephen Hawking. So you know it's worth remembering he was able to be a titan in his field and able to contribute spectacular works of science and literature whilst having almost no motor function whatsoever. So I can hardly think of a better testament to the importance of accessible technology than some of the stuff he accomplished and I’m going to show you how he was actually able to do that and what it means for the accessibility of your website.
So how do people manage with these kinds of conditions?
Well with some conditions you'll see the nature of your website actually becomes fundamentally different it has to be used in a completely different way that you maybe aren't even aware of and we're going to take a look at that in just a minute but if you're dealing with something just like walking down the street most likely the solution is you're just going to get really pi**ed off, you'll probably have to repeat what you're doing and this is actually kind of the same for somebody who might have a more severe disability so often they're just repeating, getting annoyed, repeating and we want to reduce that frustration as much as possible.
So for instance a classic example of a problematic mobile site would be something like this. So a website nicely designed for mobile there on the left that's really good the website on the right you know forget about it. If I’m walking and trying to catch a train just scrolling through it you're gonna have to use both hands to pinch to zoom to scroll into certain sections it's really awkward really annoying and for what it's worth this kind of mobile layout is actually completely prohibited by the new accessibility guidelines that are kicking in in September.
This is a lesser known accessible technology if you've never seen this there are a couple of videos online that you can watch if you're interested but a mouth stick is basically what it looks like so if you only have movement limited to your upper extremities so for example you can move your head move your mouth you can use this as a technology to operate a keyboard or potentially a touch screen. And it's about as difficult as it looks or you can imagine and again would recommend checking out a video if you're really interested but the key thing here is you need to imagine you're trying to operate a computer and all you can do is use individual keys.
You can't even use a mouse in this case clearly so you might wonder how that's possible well I’m going to show you very, very shortly but just a couple other technologies to cover. So it's a bit the same principle as say for Stephen Hawking in this example so in the late stages of his life he was actually only able to move muscles in his cheek so he had an infrared sensor attached to his glasses you can just about see it in this frame here and what it was doing was monitoring his cheek muscles and he was able to control the computer by essentially you know twitching his cheek.
There are variations of this so there are similar sensors that you can wear on your neck to listen to the vibrations of your voice for example lots of different sorts of accessible technology. But the point is you might be wondering how on earth it's actually possible to even use a computer or a web browser or write text when all you have is that kind of limited range of movement. Again one final example so eye tracking.
Where in this case this child there's I don't think you can see it's just the little camera below the screen there? They're able to operate a screen keyboard by looking at keys essentially and this is actually an increasingly common accessible technology where again your range of movement is very, very limited but you can use your eyes to essentially stare at what you want and then use for example blinks in order to select things.
Basically, what all of these sorts of technologies boil down to is that you have to be able to reduce the use of your website to pretty much these three buttons and I’m simplifying this a little bit for our purposes but it's worth understanding how that works and why.
So if you imagine all of those technologies they can be pretty much mapped to these three buttons. Not exactly these three buttons but I’ll show you how this gets used and how it could potentially work. In fact you might not know this but there's a way that you can try this right now on your own computer on your own websites if you've never tried this before it's called tabbed browsing.
I'm just going to quickly show you how it works so there are these three simple keyboard shortcuts and these are again not the shortcuts that somebody would say a mouth stick would be actually using these would be simplified, they might have alternative inputs, but for your perspective if you try this out it'll give you pretty much the same experience. So if you can kind of remember these tab to go next shift and tab to go back and enter for select. I'm going to show you how this can work in the real world.
So again just going back to our GOV.UK site they do a really good job so I’m just going to hit tab and you can see we've got the search bar selected so we know exactly where we are on the page and if I hit tab again it's going to take me through all of the links on the page like this and again they do a fantastic job making it very clear what's being focused on when you hit tab and if I want to go back I just click shift and tab and then if I want to select a page again just click enter and then I can start the process over again and use the site that way.
So from your perspective as a content editor kind of unlike anything else from this talk motor accessibility is usually outside the remit of a content editor but it's definitely worth having an awareness of. So there are a couple of things to be aware of and this is really just for your organization's health as a whole you want to test your website with tabbed browsing so give it a try yourself and see how that works for somebody who might be using an accessible technology. You want to avoid things like 2D scrolling so you want to make sure your sites are you know designed for mobile and then of course you want to make sure that your elements on the site are large enough to tap or click. I think someone once said the three smallest things in the universe are the electron the quark andthe close button on a mobile advertisement. And I think we can all relate to that but it's you know it's more than just an annoyance for some people it's literally actually going to be preventing them from using your site so making sure your elements are large enough to click.
Okay so that concludes our first three leaving just visual left but visual is actually going to be the most demanding and probably the one where your role at the content editor is going to be the most important. So let's just take a look at some examples.
So you can imagine situationally you've got some situations like maybe you've got you know glare on your screen on your mobile phone when you're at the park or you might have broken your screen or maybe you've lost your glasses. There's a whole raft of permanent conditions which can range from you know mild colour blindness all the way up to total blindness and I'm going to show you an example of a couple of these we'll look at how it affects the way you put together content on your site as well.
So what's it like? If we were to consider normal vision so we'll just take this photo here this is a good example. I'm going to contrast this with some different vision types so this is the same image but with one of the more common forms of colour-blindness applied now obviously this is pretty mild in this case so you'll just notice there's kind of a loss of you know colour definition and contrast but it's not really that severe there's a whole range of different colour blindnesses. It's pretty crazy but there's no way you could really know what they're all going to do or how they would work but that's something to be aware of and then of course a very very common condition so up to 50 percent of people actually depending on your country they suffer from myopia of some form so short-sightedness. Basically your vision is going to be blurred if things are up close and of course most of these people will have some kind of glasses or contacts to help them out but it doesn't necessarily mean they're always going to have access to those all the time but of course it's a relatively minor impediment for most people. But it is very, very similar to much more severe cataracts which can actually be corrected by glasses or contacts.
And then of course glaucoma basically a form of tunnel vision where the outer range of your visual field is lost so you have some detail in the middle of your visual field but you lose peripheral vision. It's an inconvenience but usually not too debilitating from the perspective of using a website.
But then there's also things like macular degeneration which is usually very correlated with age and this is where you essentially lose the centre of your visual field so these you know there are lots and lots of conditions like this of course the most severe being total blindness. So one of the reasons that this stuff matters is because we often come across things like this so a company will have a website like this on the left and they go you know oh this is super ugly we hate it it's awful we want to redesign it and then they redesign it and they come up with this nice new sexy design on the right and this is actually an example from google but if we look at these designs from the perspective of somebody with even a slight visual impairment you'll see they're pretty much stuffed like they can't make out anything they can just about make out the left hand side design ugly as it was but the new soft you know grey subtle design is completely unusable for them so things like colour contrast also matters when it comes to sites and design.
So how do people manage with these conditions? The standard approach is just to make everything larger. Unfortunately a lot of us have devices that make that really easy now so you know using your phone or your tablet the you know standard features just pinch and zoom there's also hardware for this as you can see so you can literally get things that will magnify your screen for you. So you can be using you know a web browser or pinch to zoom use a magnifying tool lots of other similar tools but they all work kind of on the same principle which is that they take a page like this and they'll just basically magnify it and if you design your website correctly as you'll see here what will happen when you zoom in the page reformats and it makes perfect sense.
The bad version of that experience which I have contrived to demonstrate here because this is not actually how the BBC site works but would basically be if I took my page like this and I had to zoom in manually I’m using pinch to zoom and then you see everything kind of gets chopped off to the side so now again I’m forced to scroll in two dimensions and this is actually a very, very common problem you see on mobile sites when you have a site that fits like this in the left and then on the right it just doesn't and it's one of those things that can be caused by content editors so sometimes you might inject content into the site that breaks the page layout so you might add a video or an image that's too wide and it will you know force people to scroll in two dimensions. Usually if your cms is good this won't be a problem but just something to bear in mind.
Another way people cope is if their vision is you know so genuinely impacted that they can't see at all some of the conditions like some of the conditions you saw earlier they might use a braille display so a braille display essentially reads out the content of the screen and then describes it to them in text so not enough time to go into this in any real detail but what I’m going to focus on is a screen reader because this is much the same thing but quite a bit more common and a screen reader is technology that's used by a huge, huge range of people who have any number of impairments. So whether that can be something like Dyslexia all the way to you know total blindness. Essentially it's technology that reads out audibly what's on the screen in a way that even if you can't see the screen at all you can still use the computer. And this is pretty crazy technology if you've never used it before and I’m going to give you a quick demonstration.
Again coming back to what we looked at earlier so we have this free simulator and we have a blindness mode that will completely simulate if you wish using a website as if you were blind so I’m just going to pop out again from my slides. We will go over to...we can use this this page. So again we've got a range of different things that you can simulate here we're going to go to blindness and this is basically a screen reader simulator and usually this - what you read here - would be read out audibly but I don't think it's going to work through zoom but you'll be able to see the text right here so we're going to turn this on and you'll see basically the way it will go sequentially through each of the sections on the web page so it'll read out, the links, the headings the text. And it will tell the screen reader user exactly what it is being read out so whether that's an image or a link or a heading or anything like that so if we just tab through you'll see 'go to GOV.UK home page' that's a link it'll say search, search text block box, we've got coronavirus link you kind of get the point.
In general people who are using a screen reader aren't actually going to tab through every single piece of content on the page they're going to use shortcuts to jump to things so jump to things like collections of links or jump to headings and they'll use that to navigate their way around the page so they don't have to hear you know absolutely everything on the page being read out. So say for example, so we have a whole list of shortcuts here that you can play with but if you're using the h key for example you can skip to headings so we've got our first h1 heading 'find a job', 'other ways to apply' and it just skips all the way through this again we can skip through links much the same way and if you wanted to try this out completely as if you know as if you're using it for real you can use some of these features here like the curtain feature and then you can try navigating your way through the site without any vision whatsoever so it's pretty useful I would definitely recommend checking that out on your own site to see how things are structured and what could potentially be improved.
So again what does this mean for you as a content editor specifically? One of the first things to bear in mind is that you should avoid relying on colour. This is an actual chart I think published by a government or something but the problem is this chart is pretty much followable if you have normal colour vision but if you don't, and this is pretty extreme I've turned off all colour but if you can't see colour this graph is pretty much dead to you right? You can't understand anything that's going on so ideally if you're doing something like this you want to make sure you're not just relying on colour to communicate things so you might use for example you know dots for Florida crosses for Georgia. Things like that. You also want to avoid the assumption of vision so saying things like click on a button on the right or click on a blue button just trying to avoid phrases like that because of course not everybody is going to actually be able to see. Whereas something like click on the start button they'll be able to hear that linked text read out and it's going to work whether or not somebody actually has normal vision.
Page titles I’m sure you've heard of, of course as content editors. I'm sure you write them all the time but it's worth understanding why they matter and how you can make them good so this if you didn't know is a page title this text here up in the tab and when you specify a title per page this is where it's going to going to appear and it's also going to end up appearing in google so if you google something this is you'll find this so the blue text here is obviously the title of those pages. If you're using a screen reader it's going to be the first thing read out on the page. So as a result there's a couple things that you want to consider when you're writing page titles the first thing you want to do is you want to make sure that your titles are unique.
So you can imagine if every title of your page just said something like 'the NHS website' you would have no idea where you're at you'd have to listen to the entire page be read out until you got to a point where you'd actually understand what the page is about so not very very helpful. So having a useful title that's unique that's a makes a big difference. You also want to put the most unique information first so somebody who's using a screen reader is not gonna you know generally listen to everything on the page being read out they're going to click you know next links headings because they're going to get very tired of listening to all those words. So if you write something like 'man bites dog dash BBC news' that's great if you wrote you know 'BBC news dash man bites dog' you're putting the important bit of information second so you're just making them wait a lot longer to get to that and it's not fantastic. If you've got things like a multi-step process like something like applying for a passport you want to define what those steps are your progress in the title again because this is going to be the first thing that they hear read out loud.
Headings - yeah you've probably heard of headings you may or may not know about them from a tactical angle but from a user angle they're pretty straightforward you see an article like this and the heading is kind of the level of the heading you know where heading one is the thing at the top heading two is the thing inside heading one heading three inside heading two and so on. So a document kind of has a sort of hierarchy if you will like a series of bullets like you see here on the right hand side. Headings of course just generally great they make your content really easy to understand but they also have a particular importance in accessibility.
I mean if you imagine a page like this so I’m sure if you're looking if you have you know Dyslexia or a range of other conditions it's just much, much easier to follow the text on the right than it is to follow the text on the left.
But specifically when you're looking with a screen reader and I showed you this a bit earlier using the h key will skip you forward to the next heading so a standard way of you know using something like google would be they load google they immediately go ‘heading heading heading’ until they would find the results they're looking for and then select that. But if they were using this design on the left they would literally have to read out absolutely everything to know where they're at again if they're using that design on the right they can just press the h key go straight to the relevant headings and skip to where they want to get to. So that basically just means using something that's called semantic headings your cms will vary but usually they'll call it something like heading 1 heading 2. What you really want to avoid doing is just using bold or big text because that's going to get you into some trouble. It might look like a heading but it actually has no effect on accessibility. So don't just put bold text in there and you know say that's good that's a heading. You actually have to select a heading specifically so you also want to nest them correctly so like I showed you earlier you kind of want to think of them as if they're book smart bookmarks in a page so whatever text is inside them that's something that somebody can quickly skip to. And as well you know making them short and self-evident really, really helps.
Alt text if you're cool I’m sure we've all heard of alt text. You've probably got the option inside your cms. The idea of course is you know you have images like this and then the alt text will be what's read out when a screen reader is looking at the page so of course the person can't see that there's a pair but the computer can say you know pair image or banana image so with a screen reader you know imagine imagining that you have to select one of these options you can imagine if you've set all of that text to just image that's going to be completely useless for somebody using a screen reader because they're just going to hear 'image image image image image image' it's not going to help them at all and likewise if you have like very inconsistent or inappropriate alt text in there.
Here you can see you know pear image 72 or photo of a banana lit from above that kind of level of detail or relevance it's not really appropriate for the context in this case of you know choosing between these three options. One thing to note is that alt text is actually not always a good thinga lot of people think they have to add alt text to all of their images and this is absolutely not the case in fact it can actually be a very bad experience for somebody using a screen reader if you're using it inappropriately and I’ll give you a very very quick example imagine these four icons from this talk were you know on a web page and I wanted to make them accessible you might think you should add alt text to all of those icons but you would actually be very very wrong because if I were to do that we would get something like this it would say 'ear receiving sound image auditory link' and this is how a screen reader would see this and a user trying to interpret what's on the page is you know wait what's what's going on? Why would they care that there's a finger pointing image next to a motor link? The information they care about in this case is only the link the image doesn't actually help so in fact it just it just detracts from the important information because it is essentially decorative.
Just adding a bit of colour or imagery to the page so in this case you'd actually want to set the alternative text for those four images to be nothing on purpose. This way you'd have a much much better experience like this. To give you another very quick example imagine you've got this picture of George Washington on the left hand side what do you think would be the appropriate alternative text for this image? We could say you know 'image of George Washington' or 'George Washington the first president of the united states' considering the context on the page you've got a couple seconds to think about this I’m just gonna grab a glass of water...
So the correct answer is actually D - 'George Washington' the reason is that image of George Washington is redundant because of course the screen reader is already going to say image so it's gonna say you know 'image of George Washington image' so redundant 'George Washington the first president of the united states' it's kind of repeating information in the text that's gonna be read out below it and then no alt text well we would lose the fact there's even a George Washington there so nice and simple 'George Washington' but then in the same situation let's say that we've added the words George Washington below the image on the page so now we've added some text like caption which is visible below what would be the alternative alt text this time and the answer is it's actually completely different in fact this time no alt text is the appropriate alt text because adding George Washington as the alt text would suddenly be redundant the screen reader would read out George Washington image George Washington and again that's just not helping anyone. So really it's not as simple as just getting the right text in there you do actually need to have some understanding of how it's going to be interpreted. So if you've got an image meant to convey information like this where the alt text you know charging phone it's not actually going to be particularly help particularly helpful but text such as plug cable into the bottom edge of phone would actually help the user understand what they're supposed to be getting from that image so some other things you want to keep in mind.
So very quickly just to summarise some points on how to write great alternative text. You want to make sure if you want to summarise the content and the function of the image considering the context and the placement on the page. Images that are linked should describe what they do so you want to think of that almost like link text so you want to use things like order a new passport not just passport. Never include texts like 'image' 'picture' 'icon' because again the screen reader is just going to read that out again so 'image of a car' should just say 'car' and then again you want to avoid that kind of redundant alternative text so things that are identical to any adjacent text or purely decorative we can leave those those images empty. And then last of all we have link text.
So the thing with link text is that frequently again these links are going to be read outside of context so when somebody's using a screen reader they don't see the layout of your page so they won't see this 'read more' link as being below a heading they're deprived of that context so all they have is the link so when you give them something like you know 'read more' it's not going to be useful because all they're going to hear is 'read more' 'read more' 'read more' without any surrounding context. So this is actually really really common and the way you actually want to write linked text is you want to make it just describe what the link points to so something like 'latest news' or 'contact us' you want to make sure it makes sense out of context so you have you know things like 'apply for a driving license' instead of just 'apply' and you also want to avoid ambiguous text so things like 'click here' 'read more' that kind of stuff. It's always unhelpful.
So that concludes all of the abilities and barriers and just to recap very very quickly here's a little cheat sheet if you want to take a quick screenshot this kind of summarizes the various points we made across those four categories and then one other suggestion please do try out some of these simulations on your own site. We made this plugin - it's free for a reason it's really good for raising awareness of the importance of these issues and also just for checking that everything in your site is actually working the way you hope it would.
And that's everything from me thank you guys for sitting through all 100 of those slides I hope even if you're familiar with accessibility already that you learned a couple new things. Again the link for the toolbar is there and we also have an index so if you're curious to see how your site is ranking against other UK universities we provide an index on our site as well. Over to you Rob.
Rob: Thank you very much that was really really helpful thank you Julia. I know there's been a few questions that have come in while we've been talking about i see Jess has picked up some of them I’m so just going to pick up on a few of them. So one of the questions was around text over images and as Jess said it depends So it all depends on the contrast, rather the contrast ratio the size of the text and the image etc. so in general we would avoid it and we certainly would avoid it when used on images but it's kind of context dependent but the Channel Management team can advise on any particular situations that that you were referring to. I had a question sent in advance of the session which was around pdfs and documents on the website and while obviously there are different specific use cases and it depends on the use of the document in general what we would advise is if you've got content that you think you need to put onto a web page that is currently in a document first of all ask yourself can that be published as html on the web page and just have the content added to the web page because that invariably is significantly more accessible. If that's not possible we would prefer to link to an accessible document format word documents are when structured correctly far more accessible than pdfs in the main because ultimately pdfs can be very very difficult to make accessible, it can be done but it is very very difficult and probably time from the time perspective not the best approach if you think about when Julia demonstrated the size of text with a pdf you cannot change the size of text so if somebody is trying to zoom into a document to make it bigger on a phone they're going to have to scroll from left to right to be able to consume that content but again if there's any specific circumstances and that you'd like to flag we're we're more than happy to advise.
And then the other question which I don't think has been answered yet was from Jade around interactive dashboards on that one I’m going to pass for now but I will follow up with you afterwards because I’m not sure what the best practice would be around things like data studio it's a brilliant tool but from an accessibility perspective I can't imagine it it's very accessible so I’ll have a look and I’ll come back to you separately on that one.
We've got another question around the UoB context and promo rows specifically so we have been having a couple of conversations about how we implement promos rows and we are looking at making some changes around those what we'll do is we'll make sure the guidance is on the digital toolkit which we will also circulate afterwards so people can look at that.
And then David has just put another question which I might refer to Jess or Julia to see what their thoughts are around historical PDFs that are published for reference purposes. Now there are some situations where we can mark documents as for archival purposes and I don't know whether this would be one of those, Jess have you got any thoughts?
Jess: PDFs that are as they describe references, right that date back is it September 2018? I think that's the timing. If they're from before then and they're not in use, right, so they're not something that people are downloading right now and potentially filling out forms with or printing out things like that, then you can actually ignore them that's a UK specific thing which I’m always a pains to point out, but in the UK if it's before September 2018, so say it's one you've got left over from 2016 and you're like well you know these are pdfs that we're keeping around because we need this information to show the history of something then you're actually okay to just leave it. They're not accessible it's nearly impossible to make PDFs that are good for say screen readers but the reality is after a certain point if they're not being used it's not required in the UK that you do something about them moving forward.
Rob: I mean one of the things that David has just clarified is they're from before 2010 so I think that ticks that box and if they ever came into - if for whatever reason they ever became to the point where they were being used again for whatever reason - we could look at alternatives well do you keep those original documents but create a word document variant that has all of that content in a way somebody can consume it there's no harm in having the original document and an alternative variant that those who need it can use. I think that that's just as an acceptable an approach.
And then one of the questions just came through was does accessibility within canvas work exactly the same as within the UoB website? I think from a legislative perspective accessibility applies to canvas for sure and for learning materials but in terms of the way it's addressed I think it will be addressed in different ways but I've got to be honest that's slightly outside of my area of expertise but I do know a lot of work is going on around canvas and the accessibility of the content in that platform.
And then Ruth has just clarified around the alternative for a PDF being a word document. Yeah absolutely there's no reason why that's not acceptable but having said that if you can publish it on a page instead that's also really really good it just makes it easier and obviously the caveat that comes with is as long as it's created as an accessible word document so you're using headings correctly so using heading one two three etc so that it maintains the structural integrity of that document so it can be used with accessibility tools.
Ellie: And Microsoft Word's got a really really good free accessibility checker within it as well and so we'd recommend using that so you can access that for free within word whereas i know PDF accessibility checkers you have to pay for so that's why we'd always recommend word as well because it can be accessed by everyone.
Rob: I've had a question from Mark which is probably a good question to wrap up with or we might do a few more is around the minimum legal requirement of accessibility. So the legislation in the UK enshrined in law WCAG 2.1 AA level of accessibility. So if you're a glutton for punishment there's a lot of detail out there around that and obviously as an institution we should be aiming to hit that by September the 23rd I think it is give or take a day and that really should be our minimum that's our minimum legal requirement but I think coupled with that we should also be considering our moral obligation as well. Yes it's a legal requirement and actually the legal requirement has been around since before the accessibility regulations came into force and through other legislation which just didn't raise the profile enough so the equality act etc and so it's a pre-existing requirement for us to do this piece of work but we can we can share much more detailed information about the actual items on the legislation if you want so Provilla has just highlighted that there's an accessibility tool in canvas...and I think...
So what we'll do now as we've got one minute left what I’m going to do is put into the chat the email address for our team or in fact Ellie could you could you pop that in? but other than that I just want to say thank you to Julia and Jess for joining us today and hosting this session. As I said we've been recording the session so I will stop that now.
[ENDS]