The Clearleft Podcast

This is the Clearleft podcast.

A podcast is an audio experience. You listen to it, right? Well, not necessarily. There’s a transcript of every episode of this podcast on the website podcast.clearleft.com. I don’t wanna make any assumptions about how people choose to access this podcast.

It works the other way around too. Why can’t every page on the web be like a podcast, something you listen to instead of reading?

By questioning assumptions about how people access the web, we end up with more flexible and resilient websites.

I am Laura Kalbag. I am the author of Accessibility For Everyone from A Book Apart.

I asked Laura how she came to focus on accessibility.

Accessibility makes sense to me because I grew up almost my entire life with a brother with cerebral palsy. So he’s disabled and he’s always struggled to use various things that require a lot of physical and reading kind of interactions.

And I don’t really think that much of trying to accommodate his needs when we’re doing stuff together. I’ll read the menu to him when we’re in a restaurant. So that same logic of thinking about things on the web, when people started to say, Hey, if you want to make a website that works for people who maybe can’t see it, maybe they’re using a screen reader, I was like, Oh yeah, that makes perfect sense. It was just kind of a logical extension for me.

I was very lucky that I think the blogs and the books at the time tended to, or the ones at least I got my hands on, tended to actually mention accessibility. So I’m pretty sure I was reading your blog when I was starting out. There’s things like Molly Holzschlag’s work, Dan Cederholm’s books. I was using those to learn how to do HTML and CSS. And often they would mention accessibility.

That’s why I never saw it as an added extra. I never saw accessibility as something that was a line item in a budget. Something that could be taken away. I always saw that as being the right thing to do and a responsibility as a designer and a developer.

I cared so much about it. I wanted to try to encourage other people to care about it too.

I’m Cassie. I’m a front-end developer at Clearleft.

I asked Cassie to tell me about a recent project that involved some accessibility work.

So it was, higher education, a university website, and we’d previously done some work for them. And in the interim they’d been doing some accessibility audits and they’d found a few things that they wanted to fix. So I was digging into the pattern library and seeing where we could fix any issues for them.

And a lot of them are, you know, color contrast, maybe headings in the wrong order, images without any alt text, that kind of thing. And they feel like quite big and small wins. Like big wins, but wins that don’t take that much time.

And then there’s the other stuff. There were some big complicated patterns, like a big mega menu, with multiple different levels of dropdowns and there was a modal as well. And that’s the stuff that it seems a lot more confusing. There’s a lot more conflicting opinions about what is right and what isn’t right, and how you should build these patterns, like progressive disclosure patterns and modals and mega menus, these kind of big knotty problems.

And I found that really difficult because it seemed like the more I looked, the harder it became. The more I researched about it, the more confused I ended up.

I started off thinking about keyboard users, just because I think it was a little bit easier for me to start there because around with my keyboard. I can understand what that involves and also it’s visible. A lot of the time, if you’re talking about focus states, you can tab around and if you can’t see a focus state, then you can see where you need to fix it.

Whereas I find it a little bit harder when it comes to accessibility for screen readers. I’ve tried, I’ve tried listening but I don’t really know what I’m listening for.

So it’s a little bit harder because I’m not actually a screen reader user.

Here’s someone who is a screen reader user.

Hello everyone. I’m Léonie Watson.

I asked Léonie if she’d be willing to demo her screen reader usage to my co-workers at Clearleft. She very kindly agreed. Not only that, but she also gave us an explanation into how screen readers work. As well as telling us about her background.

I’ve been rummaging around on the internet for most of the time that the web has been around and for a good chunk of that in the field of accessibility. Worked for some of the bigger accessibility agencies in the UK and the US but as of early last year, I now run my own small accessibility agency called Tetralogical.

I do quite a bit of work with the W3C, and, and otherwise try to keep myself out of trouble by working out how to make things a little bit more accessible for people on the web. I’m also visually impaired. I’m blind and use a screen reader. So I’d like if, you are willing, to take you on an adventure with a screen reader, which is to say, I’d like to tell you a little bit about how screen readers work.

Well, what are they? Simple explanation is that they are software packages that translate what is on screen visually into either synthetic speech or synthetic speech and refreshable braille.

What they really are is actually two things under the hood. There’s the screen reader, the kind of the software that provides the user interface, if you like, but there’s also the Text To Speech engine, the bit that provides thesynthetic voice.

And it’s important to understand that there are these two things that go into what we call a screen reader, because depending on how you pair them up, the outcome can be quite different, not just in terms of the voices that you have available with different Text To Speech engines, but they have peculiar quirks in terms of the way they handle pronunciation, punctuation, and other bits and pieces like that.

TTS work in different ways. Early Text To Speech engines, and a lot of screen readers use engines that use formant synthesis to create the speech. It’s entirely artificial, but it sounds incredibly robotic. Hopefully this should play you an example of what formant synthesis sounds like.

For millions of years, mankind lived just like the animals. Then something happened that unleashed the power of our imagination. We learned to talk.

So as you hear, very robotic, but you can speed that up massively and you’ll still get good pronunciation. You’ll still be able to interpret the words quite distinctly from each other.

You get concatenative synthesis. This gets a little bit more human sounding because it’s actually built from individual recordings of real human voices that are concatenated as the name suggests to form actual syllables, words, sentences, and so forth. The trade-off is you get a bit more human sounding, but a little bit less responsive.

To those of you who are not familiar with screen readers, this is still going to sound robotic. But to those of us who do, this was a big step forward.

For millions of years, mankind lived just like the animals. Then something happened that unleashed the power of our imagination. We learned to talk.

So it’s still somewhat robotic sounding, but a little bit more fluid and human sounding than the formant versions of the TTS.

Screen readers are essentially dependent on the interface for all the information that they need and all the information that they give to users.

And that, I’m afraid, puts the responsibility of screen reader accessibility almost entirely in the hands of the people who designed and built the interface.

This is where it gets interactive. And Cassie is about to volunteer as tribute.

So anywhere anybody would like to go exploring?

We thought about the Clearleft site.

Very brave.

Strategic design and innovation consultancy, Clearleft.

So that first bit of information you heard is the title element. They don’t play much of a visual part in the interface now, apart from the bit that shows up when you’ve got a tab open. They used to provide a much more clear visual indicator of where you are in a site or the page you were on, but for screen reader users, it’s still the first bit of information that you hear when a page loads. And that’s one of the reasons it’s really useful to have a nice, clear title to tell you where you are.

Strategic design and innovation consultancy, Clearleft.

Which is perfect. I know exactly where I am and a little about what you do. So that’s awesome.

So when I visit any website for the first time, I will do one of two things. I’ll either dive straight in and probably use either landmarks or headings to navigate by. Or if I’m really curious, I’ll do it the kind of granular way and just use the down arrow key, which sort of takes me through one chunk of content at a time. So I’m going to start by doing that, just to get a feel for things.

Visited link, home.

Visited link, home. That’s nice and easy. The state comes from the browser. It’s a visited link. Link text is nice and clear, it’s "home" and I know exactly what’s going to happen there. So good start.

Primary navigation, navigation region.

Okay. So we’ve got primary navigation, navigation region. I’m guessing under the hood, that’s going to be a nav element. So my screen reader automatically detects it’s a navigation region based on the element.

List of six items.

And I’ve got a list in there. Lists are lovely! The browser counts up the number of list items inside the list, and tells my screen reader that information too, as you just heard. So it’s a list of six items.

And this is important. You can presumably see the size and shape of the list visually. This is kind of my equivalent and it lets me make choices about how I want to navigate from here. I can either go through the list one at a time, or I could just bypass the whole list if it had like 96 items in it. I’d be like, "yeah, I’m not going to listen to that little lot", but cause it’s only six...

Link, case studies

So I got case studies.

Link, services.

Services. I love your link text! Really nice.

Link posts. Link events. Link, contact

List end.

And I get to the end of the list and it tells me that.

Primary navigation, navigation region end.

And then I get to the end of the navigation.

So even just in that little kind of bit, you can probably start to see just how much information is being drawn from the HTML and the thought that’s gone into the way the website’s built.

I asked Cassie about the unique challenges involved in accessibility on the web.

When you’re learning to code, I think a large part of it is you’re just trying to get things to work. And I know for me, when I was starting to make websites, I was just trying to get things to display in the right order or look the way that I wanted them to look.

And you get JavaScript errors if you do that wrong and you can see if your CSS is broken, but you don’t really have that with accessibility. It’s not as obvious when you’ve got something wrong. You can get away with building websites that aren’t accessible without it being so apparent.

There were some days where I was putting together components and writing some CSS and there’d be loads of commits and I’d tick everything off the Trello board. But when I was doing the accessibility work, it was quite a lot of time for not much to show for it because it’s invisible and because it’s only a small amount of code. It can look like you’re not being productive.

Clearly Cassie cares about accessibility. But how typical is that?

I asked Laura if she wrote her book in order to encourage people to care more.

I think I needed to write a book to make people aware. I think that was the key point is... the caring comes after the awareness.

When most people find out about accessibility, they do care. A lot of people are often feel a bit ashamed about how they made stuff before they found out about accessibility. But I think if you’re a person who is living a fairly privileged life and you have easy access to computers, you’ve been able to learn to do design, development, you’ve gone to school for it and things like that, a lot of people don’t have interactions with people whose use is affected by poor accessibility. So a lot of people don’t have day-to-day interactions with disabled people. It’s just a fact.

A lot of people don’t have a particularly worldly experience. And particularly if you’re in an industry where a lot of people work from home or work by themselves, or work in a kind of very siloed environments, maybe you’re not going to come across people who will struggle with your site. But I think once people are made aware of those experiences, people tend to care more.

That certainly reflects Cassie’s recent experience when teaching a workshop.

I really love animation. That’s one of my favorite things, web animation. But not everybody loves animation. Some people have vestibular disorders and animation can actually make them feel disoriented and motion sick. So that’s something that I always try and look at.

We can use the prefers-reduced-motion media query to check whether someone has a system preference set that indicates that they would prefer less motion. And then we can sculpt our UI and our websites so that they don’t end up with too much animation, making them feel queasy.

I recently did an SVG animation workshop and I brought up quite a few accessibility things in that. In fact, like half of one of the days was about accessibility. And the very last thing that I taught everyone was about prefers-reduce-motion, because I wanted that to be the main thing that people were leaving with.

And there was a lot of feedback about that. Actually, people were very happy that I brought those points up. So I think it’s something that’s more and more on people’s minds.

Often it’s convincing your boss or your manager and it’s actually one of the things I hate the most about accessibility is how much time and energy is spent trying to convince people that somehow making a website better for disabled people will give them a return on investment or will give them good publicity. Like, I hate that about accessibility. I hate the idea that doing the right thing for people is not considered enough.

I couldn’t agree more. I could have spent time in this episode of the Clearleft podcast, extolling the business benefits of accessibility. But if you need that kind of transactional evidence in order to do the right thing, You might be a sociopath.

My thanks to Cassie Evans, Laura Kalbag and Léonie Watson.

You can find Cassie online at cassie.codes. Laura’s website is laurakalbag.co.uk. And you can find Léonie at tink.co.uk.

Thank you for listening. Or reading.