WPS 007: Accessibility in Action: Strategies for Inclusive Web Design

Accessibility. We see it in the physical world, with wheelchair ramps and disability parking spaces, but how much consideration do we give it in our website projects? I myself have been somewhat lackadaisical with this facet of web design, but after this conversation I recently had with Vanessa Rusu, I will be adding some steps to my process. Vanessa Rusu has a web studio and also teaches WordPress UI and UX design. She loves being in the space between design and development, and today she shares her views about website accessibility and steps through some of the elements of a website that can be purposefully created with various levels of impairment in mind. She talks about design development and writing copy, and then breaks it down even further, delving into color contrast, fonts, link cues, heading usage and just generally striking a balance between design and functionality. Take a listen, because I think she'll spark some new thoughts for you, as she did for me.

My name is Cathy Sirvatka, and this is Web Pros Savvy, a podcast for freelance web designers and developers who are always on the lookout for ways to grow their business. You'll hear interviews with experienced freelance web professionals about their business operations, the services they offer and the types of clients they work with. They openly share their stories and pull back the curtain on how they achieve success, so that you can boost your own business. Here we go. Welcome to the Web Pros Savvy podcast. This is your host, Cathy Sirvatka. Vanessa, welcome to the show. It's so good to have you here.

Vanessa Rusu

Yeah, thanks so much for having me on. I'm excited to chat with you today, good.

Cathy Sirvatka

Can you give us a little background on your work as a web designer and how you came to work for yourself?

Vanessa Rusu

Yeah, I originally went to school for graphic design. I got my start in the print world and went to school for design, then got started in a studio. I worked on more print-based things like branding and marketing materials and that printed brochure. While I was working there, actually, I was always just a little bit interested in web. We had shared or the studio that I was in had shared space with a web agency at the time that was building websites and coding things. I always just looked over my shoulder within that space. I was always so interested in seeing them actually translate those design mockups into actual functional websites and digital experiences. That was really, really interesting to me.

After a couple of years getting my feet wet with the branding and the print-based things, I decided to go back to school. I went for a web development program and learned the ins and outs of back and in front of development. That's why I really found that I really loved being in that space between design and development. The digital space spoke to me. Coding was really hard to learn, but I loved that space in between there. After that, I ended up just by happenstance moved out to Vancouver and got a job out in Vancouver, Canada. That's where I am right now doing UI development, Taking designs and actually coding them out for large-scale e-commerce platforms. Through all of that, I just really had an inkling to go out on my own and really dive into what it looks like to marry design with development in the same role. That's what I'm doing now. I run my own studio and we do all things print web. We still do typical print branding and print collateral. I also do websites and development as well. That's how I've gotten to where I am.

Cathy Sirvatka

Wow, that's really good. You are kind of like a one-stop shop, sounds like you print and the development and the design and all of that, which is really cool.

Vanessa Rusu

Yeah, all of it really interests me.

Cathy Sirvatka

That's really cool. You mentioned that you were interested in the coding. What kind of coding do you do, or do you know?

Vanessa Rusu

Yeah, I'm really interested in the way that what we design how it shows up on the screen so that's very front-end. For anyone who is a coder, it's considered front-end development. Specifically, I like to coin what I do as UI development because I like to really look at what we're designing in our XDs and our Figma and things like that and really make it as pixel perfect as possible and as functional as possible as actual interactive experiences on the web. I stick mainly to HTML. CSS is my jam, that's what I love, and JavaScript as well. I do get into the more JavaScript heavy things, but CSS is kind of my sweet spot, I would say.

Cathy Sirvatka

Oh, that's cool. Hey, there's so much you can do with CSS now that can actually put.

Vanessa Rusu

I love it yeah.

Cathy Sirvatka

JavaScript aside and a lot of it, and just do the CSS. It's advanced so much. Yeah, that's really cool. That's amazing. Good for you for learning the JavaScript, because that to me is a whole other part of the brain.

Vanessa Rusu

It's tricky. It is, yeah, and I definitely struggled when I was learning it, but I just found it so rewarding when things worked properly and I could really take things from design through development and have that understanding of how you start on an art board and you end with an actual kind of you know, actual tangible user experience. I thought that was so cool, so for me it's super rewarding.

Cathy Sirvatka

That's awesome. Yeah, that's actually what I got me into it too. The fact that you could take something and write some code Well, this is back in the day, but you know and then have it like this code make an image on the screen. It's amazing to me. Yeah, I love that. Yeah, so cool, all right. So now, as part of your process in making websites for your clients, you really do focus on the accessibility part of the website. Is that correct? I do, yeah, where does that come from for you?

Vanessa Rusu

Yeah. So when it comes to accessibility, like, I'm definitely still learning in this area and I don't, like, consider myself an expert per se, but it is something that I actively want to get better At and I'm constantly researching and really trying to see, like am I doing this right? What should I be doing better? I think it's really cool that designers can actually do something that's going to make the web and the digital space better and more inclusive and more accessible for everyone.

Cathy Sirvatka

I mean because you did put such a focus on it. Was that something that you learned in your previous work, or what made you? Because I know a lot of web designers and I have to say, myself included don't always pay as much attention to accessibility as we should. But you seem to have a good focus on it and it's an important aspect of your projects. So I'm just wondering was that something you learned in school or were you just inspired to be inclusive, you know? Just from that angle.

Vanessa Rusu

Yeah, so accessibility is always something that's kind of been close to me. I would say I myself don't have a disability. I don't identify as somebody who does have a disability, but I did grow up really close to someone that does. My sister does have a CP, which is cerebral palsy, so she is in a wheelchair and she does have issues with reading and writing. She can't really read and write. She can recognize patterns but she doesn't read and write and I just kind of grew up really close to seeing how lack of accessibility and lack of access can directly kind of impact your life and how we should be as a society really kind of taking that into account.

In all areas of life. We want everything to be accessible for everyone and inclusive for everyone, and so I kind of grew up with that like more in the physical world where I was looking at, okay, buildings aren't always accessible and houses aren't always accessible and that can put a huge strain on things and even stores. Sometimes the aisles can be too tight to actually navigate a chair around and obviously my experience here is all around navigating a wheelchair and kind of the reading and writing and things like that. But it wasn't until I got into my web development role that I really saw that accessibility could be something that we actually cater to and really think of and include in our design process on websites.

So there were a few mentors, I would say, at my development role that really advocated for accessibility, and when I saw the conversations that they were having and the things that we had to actually consider, I started to really understand how okay accessibility and access isn't just something for the physical world, but it is something that is also for the digital world and everybody does deserve to be able to move around in the physical world and move around in the digital world.

So anything that we can do to kind of bridge that gap and make sure that we are offering as an inclusive, as an experience online that we can, I think is really important to kind of consider, especially in the design process. So if designers can make things more inclusive, then I absolutely kind of advocate for that and learning more about that. I myself am not an expert in any means in terms of exactly what needs to be the most accessible, but it is something that is close to my heart and something that I really do care about including in my design process, so that I am not intentionally or unintentionally creating barriers for people and that everybody does have fair access to the things that I'm designing.

Cathy Sirvatka

Okay, I love how you said you know, we think about how people can move around in the physical world, and so we also need to consider how people can move around in the digital world. I mean, that's just such a great way to put it and it puts it in a better perspective even for me. I think that's neat.

Vanessa Rusu

Yeah, yeah. Anything we can do to help like really unblock barriers everywhere, I think is really important to consider.

Cathy Sirvatka

Yeah, I mean that's really cool. So when you're doing a website, what elements of a website do you consider when you're adding accessibility or accessible features to the website?

Vanessa Rusu

Yeah. So accessibility is it's a huge field, like it is all encompassing. It's not a one-stop shop where a web designer is gonna be able to completely you know stamp of approval say this is a completely accessible website. It does have a lot of considerations in the design. It starts with design. You do make a lot of design decisions. It also rolls into development and your developers are also going to be making decisions that hopefully make things more accessible for their users, and then it goes into copywriting. So there's a lot to consider.

But when it starts with design, what I typically like to consider when I am creating a website and I am looking at it from the design perspective is I start with a few basics just to kind of lay the foundation and kind of a short list there is. I like to consider color contrast. So there is, there are regulations or guidelines around how much contrast should exist between, say, your typography and your background. So we want a higher level of contrast in there. Think black and white. You know black text on a white background, there's a ton of contrast there. But maybe if we're doing tan text on like, a peach background, there's not as much contrast there.

So I like to kind of make sure that as I'm designing, I am incorporating or at least being aware of the color choices that I'm using, that I am meeting the standards for color contrast, and there's a lot of checkers online that will help you kind of figure out what you need to do and how accessible you need to be. But color contrast is a huge one. You also don't wanna rely so much on color alone to communicate things. So if you're designing, you know, maybe a contact form or something where you're having people kind of have to interact with or understand things about the page, typically you want things like your links and your error states and things like that to not rely so much on color to only communicate that message. But you wanna use other visual indicators whether that's icons or underlining or things like that, to really signify to the user in multiple ways that you know there's a message for them or there's an action here that they can take.

Cathy Sirvatka

Wow, yeah, that's interesting. You know we did away with I feel like we did away with underlining links and that was like the one thing. Like you always did in the early days, you always had links underlined as the queue, the visual queue. This is clickable and it seems like people, in their desire to be creative, to be a little different, kind of moved away from that and maybe, you know, did some other things but maybe aren't as accessible, like you said. The color, you know, I don't forget what you said tan on the peach or whatever. You know those kind of things yellow on peaches, you know it's not, that's not a good queue for some people. They're not gonna get it.

Vanessa Rusu

Exactly. Yeah, you wanna be as kind of explicit as the way that I like to kind of think about it as possible when it comes to color. You want a lot of. You wanna make it obvious, like you just want everything should be super obvious. And if you desaturate your design to black and white, can you still pick up on those queues as to whether this is a link and this is a button and this is an error state and what are you communicating? Does it work if you remove that color component? So that's something I typically consider as well.

Cathy Sirvatka

I love that idea. If it devolves to black and white, does it still work? Does it work first of all for the accessible and then does it still work as a website? Yeah, that's kind of interesting. That would be an interesting exercise actually to try and do Start with black and white.

Vanessa Rusu

Yeah, for sure, and you can actually get if you design an X to your figment. I think those are the two big ones right now. At least you can get plugins that will actually help you kind of emulate that experience. So if you are designing and you are kind of saying, okay, I wonder if this is accessible for people who might have different abilities or different kind of color impairments, say, you can get plugins where you plug it in and it will actually emulate your design in various color impairments. You can see if somebody doesn't have the color red isn't as strong, what does your design actually look like? So there are things that you can add to your design workflows that will help you test that way like much more easily than just trying to do guesswork on it.

Cathy Sirvatka

Oh, that's really cool. Do you have any plugins that you always use or that you prefer?

Vanessa Rusu

Yeah, so the one that I use with XD because my workflow is in XD is called Stark and there are like free and paid versions of that plugin. But you can also the free version is quite good to get you started in this area, where you just add it to your XD and then, while you're designing, you can actually just kind of select elements and you can check the contrast on them, see how they line up against accessibility standards, and then it will also simulate color impairments or different ways of seeing color, so that you can check, you know, if somebody is more on the color blind spectrum, what is my design going to look like for them. So Stark is one that I'd recommend.

Cathy Sirvatka

That's really good, because I know there's at least a few different types of color blindness. So having a plugin that kind of considers all those is really good, because none of us are doctors or we don't know these things if we don't live with them.

So I think that's really good. We're gonna provide a link for that plugin in the show notes, because I think that's something that a lot of us should be using, myself included. You mentioned, I think, standards like the standards for accessibility, and in our previous conversation you said something about AA standards and I was in my mind I'm like I'm affirmative action, what is? But there's actually this is my ignorance. There's actually grades of accessibility right there's A, there's AA and there's AAA.

Yes there is. So do you know what they mean specifically or you aim for? I think you said AA, correct?

Vanessa Rusu

Yeah, it's really common to aim for AA. So it kind of backing up in the world of accessibility. When you're starting to kind of understand and think about accessibility or design process, it can honestly be fairly overwhelming. It isn't the easiest thing to onboard into your process because there's so much terminology, there's different levels of accessibility, there's different kind of things to look for and then within that when you dive into okay, what are the contents of these various levels of accessibility? It's kind of a whole manual in itself in each level. It can be quite daunting to look at.

But in terms of breaking it down to the bare basics, there are three levels right now that are kind of widely recognized as accessibility standards. So there's a single AA, aa and then AAA. So if we break that down even further, basically your single AA is like the minimal amount of compliance that you're gonna get. So it's essentially just providing like the bare minimum functionality for users with disabilities or users of various abilities to kind of use your website properly as you intended. So this often covers things like can your user navigate with a keyboard? Are there captions and alt texts on your imagery, like, are there the bare bones, basics? So that's level A. Aa is usually, in my experience, is kind of a standard of where we're all trying to be right now which is considered to be acceptable compliance. So AA typically is what you're striving for and this is kind of like the goalpost for where we wanna be right now on the web, and it just means that the majority of people with disabilities or various levels of abilities can use your site effectively without major blockers or impairments.

So when we're looking at this middle level, this double A compliance, we're really looking at things like color contrast. Are your colors, you know, just like what we talked about previously are the colors? Do they have enough contrast for somebody to see them? Does it make sense? You know, if we move that design into black and white, does it still communicate effectively without the use of color? Is our navigation set up in a way that makes sense and is easy to use and is consistent throughout the websites? Are we offering that kind of consistent experience?

Can somebody use a form without, you know, really hitting roadblocks or frustration?

Are our forms accessible? Can we fill them out and submit them and understand, when we're looking at them, what we need to do if we do hit errors or roadblocks, things like that. So AA just opens it up to kind of a more a majority of people, giving the majority of people access, and then AAA is what's considered optimal compliance. So this one is like super difficult to achieve and not everybody needs to achieve it or even can achieve it realistically, but it means that your website is accessible to the maximum number of users that might have, you know, different levels of abilities or disabilities and that means that you know if you have video or, yeah, particularly video content, that you also provide maybe a video of interpretive or interpretation through sign language, things like that very high levels of contrast, very, very. You've incorporated quite a bit of tools with AAA to reach that optimal compliance. A lot of times it's not really like feasible to achieve optimal compliance, which is why most websites aim for that AA compliance level.

Cathy Sirvatka

Right, I think I looked at a AAA and it seemed like more basic. It was very informational. Yeah, it was kind of what we might look at as designers, as bare bones, you know. With the contrast is just like white background with a darker text. There was really not that much imagery. Everything seemed to be, you know, very hierarchical in their presentation of the content, which would make it much easier for somebody to navigate with a disability, I would think.

Vanessa Rusu

Yeah yeah. AAA websites are usually not very like. They don't. They're not heavily designed as much as they are designed to be functional, so you're doing more things that are supporting functionality than aesthetics at that point.

Cathy Sirvatka

Yeah, it's sort of a different animal. That's really interesting. All right, so talking about website elements with regard to accessibility, let me just pick on fonts. We just talked about colors. Are there certain fonts that are more accessible than others, or a combination of fonts, or how do you address the font situation?

Vanessa Rusu

Yeah. So I think in my research, in my experience today, there's no like hard and fast requirements around what fonts you can and cannot use. A lot of accessibility is in not the on off switch of, yes, no, accessible, but really being critical with our design choices and thinking and kind of testing. If you have, you know, the budget to kind of test and actually get feedback on on on what you have chosen to implement. But there are like guidelines that you can kind of consider so basic, your basic system fonts like aerial, helvetica, verdana, tahoma, those kind of ones that come out of the box when you're, when you're designing, those are typically considered to be quite accessible. So those are obviously choices that you could make. Or fonts that are very similar to those basic system fonts in their legibility and their weights and their sizing and and everything like that Typically are good choices.

What I like to do is just really look at it with a critical eye again and say you know, is this legible? Am I compromising legibility for aesthetics here? You know cursive fonts are, can be really pretty, but they can also be fairly difficult to read. So what type of usage am I, am I using with the fonts that I'm choosing and does it make sense? Does it make sense to me? Does it make sense to someone who might, you know, have a reading or learning disability or, you know, might need more time to kind of read, or might be even new to the language? Maybe they're just learning, you know. I mean, I'm designing in English, but maybe they're just learning that. And am I giving them an inclusive experience where they're not struggling to read the words that I'm choosing to put on the page?

Cathy Sirvatka

Oh my gosh, that's a really good point If you get, you know and I find it's really popular today these scripty fonts to be used as headings or headlines or whatever yeah, very curly, curvy, fancy fonts that look super cool. But yeah, if you're, if you're safe from the Middle East and you're not, even you're still getting used to our characters and our type, that would be, I would think, crazy to try and understand.

Vanessa Rusu

Yeah, yeah. So I like, I think, and I think there's a time and a place for everything. I think if you're relying on very decorative fonts to communicate your core messaging, that's when you might need to kind of reassess. But it doesn't mean that you can't use it as you know accents or or kind of visual aesthetic touches. It just means that you need to kind of assess, or I would think you would need to kind of assess the is the messaging core to what I need to communicate and does that, is that inclusive of a wider audience?

Cathy Sirvatka

Yeah, I hear you. Okay, so like serifs and non-serif or sans serif, I took French. Serif or sans serif Does it matter? Does serif or sans serif matter?

Vanessa Rusu

So, that's something I can't really speak directly to with a lot of knowledge or experience. I know that you like fonts that are considered accessible are like help Helvetica, which is a sans serif, but then you also have Times New Roman, which is widely considered to be an accessible font. That is a serif. So I think for for my experience, it just kind of really comes down to legibility and then, you know, testing.

Cathy Sirvatka

Okay, like you said, going back to the system fonts which have a little bit of both. Like you just said, it's funny because, again, in the whole timeline of the web and its existence, we started out with those fonts. Those were the, those were the web safe fonts, the only ones we could use. I know because not everyone would have them on their computer, and so you had to use fonts everybody had. And now we're just driving it away from those things, but again, they still make sense in a lot of situations.

Vanessa Rusu

Yeah, absolutely. There's definitely a time in a place where they still totally make sense, and it's not that you can't use any other font. It's just that I think those are a great frame of reference for what is accessible and you know kind of identifying, does it? You know, using that as a guidepost, I'll say when you're assessing your font choices, I like that a great frame of reference.

Cathy Sirvatka

Yeah, that's really good. Now, earlier you mentioned your sister who has CP, and you think about her when you are designing websites, or or do I? I'm putting words in your mouth, but you talked about the experience you've had with her with regard to accessible buildings. You know that kind of thing. You see it from her perspective. But you mentioned something in a previous conversation about patterns and that she can recognize design patterns really well. So in patterns with this would be the not the user experience, but the interface. We know that logos tend to be in the upper left and menus tend to be in the upper right.

Can you speak to that a little bit as far as like where we expect things to be and and should we? Can we deviate from that, or should we?

Vanessa Rusu

Yeah. So yeah, going back to like the way that my sister specifically sees the internet and interacts with the web is and again, she's only, you know, she's one person, but she does have a disability and I think she is important. Her use case is important to consider but it is, you know, only one of many out there. But what I've been able to kind of see with her and what she's able to do, which I think is so cool, is she can really recognize like patterns in user interfaces and kind of beyond that she can. She has this global design pattern understanding, we'll say so, I like to call it global design patterns. But if you can enter any website, she'll typically know that the logo is going to be in the top corner or the top center. Her navigation is going to be, you know, in the top usually it's the top right and that any like copyright or legal information or anything like that she's, she's picked up that that's all kind of in the footer and then she can use, you know, imagery and UI patterns to navigate what's a button, what's not a button, things like that, and I just think that that's that's super cool.

So for me, kind of watching that she relies on those consistent elements to kind of be in place really makes me an influence is my design process to say, okay, this is more of an inclusive, understood design pattern. So when it comes to things like our headers and our navigations, I want to keep those consistent so that people who are, you know, might have different abilities or different understandings that they're navigating my design with that they really understand and have have a I'm not making them work to try to figure out my specific website and my specific design pattern. So I really like to use those globally understood patterns of where our navigation is and what our, what our headers look like, things like that. And making sure that you know buttons look like buttons and links look like links and and we're just kind of helping the user along with you know that non verbal language that does exist in UI components.

Cathy Sirvatka

So what do you think and, by the way, you had mentioned to me in a previous conversation, and I can't remember if you mentioned it here that you do teach or you were teaching. Do you still teach?

Vanessa Rusu

I do, yeah, yeah, so kind of, along with running my own studio, I do teach very casually at the College here in Vancouver. I teach in the design program and I teach the web centered classes. So I teach everything from you know WordPress to web design. I even do a little bit of web development teaching, which is a whole other beast, but I do have students. So I do kind of incorporate all of the you know, the accessibility, the thought process and the incorporating accessibility into your design process. I do try to include that in what I do teach to students, because I just think it's so important to kind of have you know the checklist, if you will, or the understanding that design is about aesthetics, for sure, and it's about communication, but it's also about inclusivity and kind of opening up your design process and the things you're building to the widest level or, why, widest amount of audience and people that you can.

Cathy Sirvatka

Okay, because I was thinking do they try to step outside those bounds? You know, in trying to be creative, especially when you're a student, you're trying to, you want to try new things. You've seen things a certain way and you're like, what if I do it this way? What if I put the navigation and I've seen this in websites where the navigation's on the left side and maybe it's, you know, tips, so it's it's facing to the right. You know, there's just fun new, different ways of doing navigation, that kind of thing. Do you see students doing that?

Vanessa Rusu

Yeah, yeah. So I think I think that, like everybody, if you're in a designer at all, you've probably experimented with trying to break that grid or break that wheel or reinvent the wheel in that way. I know I definitely have in the past been like, okay, like what's another way that I could, you know, totally innovate this header or just like do something that's a little bit different and a little bit cool. And you know, there's definitely like a time and place to kind of explore with what that looks like and it is a common, a common thought to really try to push the bounds of what's possible in design. But, kind of going back to the accessibility conversation, I do think that it's important to have an understanding that you know global, global design patterns and just inherent ways that people expect the web to be set up. That does have value and it is something that we should definitely consider when we are designing.

So if we are trying to, you know, move the navigation To the bottom of the screen, which has, you know, a lot of people do, I know I've kind of experimented with that layout or doing like a horizontal scrolling website instead of a vertical scrolling website. Things like that. They're cool to experiment with. But we really have to kind of also assess the design for inclusivity and say who who's going to get a kick out of this and who's going to think it's amazing and who's not going to be able to understand how to use it. And who are we kind of, you know, excluding from being able to use this design? And is there a way that we can still innovate here without completely excluding people who rely on those cues and those layout patterns and those consistencies?

Cathy Sirvatka

Wow, that's really good. Yeah, it is, it's. This is a tricky balance between wanting to be innovative and creative and give your clients something that's you know, not cookie cutter, yeah, while still considering those who Need those accessibility features, which I love your term I haven't heard anyone actually put it this way but global design patterns, global design patterns, that's really good.

Vanessa Rusu

Yeah, I'm not sure if that's specific to me. That's just typically what I use to take and pay it, but I'm sure there's a word out there. If it's not out there, you should coin it. Yeah for sure.

Cathy Sirvatka

I will. I will give you credit for that one. One last thing about the elements on the page. What about using heading levels? I see a lot of websites that don't have the heading levels in the right order. You know they're actually there to help outline the content. That's not only beneficial to somebody with disabilities, but also Google likes it when they're used correctly heading level one, heading level two and I see a lot of people you know I'm going to put it an H3 here because I like that font or I like the way that one looks and it's just quick and easy to pop that there, even though it doesn't really make sense in the hierarchy of the page.

Vanessa Rusu

Yeah, that's a huge part of, I think, a design kind of decision that you can make as a designer upfront is what are your heading levels look like? Because you're totally correct in saying that they're not just aesthetics, right, they're not just meant to be six different design options that we can include on a page. They actually serve purposes beyond that in terms of how you know Google's reading your site when they're going through and skimming your content and organizing your content. They are looking at the same level and that is dictated by largely, or also dictated by your heading levels of how you're organizing your content. And then also things like screen readers will use that to kind of go through a page and create a navigation or table of contents, if you will, for users who might be using assistive devices to really navigate and skim and and Pre read that content of where they want to go if they're using, you know, assistive devices or screen readers or things like that. So I think it's really important To kind of consider your heading levels upfront where you're at the design phase and you're saying, okay, like I'm going to have, you know, six, you have six heading levels. You have each one through, each six if you're in the development mode but heading one through six, and how am I going to use those so that I can have, you know, consistency throughout the design? But that as we're designing things and things change, that there is, you know, this guidebook or style guide to go back to, of this consistent design pattern that we're using where H2 should be in this place and they're going to look like this.

So I always like to think about it and the way that I teach it kind of to my students and and the way that I frame it to them Is I kind of try to think of it like like a book, like each page on your website is its own little mini book.

So if you think about a book, there's only usually I mean most books in the world only have one title.

Where that's the title of the book, it's going to tell you, maybe, if it's like a textbook, it's going to tell you exactly what Topic or subject that that textbook is about and that would be considered your age one in the web design world, where your page title, or your page heading, or that book title, if you will, is going to be usually your most prominent Heading on the site.

And then, if you look down deeper into the book reference than the next thing you would look at is your chapter titles and that would kind of tell you, okay, like, what is the topic of this chunk of the book and the way that relates to web design is your chapter titles become your age to and your like section titles as to okay, what is this section of content on my page about and how do I represent that with a heading. And then you kind of even dive, you know, one level deeper, and so on and so on, where your age threes become, like your sub, your subheadings or your subtitles, and they exist in your chapter Of your you know, book in the sense, but they're more specific to exactly what is this block of content or this specific piece of content in this section going to be about. So that's kind of the way that I like to look at it is each one is book title, each two is chapter title, age three is subtitle and then so on and so forth.

Cathy Sirvatka

Yeah, that's really good and I like yours sounds more creative and fun than I always think of it as like the term paper that we had to do in school, in college, you know, and you had to. You had to provide an outline. That was part of the process of creating this huge term paper and I like the book better than the term paper analogy. It just sounds nicer.

Vanessa Rusu

Yeah, yeah, I think it's definitely, there's less you know, PTSD from your college days in there, but it kind of does line up in the way that if you think about it as like a table of contents from even you may be your your term paper, you can kind of think about it that way as well, where screen readers and things like Google are going to look at your page and they are going to kind of more or less pull out the table of contents and that is going to be your heading structure. So you want it to kind of make sense in terms of how you're laying out your content.

Cathy Sirvatka

Yeah, yeah, that's that's… I will take your book analogy. And bring it with me.

Now when you're dealing with clients. You're making client websites. Some clients have very strong ideas about what they want in their website or how they want it to look, and some and these are probably our favorites right, they totally trust us and what we present to them and they accept it because they know you're the pro. But when you have a client who has very specific ideas and maybe doesn't fit in with the accessibility aspect of things, first of all, have you come across that and, if so, how? How do you deal with that with the client?

Vanessa Rusu

Yeah, that's a really good question. It definitely does come up and I'm sure whether you're the client or the designer, at some point you're going to think like, oh, I wish I could have. Or you're going to think, yeah, you're going to be on a project and say, oh, I wish I could have a specific color palette, but it's, it's not accessible. Or my brand color is, you know, maybe yellow and I want to use that for my text here and that's maybe not the most accessible thing. So it definitely does come up.

Typically, it's easiest to kind of address accessibility concerns in color at the beginning of a project. So if you're the designer, you kind of build your color palette around or with accessibility in mind. But if you're a client, you might not always know what that means or what that, what, what accessibility truly means for a website. So if clients ever do come to me and you know they want something and I look at it and I just it's not going to be, you know, meeting our color contrast, say, for accessibility, what I typically will try to do is just educate them on you know, what is accessibility on the web, why do we want it, why do we need it and generally, you know, going to them and saying, you know, these colors, while they're great and they're on brand, they aren't inclusive to everybody and they aren't actually going to meet accessibility requirements, and I think it's really important that we do make sure that we are as inclusive as we can be.

So here's, you know, here's my alternate solution and I'll propose something that is, you know, the most close match that does meet accessibility requirements, and often that's what clients need, like that's. All they need is Is they just need to kind of be aware that that's even a consideration, because they're not web designers, they don't stay up on the trends, they have no idea half the time, and it's our job to kind of educate them in that way. And a lot of them will say, oh, absolutely, I want to be accessible, I don't want to exclude anybody. Like, let's figure out a solution here. So that's obviously really great if that happens.

If it doesn't happen, you know, if they, if they still get pushed back on on Including accessibility or including compliant colors or things like that, at that point you kind of just you have to, you know, tell the client that you do want to proceed with accessibility and there are, depending on where you're located. There are actually, you know, legal requirements that are coming into place around accessibility, and you just have to have to kind of hope that, if the inclusive inclusivity conversation isn't enough, that Kind of backing up the need for accessibility with that proof wherever you're located is going to do the trick.

Cathy Sirvatka

Do you Put anything in your contract regarding this or have like a checkbox saying I'm willing to sign off on the fact that I've chosen Of course contract would come up before design. Or do you do you offer something in writing that kind of Covers you and acknowledges they've made a choice against what you've suggested?

Vanessa Rusu

Yeah, no, so it it has in the past. I Would say I don't. I don't necessarily included in my contract as like a written thing. Right now, I do have the conversation early in the process saying you know, when you were, when you work with me. Part of my process is that I am, you know, going in with a mindset around accessibility and I really do want to make your site as accessible as possible. So I am going to look at things like content and color contrast and navigation patterns and things like that.

If I get a lot of pushback on Accessibility, typically what I'll do is I will send an email saying okay, like here, here is you know what I think we should do. Maybe there's not budget for that or it depends on, you know, the client and the project and the scope and things like that. And just so you know like we are going to proceed without making this Accessible. And I just put it in writing and I have them kind of agree to that beforehand, just so that it's tracked, you know. And and if there is, you know if rules and laws are in Place where you live and where your client is based. Out of that, you do have a paper trail on. You know, we did try to make this accessible and I've done my best, and it really was a conscious decision that was made to not address this problem.

Cathy Sirvatka

Yeah, I think that's a really good idea. I mean, I know in our country I've heard of some businesses who have been sued large businesses to that Because their website was not accessible. So I don't know if the web designer has been has gotten in trouble, but boy, I would sure want to cover my butt on that one.

Vanessa Rusu

Yeah, absolutely. You just want to be safe rather than sorry, especially if you are keeping up to up to date on accessibility and you you know you knowingly are doing things that you wouldn't ideally want to do. I think for me it's just better to kind of put it in writing so that you are doing as much as you can and Hopefully you know if it's not able to be prioritized right away, that down down the road, that they will come back and kind of, you know, make room or budget for it, to go back and say, okay, let's, let's revisit this and let's do it right. But that being said, it is kind of easiest if you are joining a project, it's easiest to have these conversations, like way, at the beginning of the project.

And if I'm ever doing, you know, in my studio, if I'm ever doing a development project where I'm not as involved in the design and I'm more involved in the development aspect, I typically request to see the designs early in the process, kind of as the client approval and Revision phases going back and forth, so that I can kind of add that piece to the discussion earlier rather than later, because it's, you know, it's easier to incorporate it at the beginning of a project, then get all the way down the road and you've spent months on. You know this, a design that's been approved, and at the end of the road you realize, oh my gosh, it's not accessible and there's just no budget. There's too many wheels in motion, it's too big of a task to fix it. So, yeah, I always just like to try to get get in early and at least plant the seed early that we want to accommodate, you know, especially like things like color contrast and design patterns up front, as as early as we can.

Cathy Sirvatka

Yeah, so you mentioned budget a couple times. Does making an accessible site increase the pricing of a project? Or I Know you try to do it in every project, but you Maybe you're just talking about having to go back and read. You know, recreate some things to be accessible, but does Accessibility increase the price in general of your websites?

Vanessa Rusu

I do, yeah, so I included in in my price. It's just part of my design process, so it's not something that I Specifically outline. As you know, you were paying for color contrasts to me, double a compliance like that. I don't go that deep with it or anything like that, but it is something that you you do need to spend time on. So if you include it in your process, it just becomes part of part of the price.

It is expensive if you Need to do it after you've done your project.

So if you get all the way to the end because if you've chosen, you know, like fonts that don't make sense or colors that don't make sense, or navigation patterns that that aren't, you know, most, the most inclusive or Accessible for a wide variety of people, then that's gonna obviously cost a ton of money to go back and like basically redesign things.

It can be a huge investment. The same goes with the development phase. So if you are developing a website and you're not Keeping accessibility top of mind and doing things like using semantic coding and adding your descriptions and tags and and patterns and heading levels, you know, using your h1 tags instead of spans or divs or something like that, it's obviously gonna be more time consuming and more intensive to go back and comb through it, but it is something that, if you work it into your price, there are definitely Additional things to add to the checklist when you are doing it, but it's not something that you know in my experience is A huge add-on if you're tackling it with that in mind up front at the beginning of the project.

Cathy Sirvatka

I see that's. I see that it would make sense. I mean, going back and trying to retrofit a website Would be. I mean, it's almost. It's like basically a whole redo, depending on how badly they veered. Yeah, it depends on how Exactly. Yeah exactly. Now, what tools do you use in your process? You mentioned a plugin for Was it for XD or figma? I can't remember. Or maybe it will work with both, or maybe it will work with both.

Vanessa Rusu

It's for both. Yeah, so I use Stark if you're designing for XD or Figma and I'm sure there's other ones out there, but that's the one that I use, where you can literally be in Figma and you can just select your text and your background and check it against color contrast and other accessibility indicators from directly within your plugin, which is great when it comes into web designing. Say, you're out of XD and you're actually in a browser, there are definitely tools that will assist you with reading what's happening in the browser and assessing it for accessibility. So there's a couple of plugins that I use. One is called Site Improve, I believe Site Improve Accessibility Checker and that's going to run through your page that's in a browser. So if you're building something on WordPress Squarespace or you're just building it, you can run it once it's in a browser and see what's passing and what's failing. It'll run some automated checks for you. Automated checks are kind of only a piece of the puzzle, but it'll help you in that way where it'll tell you whether or not you're failing those hard pass or fail guidelines.

There's also a plugin called I think it's by AxeDevAxEccsAccessibility. It's called Accessibility Insights for Web and I'll send you the link, but it also is another tool that you can use when you are checking something in a browser for accessibility. So it's going to measure things like is your tab order correct? You know, if somebody is going to show you your tab order. So if somebody is using a keyboard and they're primarily using the arrow keys or the tab keys to navigate through your website, it will actually visually show you the path that somebody is going to take. So it'll say this item is number one and then we're going to tab and then it'll highlight that this is the second thing in your tab order. So that will help you kind of really get an understanding of how somebody might see or use your page from different devices, along with kind of checking things like color contrast and font sizes and things like that.

Cathy Sirvatka

I love that. The tab order. That's something we don't necessarily think about, so I like that tool a lot. And is there anything else that you use? You use Lighthouse right in Chrome.

Vanessa Rusu

Yeah, so that's actually something that is they've added, I think, directly to Chrome now, which is super cool. So if you are familiar with the Inspect, the dev console on Chrome, you can launch up your Lighthouse tools and that's going to assess for performance, accessibility, seo. You get a whole bunch of stuff in there and it'll tell you, kind of in plain English, more or less, where you could improve as well. So that's an awesome tool as well.

Cathy Sirvatka

That's really cool. Yeah, it did used to be separate and I didn't catch it right away until I went to a meetup group that it was actually incorporated into the Inspect, because I use Inspect all the time. We all probably do.

Vanessa Rusu

So the super cool thing if you're using Inspect as well, if you are like a CSS nerd like me is if you're using your Inspect tool in Chrome the latest versions I've seen they actually do help you with color contrast right in there. So if you're ever inspecting the color in your little Chrome dev tools, it will show you whether or not the color of that text is accessible, for which level of accessibility it meets. If it fails, it passes, and you can do that and play with it right in the dev tools, which I think is so cool now.

Cathy Sirvatka

That's amazing, actually, that they can do that and it helps us so we don't have to step page by page. If you're developing pages and you've gone through your website and you're trying to remain accessible but maybe you've missed something somewhere, then these tools can help because they'll just scan through and catch anything you may have missed along the way. So I think that's awesome, rather than you going oh my gosh, I've got a 50 page website. Now I need to go back and make sure I got everything. It could be a lot of extra work, so that's really cool. I love that these tools are out there now. Thank you so much, vanessa. If listeners want to find you or learn more about you or go just check out your work, where can they find you?

Vanessa Rusu

Yeah, absolutely so. I'm a bit hidden on social media these days, but I do have an Instagram account that people could go and visit me at. So I'm at VanessaRusoustudio, so just my namestudio. That's where I'm hanging out on Instagram. You can also find me on LinkedIn and if you want to see more of my work, you can check out my website at VanessaRusoucom. As per every designer out there, I'm sure it's not as up to date as I'd like it to be, but that's where you can see some of my work and learn more about me.

Cathy Sirvatka

OK, that's cool. Thank you so much again, and I just appreciate the education that you brought to us today.

Vanessa Rusu

Yeah, thank you so much. It was so great to be here and I was so happy to talk to you today.

Cathy Sirvatka

Great, thank you. If you're looking for that freelance inspo, you need subscribe to this podcast. Then share it with someone else, because who doesn't need inspiration?