Last week, UX Glasgow meetup had a 2 hour session on accessibility, and I gave a 25 minute talk on Content Accessibility.
You can watch the video (with subtitles) below, or if you’d prefer to read the transcript that’s just under the video.
The talk covers a lot, including:
- meaningful alt text
- meaningful images
- using clear language
- avoiding ableist stereotypes
Watch the video
Here are the links to the sites I mention in the talk:
- Affect the verb – images of disability
- Emotion matters in alt text – Jake Archibald/
- Haben Girma – A blind person thought I was white [Video]
- Buttons v links – Web Axe
- Overlay Fact Sheet
Hi, my name is Lizzie Cass-Maran and I’m a freelance Content Designer and Content Accessibility Consultant and I’m here to talk about accessible content.
Some of you might be able to see that I am here in the bottom of the presentation slide in a wee video box.
For those of you that can’t, I am a white woman of around 40 with glasses and greying hair held back in a ponytail (thank you very much 2020).
What is Content Accessibility?
So, what is content accessibility?
It basically focuses on the cognitive load issues of the user experience. There’s an image on this slide that shows the P-O-U-R: Perceivable, Operable, Understandable, and Robust principles from the WCAG – the Web Content Accessibility Guidelines, and there’s a red circle around the ‘understandable’ element, because that is pretty much the quadrant that content accessibility covers, in the main – although there is always a lot of interplay between these different areas and it is really difficult, I think with anything, to say exactly which one of these it sits under.
So: cognitive disability is the largest group of disabled people. Numbers do vary on exactly how many people have got a cognitive disability. 18% is one of the numbers I’ve heard quite a lot.
The fact is it’s really hard to measure because a lot of people don’t feel comfortable disclosing these conditions.
It’s also really under-diagnosed.
So, cognitive disabilities also covers a lot, so things like neurodivergence – so ADHD, autism, PTSD –
learning difficulties, depression – which some people would count as a neurodivergence as well – and the lines are a little bit blurred on some of it, and the WCAG is a little bit vague on this area as well.
There’s also lots of situational disability that is about cognitive load, so if you are suffering from stress, if you don’t speak the language, that kind of thing, it’s very difficult to start navigating content.
So, if you think of something like the instructions for a home Covid test.
Now, I’m sure many of you have done lots of these now, but the first time you do one it seems very very complicated and, you know, you’re having to do a Covid test which is really unfun! So your load for understanding the information is reduced.
So we don’t know the numbers of how many people are cognitively disabled, but the fact is that making content accessible helps everyone anyway, so that’s the good news.
So, the last slide, very briefly at the end there, showed a picture of me when I had short hair. It’s sticking up in the air, I am looking slightly surprised and confused, and this was to illustrate the cognitive disability slide.
And so I’m now just going to go on a slight tangent to tell you that this is a *terrible* picture to illustrate cognitive disability, which is why I’ve used it. I sort of came across it and thought “well you know, I look a bit baffled, like maybe being baffled will work” and I was like, “well, no that’s a terrible terrible image to project of cognitive disability!”
The only one reason that it does sort of work is that it is of me, and I have ADHD, I also have chronic pain, and that is something that hugely affects my cognitive capacity and I like to pull silly faces and this is, this is just me. I’m not stupid, this is just what *a* person with cognitive issues looks like first thing in the morning.
This photograph here is also what a person with cognitive disability looks like. This is also me, but this is me when I have brushed my hair, and I’m looking very serious. It’s a good quality photograph – it’s taken by Edinburgh-based photographer Ellie Morag.
And it sort of shows that it’s really hard to illustrate disability well using photographs or even drawings, and stock photos can be really problematic with that kind of thing. There are a couple of disabled-led projects around trying to produce stock photography that’s a little bit more real and and reflecting the true diversity of disabled people so I’ve got some links to that at the end, but I have used pictures of me in this presentation and that is not out of egotism, but because I don’t want to make assumptions about anyone or start getting into problematic use of images around disabled people (it’s also easier for GDPR!)
So just what I want to say here is getting past the, kind of, the alt text and the visual contrast and that kind of element of adding an image, you also have to consider a different element which is what the photo is of.
So if you illustrate all cognitive issues with people looking a bit stupid, then that is super problematic (as is the word stupid, which I will come back to!)
So I’m going to talk about mostly about the text and the word side of content accessibility,but looking at the semantic content of an image is really part of it as far as I’m concerned as well.
So that was a picture of *a* person with a cognitive disability, but as I said, you know, the actual world of people is much more diverse than that, and I just wanted to take a moment to talk about intersectional accessibility.
So, I recently saw a really good article about alt text and looking at the emotion behind the alt text (and again I’ll give a link to that at the end) and there was an interesting discussion within that about race and whether you should give the skin colour of someone when you’re describing a picture of them.
And there’s a comment saying that that they thought that it was useful to, so if it was like, in the context of a conference, someone perhaps wanted to have a look and see what the diversity of a panel is, and so therefore it’d be interesting to know everyone’s race.
And there’s this comment here which I will read out.
“I bet that ‘diversity’ [which is in quotation marks by the way] I bet that ‘diversity’ for blind people is more related with organisers that care about alt texts than care about gender or race, and if you’re not blind you’ll see it anyway.”
This is me looking *highly* dubious about that remark.
Let’s be clear
There’s a great video by a fantastic woman called Haben Girma, who is a deafblind lawyer, and she’s talking about the context of alt text and people who have thought that she was white (which she isn’t – I should have said that!) and you know, other blind people thought that she was white and actually how common that is and how actually going into that kind of detail, within the right context, in alt text is actually really important. because:
- People of color can be blind
- Trans people can be D/deaf
- Colourblind people can be gay
- Deafblind people can be autistic.
Or someone might be all of these things.
So it’s really important not to silo people and what I find is useful is instead of thinking about, like, a blind person using your your service, or an autistic person, instead think of somebody’s user experience from the point of view of their screen reader use, or their experience from the point of view of their cognitive load – and remembering that this might well be the same actual person, individual, human.
So just as an example of how these kind of crossover needs can intersect and how different facets of people’s user experience can work when it comes to accessibility needs – and this will also sort of show about how different design disciplines can work together as well:
It’s just a link, right?
I’ve got something like ‘add a link’. Simple thing, “oh just stick a link on that page please”, it’s something you hear a lot.
So to start off, the text link that makes up that link has got to be really clear and really direct and particularly for addressing people’s cognitive issues. And this is pretty much a content design skill, somewhere where it really intersects with UX writing if that’s different (I’m not gonna get into that debate today!).
So link writing is absolutely some of the most important writing at all that you’ll do for digital products.
The links also need to be physically big enough to be selected. So that’s for people with issues around essential tremor, Parkinson’s, Cerebral Palsy, lots of other conditions, and so that gets into more of the field of kind of visual design a lot of the time.
BUT you can’t make everything big buttons because links and buttons have different semantic functions, which affects screen reader users, and that’s, you know, more of a dev kind of area.
So you can see that just, as something that perhaps is quite a small simple thing, how different accessibility needs do play into that how different design disciplines apply into that.
So how does Content Accessibility fit in?
So that slight tangent apart: How does content accessibility fit into that and and what is content
The way that I see it, it falls into two areas, which is the way we write words and then the language and terms that we actually use, that we’re writing.
The way we write words
First of all the way we write words. I’m going to do a really quick overview of this.
You can go on entire long courses about this.
So, I’ve got “don’t use dense language” and “separate your content with frequent headings”.
So don’t say more than you need to say, ever.
I think one of the reasons that I’ve always been quite a good content editor / designer is probably because I have ADHD and so I don’t have patience.
I will look at something and go “nobody’s gonna read that” and actually maybe some people are,
but you’ve got to look at the people that aren’t going to read that. So just cut it in half and put headings absolutely everywhere, and the shorter the better. Not shorter than it needs to be.
Use the words you need to do to explain what you need to explain, but don’t make it longer than it needs to be either, and really do signpost everything with clear headings.
And make sure the headings are semantically correct as well for screen readers.
Sentence case is a good one as well.
Use sentence case
It says on this slide “This is written in sentence case” and then “This Is Written In Title Case”.
The first sentence uses an initial T but then it’s all lowercase.
The second sentence, which is the title case, uses an initial capital for every letter, so that’s the difference between those two things.
And it’s about people recognising words actually by the shape of the word, particularly dyslexic people and various other conditions recognise words by the shape of them, and so if you mess up that shape by using capital letters where they wouldn’t expect a capital letters – a capital letter – then it makes it harder for them to process.
And the thing is with all of this is that if people’s cognitive load is all focused on just trying to process what words you have said, then they have very little left to process what those words mean for them, which is actually the, sort of, the key part or the important part of what you’re trying to do.
‘Avoid not doing this’
What I mean by this slide is that people will generally understand what you’re saying a lot better if you phrase things in the positive. So instead of saying “You can’t bring anyone with you” try “You need to come alone”
And negative contractions like ‘can’t’ and ‘don’t’ are particularly bad because what people do is that they can quite easily skip over the negative aspect and misunderstand what you’re saying in quite a, you know, they literally think you’re saying the opposite of what you’re saying.
So that’s a good one to be careful with.
Keep clear of jargon, needless acronyms, etc
And wherever you possibly can you should use terms that your users will understand.
So there’s of course this huge huge context here and there is all of these things context context – I’m always looking for more context, I think it drives people mad – but this is where you need to know your users. One person’s jargon is another person’s daily language.
But don’t start to make it a slippery slope where you assume that because somebody understands maybe some technical terms they therefore don’t need any of this and they don’t need short paragraphs and headings and whatnot.
You know, someone might know a very complicated medical term, for example, but but they still need really clear signposts of where they’re going and obviously, you know, good alt text and all the rest of it.
So we’re talking about jargon and there is a bit of an elephant in the room. So here is a picture of a very cute baby elephant.
An elephant in the room meaning that there is a huge issue that people are maybe not talking about.
The term ‘a11y’ is super inaccessible!
So there’s an image here showing how the term a11y works. It is a numeronym of the word ‘accessibility’, and it makes it shorter makes it easier to type for a lot of people (the word ‘accessibility’ is also not very accessible).
But if you don’t know what it means, then short of specifically going and looking it up, it can be really alienating to people. People kind of think it’s a very specific niche thing that’s ‘over there’ and accessibility *should not be niche*.
So I try my best to avoid ever *just* using it and to use other terms, other hashtags, place it in a bit more context as well.
But I do use it because I work in accessibility and so I kind of have to. If I want my tweets to be seen by the right people that is the hashtag to use, that kind of thing.
So sometimes avoiding jargon isn’t just about avoiding the difficult word but actually making sure you get a chance to explain that word and put it in context.
When you have to use jargon
So, for example, I’m currently contracting at a legaltech company and sometimes we, again, do have to use terms people have never come across before, because we’re talking about the law and the law has got some very specific terms.
And so how do we do that, and when do we explain? It’s quite complicated because stopping to explain every single term you ever use also becomes really cognitively overwhelming and really complicated – or, you know, making every other word into a link that takes you off to a destination is just too confusing, visually and cognitively, and it’s a really delicate balance.
And so I came up with this flowchart – which is not formatted as a flowchart because flowcharts are really inaccessible! – but this shows question one, which just says
“Which should we use when using an unfamiliar term? Consider the following questions. Question 1: Do you really need to use the term? Yes: go to the next question, No: then don’t use it.”
So this, the first question, is “Are you sure you need to use it? because not using it if you don’t have to is still always the best approach.
But this kind of goes on. It’s got five questions and different answers to those questions about how likely it is that someone will understand what the term means and how complicated it is to explain and and that kind of thing.
So this is just the approach we’d come up with there and there are different, obviously, different approaches that you can use.
But it’s about, it just shows, I guess, how complex it is about really placing everything in context and really really thinking things through.
Here’s an icon to represent a form, because there is also a whole host of stuff around interactions and surveys when it comes to cognitive load, and having to remember answers, and asking too many questions, which is an area where people at a certain point will just start to answer whatever, and so not only is it inaccessible it’s also making your data useless.
But I’m on a limited time for this presentation, so I’m not going to go into it because it’s such a massive area, but I do just want to say it is important; please think about it!
The language we use
So that’s talk about the way we write, and now we’re thinking about the language that we use: what are we actually writing.
This isn’t in the WCAG.
But if you’ve got this far and you still don’t actually care about disabled people, just about ticking boxes, then I’m… I can’t help you. This is a picture here of me looking very sad and it says “Is that all you care about?”
Because I don’t care about the WCAG. It is not motivates me. I’m gonna put money on it that is not what motivates anyone who is really working in the accessibility space.
What I’m about to talk about is part of improving the user experience of disabled people, and as far as I’m concerned that is accessibility.
Use of metaphor
So here is a picture of the very cute baby elephant again, and I used this to illustrate the idea of ‘the elephant in the room’ just a few slides back.
You’ll notice I did also explain what I meant by ‘the elephant in the room’ because one of the things you do need to be careful of with the language you use is metaphor. Some autistic people, in particular, can really struggle with metaphor. So this is again one of these cases where it’s not ‘never use any metaphorical language’ but use sparingly and explain what you mean. Signal that something is a metaphor, at least, and this helps to not only make your content more accessible to a lot of people in terms of cognitive load, it also makes it more inclusive which is a win-win.
So people, for example, who speak English as an additional language are less likely to understand metaphor as well. So it’s going to help a whole bunch of people!
Don’t perpetuate ableist stereotypes
And then – do you remember what I was saying about the content of images? That applies to text content too. So here’s the picture of me again with my hair sticking up. It says ‘Remember this stupid person?’
Don’t call people stupid. Don’t imply that stupidity is a bad thing.
So, you can have a site that is beautifully semantically built; it is an absolute joy to navigate with a keyboard or a screen reader, the colour contrasts are on point, but if the way that you talk about disabled people is offensive or othering, then it’s still not going to be truly accessible because you are making those people feel excluded.
So please don’t perpetuate ableist stereotypes. Unfortunately the way that we speak and write in the UK at the moment does do that quite a lot. I am guilty of this, you know, I do use terms. I’m trying to call myself out and stop doing it but it is really, it’s a really common part of the way that we talk.
But it’s really upsetting for people.
So things like ‘stupid’ or ‘nuts’ can be very offensive if people have had those thrown at them as slurs when they’ve got mental health difficulties of various types, and ‘blind spot’ and ‘fall on deaf ears’ are both quite upsetting for the blind and D/deaf communities, because of what they’re implying about their abilities.
Nobody has been bound to their wheelchair! If you ever find someone who has been bound to a wheelchair, please call the police.
That’s not what wheelchair use is about. Wheelchair use enables people to live a better life. The term is ‘wheelchair user’ if you need to refer to it at all.
And the other thing is saying things like ‘a bit OCD’; using medical diagnoses to describe character traits.
It can be very upsetting for people who actually have those diagnoses.
Just think about what how you’re talking about disabled people, and then what you’re implying about disabled people when you’re, when you’re talking generally, possibly about something else entirely.
It’s really really really important.
So we’re talking about the way we write, the language we use, semantic content of images, so there might be some of you at this point wondering “Hang on, isn’t this just good content design?” This is me looking very dubious about whether everything I have been talking about is anything different from just good content design.
My answer to that would be “No, it’s very good content design.” Here I am looking happy about that. This is my version of the ‘Drake meme’ for those of you that know it.
Accessibility shouldn’t be a separate thing. We shouldn’t need to address it in quite this sort of way. It should be the starting point and embedded in absolutely everything we do as designers of whatever kind. It should just be intrinsically part of everything.
But it isn’t. As things stand it isn’t, so therefore thinking about accessibility in that separate way can be very useful.
Overlays: cheating badly at accessibility
This is just a good place to mention accessibility overlays. The heading here says “Overlays: Cheating badly at accessibility”.
There are some companies who are trying to exploit the need for accessibility by selling these overlays that they claim can make your site accessible with but a single line of code.
And that is just not how accessibility works.
I’m not going to go into it at length, but I’m just mentioning it here because content is maybe the easiest area to see how blatantly it doesn’t work.
A line of code on the website is not going to edit your copy. It’s not going to make your images and the associated alt text more meaningful. It will do nothing to your content!
But it’s not just content. People who use assistive technology are actually reporting that these overlays often make a site *less* accessible, and you can actually get a Chrome extension called ‘Accessibyebye’ that removes these kind of so-called accessibility overlays.
This slide shows a screenshot from a site called overlayfactsheet.com which is bringing together some facts and people’s real experience with these overlays.
I’m not going to read out all of these different reviews; it’s pretty blurry anyway, but what I will do is add a link to the website, so you can you can properly see it.
It will be a very easy site to navigate for accessibility, I put money on it, given that that’s what it’s about! But there is a lot of negative feedback on that so please, please be aware of these accessibility overlays.
And that’s me!
Thank you very much.