nic-steenhout
Chris Biscardi: [00:00:00] Hey, I'm Chris Biscardi and this is the Party Corgi podcast. Today, we have Nic Steenhout. Usually I introduce Party Corgi podcast guests, but Nick, I noticed that on your podcast, you'd like to have a guest or give the guests the opportunity to introduce themselves, but I'd like to give you the same opportunity now.
Nic Steenhout: [00:00:17] Thank you, Chris. Thanks for having me. Uh, so. Who am I, I'm Nic Steenhout and I have been doing accessibility for over 20 years now. And when I'm speaking accessibility, I'm mostly focusing on web accessibility at the moment. Uh, I'm a podcaster. Uh, strangely enough, my podcast is about accessibility and I, uh, Do a lot of public speaking as well around accessibility.
So if you have questions about accessibility, I guess I'm one of the go to folks to, um, to go to. And I tweet and I tweet a lot. So, um, that's the nutshell me.
Chris Biscardi: [00:01:01] Awesome. So you have a podcast called ally rules. Um, and I guess we should start off with like a11y is a numeronym. Right? So what does that stand for and what
Nic Steenhout: [00:01:11] So its A 1 1 Y or A 11 Y and as you point out, it is a numeronym and that's something that came up quite a few years ago, where there were a lot of long words like internationalization or accessibility. So basically you take the first letter of a word and the last letter of a word, you count the number of letters in between, and you replace that with the numbers. So accessibility is a and Y and there's 11 letters in between internationalization would be I 18 N, and because they're the first letter is I the last letter is N and there's 18 letters in between. So it's. It's something, uh, especially around accessibility that, uh, there's been a bit of conflict around because people are saying, well, that's not really accessible to, to use that, uh, that hashtag, but, um, while it's not accessible for some, it's been used so much that more and more people understand it and.
When you have limited space, like in a tweet or, or, or other social medias, um, it, it makes it easier to reference the topic and people will know what it's about, uh, how you pronounce it, where you're you say ally or a 11 y or a 1 1 y or you actually pronounce it accessibility. Um, it all comes down to the same thing in the end that that's what we're talking about.
Chris Biscardi: [00:02:44] And how do you define accessibility?
Nic Steenhout: [00:02:46] There are so many different ways to define that. Um, I ask that question to every one of my guests that come on on podcasts and out of about 60 people, I've spoken to, I've got about 60 different definitions, but it all resolved revolves around this concept of accessibility is the inclusive practice of making digital assets work for everybody regardless of ability or disability. And I think that's. Probably for me the best definition where we're breaking down. It's not just about websites, but it's about any digital assets, whether it's a video, an epub, a PDF document, or any other form format of numeric, um, content nd it's also looking at making it work for everybody, not just people with disabilities. If, if, um, if we look at. The way we write content and we might speak a little bit more about that later. Um, the way we write is really important. We can write in using the concepts of plain English, which makes it easier for someone with a cognitive impairment or learning impairment to consume the content, but it also makes it easier for Google translate to translate your content accurately, because maybe someone from Japan is trying to understand what you're talking about on your blog post that's in English. Uh, you never know who's going to come to your website and you never know if the the things you do to make your site, your course, your content more accessible are going to be actually beneficial for a whole bunch of people that don't necessarily have disability related accessibility needs, but they may have other situational impairments.
For example, if you are very fond of using great text on gray background, which is a Designer trend that's been going on for a long time, put yourself in the shoes of somebody accessing your content on a mobile phone. And they're in bright sunlight. Chances are, they're not going to be able to read your text.
So there's a very real, tangible example of how using proper color contrast helps people with low vision, but it also helps people with no disabilities.
Chris Biscardi: [00:05:13] Yeah, I think in my head, one of the ways that I do like to think about it is, um, there's this platform called egghead that I produce videos on. And then there's like YouTube videos and YouTube videos are typically like 10 minutes long.
They've got like a minute and a half intro. They've got them talking a lot in the middle. They've got the thing that you want. And then you made like the entire outro. And for like somebody sitting down listening to that YouTube video, like, can you focus for 10 minutes to find the one thing that you wanted.
And if you apply that to basically every different form of content, uh, it's essentially the same kind of thing. Right. But yeah, as people who produce a lot of this content, uh, I wonder what you think we should be focusing on when we write blog posts and create videos and things like that. We can get into a little bit more specifics later.
Nic Steenhout: [00:06:02] For blog posts or any other form of written content really there there's, there's a few things to look at. I mentioned plain English and really, it should be plain language because the, the principle apply equally to English, French, Spanish, and any other language. And those things you want to look at, uh, include, make sure you break down your content using headings.
So, you know, Build a hierarchy of content. So you can look at, at the headings on the page page and understand how the content is structured. It's going to help, uh, also screen reader users who are able to bring up a list of all the headings on a page, and they'll be able to. Catch the page at a glance a little bit like we do when we're looking quickly.
It's one way for screen reader, users to, um, to consume that content; frontload the content; put the most important information at the start of your article, you probably have seen the things TLDR too long, did not read. And, and that's, that's something that happens. We have three seconds to catch somebody's attention.
If you're waiting to put really the conclusion to crux of your content at the end of the page, you may actually have lost everybody until you, you front load the content. And that's important both in terms of the overall piece, but also on a paragraph. Uh, yeah, so always front load the content, try to make sentences short don't use too many complicated words, avoid jargon. So if you're talking to a bunch of structural engineer, it's okay to use structural engineering terms. But if you're trying to write about your discovery of the basic concept of structural engineering to the general public, try to avoid specialized jargon, use the active voice.
Try to avoid too many adverbs. There's a long list of things that go beyond that. But I think really those are the basic basic things to look at. Uh, and I found a, a writing tool, a free writing tool that's actually quite useful to get me started in terms of reducing sentence complexity is a Hemingway app, H E M I N G W A Y A P P.com.
If you don't know that resources, really, uh, a great free tool to look around, um, improving the, the writing simplicity. I find it invaluable too. Um, To help me identify where my, my sentences get too complicated. It's not the only two I use on my writing, but it really makes a difference. And it also can tell you about the, um, reading level of what you're writing so if you're writing something that is likely to be understood by somebody at grade six, so at grade nine or, uh, at university level, you're going to be able to gauge that from that app. Some of the other things you want to focus on when you're creating content is you may have heard, it's always a good idea to add visuals.
It makes it easier to read when you have you images, screenshots, and that kind of thing. So always make sure you, you use alt text to describe images that are informative as opposed to things that you put there just for eye candy, like decorative images, you would put an empty alt attribute. So a screen reader coming to that image is able to identify, okay, this is an image and the markup, the empty alt tells me that this is decorative. So I'm not gonna mention it to the screen reader user. Whereas if you're using a image of a graph or you're having an image of text or a screenshot that the information isn't really in text around it. You want to describe that appropriately in an alt text, those are probably.
The, the main points of content creation in terms of, you know, blog posts, um, some of the other things revolve around design, making sure that, you know, you're not using justified text because it's harder to read that. Um, if you have links there underlying, because you don't want to rely on color alone, to tell text from links, color, contrast, you know, make sure you have enough contrast between foreground color and background in general. That that would be it for, for creating content like text. If you're looking at things a little bit more involved, like videos or podcasts or audio files, then you want to look at these issues.
But also probably you want to make sure you have a transcript for your podcast that is easily accessible. So don't, don't. No, don't put the podcast transcript in a downloadable PDF. That's not accessible because you can to defeat the purpose. If you're doing video, you want to, um, provide captions.
Don't rely on the automated captions that often are, are available. For example, on YouTube. Uh, People with hearing impairments refer to those as "craptions", rather than a caption, because they're crap, you may get about 80 or 85% accuracy depending on your voice and your accent. And if, if it's easily recognizable, uh, and some may think, well, you know, eight out of 10 is not so bad.
Um, but what if the. Two out of 10 is actually the crucial content. Don't jump into the river, but the caption missed the don't. Suddenly you've completely changed your meaning, right? You have to pay attention to that. The fun thing with YouTube anyway, is if you have a transcript of your audio, you can actually upload that to, um, to YouTube and the tools.
The, uh, AI is actually going to put timing on your captions. So you don't have to spend too much time on creating proper caption file that's formatted properly and all that. You have tools. So. Leverage the tools you have to improve what's there. If you're looking at videos, uh, avoid images of text because if you're blind and the only thing you can process is the audio part then you're going to miss on what's happening as an image of text. If you can try to do what is called integrated described video. So if there are things that are only visuals. Whether it's images of text or specific actions somebody is taking that are crucial. You may actually include that in the narrative and you start describing a little bit.
The environment. So somebody walks into a painter's studio and the visuals is panning the entire studio, showing the easel and paints and some painting. And on the wall, you can build your narrative when you write your script to actually describe that as you're coming, and then you've given your, your video a lot more depth and richness.
Just a few ideas to get you started.
Chris Biscardi: [00:14:02] That was a lot of really good stuff. Thank you very much. Um, you were describing, integrated described video, uh, and I, it was the thing that popped up into my head. When you said that was this, uh, infographic trend, that's sort of been continuing for a number of years at this point.
Um, is that, uh, sort of a similar approach that you would take if somebody was creating one of these like nice, big, like, uh, sort of. What's the word for it. When people take a sketch notes, there we go. People make sketch notes. These days of the talks and things that they do, which are very similar in style to infographics.
So is this a similar approach that you would take to make them accessible?
Nic Steenhout: [00:14:41] Infographics? Sketch notes are a wild beast that is hard to tame. In general, I would say a good designer, a good coder can take just about any infographic and actually code it. Use a markup to make it look like the infographic, to have the visuals and all the arrows and everything, and make it really pop visually while remaining accessible under the hood.
So the HTML source. Remains something that is actually usable. So if you end up having a broken connection, maybe you don't have enough data on your cell phone or your, you know, you're working with a two and a half inch screen, or I don't know. Um, you still get the content. The reality of it is that most people creating graphics are not designers and are not coders and there's really quite an art to it so it's unfair to expect people to learn all the nitty gritty of how to code that and sketch notes. Well, the sketch note is, um, in and of itself pen on paper, right? So it's really hard to deconstruct that into an HTML. So the better approach there would be to provide the information in text after it. So typically you could, um, you could actually, you know, transcribe all the texts and the infographic or in the sketch note and break it down with headings and order it in a way that's logical. And then suddenly you've taken something that is very visual that may not have necessarily a linear content and you've made it more approachable linearly. So you can read it from top to bottom and left to, right. It's a bit more work, but you don't know how people will want to consume your content. It is very possible that somebody is, um, it's easier for them to process words that are, have no real images around it, or it might be.
Uh, it might be that you're giving some really important statistics and somebody needs to copy those statistics to reference you in, in another content, uh, another blog or whichever. So you want to make it easy for people to use your content and providing the information in actual HTML text will do that.
Chris Biscardi: [00:17:25] Yeah, that makes a lot of sense. So it's basically, don't just rely on the photos, just like if you're using some image on your page, but also make sure that you ideally build it out of markup, which we have great support for things like SVG and stuff these days to do that. Um, but also just not, not relying on a static image, which no matter what you're looking at it on, even if you're just looking at it on your phone could be, uh, not very easy to scan.
Nic Steenhout: [00:17:52] Yeah. Now you mentioned SVG, I should point out that SVGs are tricky to make accessible. It's not impossible, and I don't want to get into the nitty gritty of how to code and SVG to be accessible, but, um, there are some hoops to jump through. Uh, so don't, don't assume that an SVG can be as easy to make accessible as the image tag, for example, you know, the image tag, you use the alt attribute and it's done and dusted the SVG.
You have to assign it a role, you have to use the title, attribute the title element as the first child. And there's a whole bunch of little things you have to do to make it work.
Chris Biscardi: [00:18:41] Yeah, it makes a lot of sense. Um, instead of getting into the nitty gritty of SVG, let's say somebody just learned something.
Uh, whether it's SVG or something else. And as somebody who maintains a blog, they decide to write about it. Um, but before they publish that post, they want to go and find out, uh, to make sure that whatever they just learned is accessible to people. Uh, where would you send them? If somebody who says, I just learned this thing, I don't know where to, uh, go to find out if this is okay or not.
Nic Steenhout: [00:19:16] there's quite a few things you can do. Uh, ideally you would, you would inform yourself about accessibility in general and you will learn about, you know, The rules of accessibility and that can take awhile to, to master and get familiar with. So if you want to have just a, you know, a quick check, you can use some automated tools.
Uh, There's things like a W A V E by webaim. It's a plugin in Firefox and Chrome. You can install and it will do a quick check of the different things that are problematic. There is axe A X E accessibility tool by deque that is also available. There's. Um, accessibility insights and I think that's at accessibilityinsights.io is another free tool and, and insights is good because it gives you a mix of, of automated testing, and then it helps walk you through testing all your content is it's going to work for keyboard. Are the images done properly? Are the form elements done properly? Um, so there's different tools. The one thing to keep in mind is that if you rely only on automated testing tools, You may miss out up to 60% of, um, accessibility errors of accessibility barriers, because for example, uh, an automated testing tool can see whether or not you have the alt attribute on an image but it's not yet able to determine whether the quality of the alt text is appropriate for the image or not. It can't decide whether the image is only decorative or if it's informative. So there's, there's a level of human judgment that needs to be passed and that human judgment comes from, um, comes from experience and knowledge of the standards but I will tell you that even if you only look at your images and your heading structure and your color contrast. If you're looking at just that you've already made a massive difference. So it's better to implement to little bit accessibility then none at all, because, you know, if you say, Oh, it's too complicated, I'm not going to touch anything suddenly you're cutting a whole bunch of people. Um, whereas if you're using automated testing tools, you can catch a lot of the low hanging fruits too. Fix things and make things better for more people, it's better to be 80% accessible than 0% accessible.
Chris Biscardi: [00:22:16] That's true and I've definitely seen a lighthouse tests or lighthouse scores for accessibility that are, uh, at a hundred, but, uh, also horribly horrible, uh, markup insights and inaccessible,
Nic Steenhout: [00:22:29] you can have technically accessible websites that are totally not usable by everyone, much less people with disabilities.
So you have to be careful of treating accessibility as a checklist. It's more than that. It's, it's about making things usable for everyone.
Chris Biscardi: [00:22:48] So in one of your talks that I watched from, I guess this is 2015. Uh, you were saying that one of the biggest or some of the biggest culprits of poor accessibility where images, uh, things like data tables and forms, um, are those sort of still the biggest offenders.
Nic Steenhout: [00:23:07] Yeah. So funny, you mentioned that I just tweeted something yesterday and it's gone viral. I've got over a hundred thousand views on it at the moment, which is kind of fun. And I said, we don't have an accessibility problem. We have a base, a lack of basic HTML knowledge problem, and that is reflected in all the audits I do. I do auditing for a living, you know, and that's what I do. And I've been doing this for a long time and every single audits I do out there, uh, the vast majority of problems I encounter are pages that are not using correct HTML. You're going to use divs to make things behave like a button, or are you using a span, a series of nested spans instead of a data table, that kind of thing.
Uh, so proper HTML is one thing and it should be part and parcel of any developers, basic knowledge skills. Okay. You work in react, you work in vue, you work in angular even that's fine, but you should at least understand the basic HTML that it's supposed to render. Beyond that, um, the four main things that we encountered that are really problematic is keyboard interactions is images it's forms and it's color contrast.
So keyboard, you want to make sure that you can tab through every interactive element and interact with every interactive element so you can trigger them with the return key or the spacebar. Um, you want to make sure you have visible focus. So it's one thing to be able to get to each element, but you have to be able to know you're at, each element, because there's a lot of sighted people that rely on keyboard.
uh, images: The nutshell is if it's an informative image, you must have clear and concise alt text if it's a decorative image then you want to, um, use a no alt if the image is your only link text, then you would describe the destination of the link rather than describe the image itself. And, uh, the web accessibility initiative W A I has a wonderful tool out there called the alt decision tree. And that tools basically asks you a series of questions and depending on your answer tells you how you should handle the, um, the alt attribute. So that's something to look at. So we're talking about keyboard, images forms, each form element, each form input should have a programmatically associated label to it.
Uh, error messages should be associated with the input field when there there's an error. Um, there's a lot of nitty gritty around that, but that those are fairly big and then contrast, make sure you have enough contrast and what is enough contrast when you're looking at regular texts? So anything, uh, smaller than 18 point basically you want a 4.5 to one contrast ratio and for large text or non-text elements, you want a three to one ratio?
Chris Biscardi: [00:26:37] Yeah. I was just taking a look at this, uh, alt decision tree and it's, it's really, it's an interesting, um, example of not only the actual alt decision tree, right. And the actual, how do I decide what to put in the alt tag?
Um, but also. It itself is actually a good example of some semantic markup and that's sort of one of the things that we've been talking about over this entire podcast. Um, and when people say things like semantic, it's a bit of a shortcut for everything that we've been talking about. Right. So, yeah, I just wanted to sort of point that out because I feel like some people get hung up on the word semantic, uh, as opposed to all of the little things that we've been sort of talking about in terms of using headings and things like that,
Nic Steenhout: [00:27:23] semantics really only mean that your markup must make sense in and of itself. If it's the link code it as a link. If it's a button code it as a button. So if it goes somewhere, it's the link.
If it does something, it's a button and by using semantically meaningful markup, if it's a link, use the, a tag. If it's a button, use the button tag by using that, you give information to people about what the element is going to do. That's going to help a screen reader users to know. Okay, well, I'm on link I know that if I activate this, I'm going to go somewhere. I'm on a button. If I activate it this, I expect something to happen. So by using that, you're, you're helping screen reader users, but you're also helping search engines. Uh, somebody was saying a few years ago that Google is really the largest screen reader user on the internet.
Because the search bots behave and access content in much the same way that a screen reader does. So chances are, if you improve things for accessibility, if you use semantically, meaningful HTML, markup, you're also going to improve your search engine placement. I keep saying accessibility is good for everyone.
Chris Biscardi: [00:28:46] And on that note, uh, we're coming up on half an hour. Is there anything else that you would like to say before we end the show?
Nic Steenhout: [00:28:52] I would like to encourage everybody to start thinking about accessibility, start implementing accessibility, not next week, not next month, but today, because every little bit you do will make a difference to your users and maybe even yourself down the road.
I know transcripts, for example, transcripts for my podcast, I know are useful by for my audience, 27% of my audience preferring to, and, but I also have an indexed list of all my contents. So if I want to reference any one of my hundred plus episodes, I just run a search and I have it there. So accessibility is good for everyone, including yourself, even if you don't have a disability
Chris Biscardi: [00:29:41] and where can people find you on the internet if they want to find out more about your podcast for this beat that you were just talking about?
Nic Steenhout: [00:29:47] My podcast is A 1 1 Y R U L E S.com. My personal website and blog is I N C L.ca. I'm on Twitter. My handle is vavroom V A V R O O M. And that's probably the best three ways to reach me.
Chris Biscardi: [00:30:08] Nic, thank you so much for coming on the podcast.
I really enjoyed the conversation and I think it was particularly enlightening and will be for the audience as well. Thank you
Nic Steenhout: [00:30:16] Chris thank you for having me.
Chris Biscardi: [00:30:19] That's all we have time for today. Thank you for listening to the party corgi podcast. If you want to come and be part of our community of creators and hackers, you can find a link to our discord channel at partycorgi.com.
You can also find us on Twitter @partycorgipod. I hope you have a wonderful day.