August 16, 2023 • 52 mins
What do you think of the show? Let me know!
Ever wondered how your website design could impact someone with a disability? Join me as I chat with Vanessa Russo, a passionate web designer and WordPress UI/UX design teacher, who opens up a new perspective on website accessibility. She shares with us the often overlooked importance of creating accessible and inclusive websites.
Our enlightening conversation delves into different facets of website design - color contrast, fonts, link cues, and heading usage. Vanessa, with her unique approach and practical knowledge of HTML, CSS, and JavaScript, educates us on the three parts of website accessibility. We delve into the significance of consistent design patterns, which can lead towards providing an inclusive experience.
Our chat with Vanessa wraps up with some practical advice for designers and developers. From viewing each webpage as its own mini book, maintaining correct tab order for accessibility, to dealing with clients with specific design ideas, Vanessa gives us useful tools and strategies. By the end, you'll be itching to connect with her online and learn more about her work. Tune in for a conversation that holds the potential to revolutionize your approach to web designing.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Cathy Sirvatka (00:00):
Accessibility.
We see it in the physical world, with wheelchair ramps and
disability parking spaces, buthow much consideration do we
give it in our website projects?
I myself have been somewhatlackadaisical with this facet of
web design, but after thisconversation I recently had with
Vanessa Rusu, I will be addingsome steps to my process.
(00:20):
Vanessa Rusu has a web studioand also teaches WordPress UI
and UX design.
She loves being in the spacebetween design and development,
and today she shares her viewsabout website accessibility and
steps through some of theelements of a website that can
be purposefully created withvarious levels of impairment in
(00:41):
mind.
She talks about designdevelopment and writing copy,
and then breaks it down evenfurther, delving into color
contrast, fonts, link cues,heading usage and just generally
striking a balance betweendesign and functionality.
Take a listen, because I thinkshe'll spark some new thoughts
for you, as she did for me.
My name is Cathy Sirvatka, andthis is Web Pros Savvy, a
(01:04):
podcast for freelance webdesigners and developers who are
always on the lookout for waysto grow their business.
You'll hear interviews withexperienced freelance web
professionals about theirbusiness operations, the
services they offer and thetypes of clients they work with.
They openly share their storiesand pull back the curtain on
how they achieve success, sothat you can boost your own
(01:26):
business.
Here we go.
Welcome to the Web Pros Savvypodcast.
This is your host, CathySirvatka.
(01:49):
Vanessa, welcome to the show.
It's so good to have you here.
Vanessa Rusu (01:54):
Yeah, thanks so much for having me on.
I'm excited to chat with youtoday, good.
Cathy Sirvatka (01:59):
Can you give us a little background on your work
as a web designer and how youcame to work for yourself?
Vanessa Rusu (02:07):
Yeah, I originally went to school for graphic
design.
I got my start in the printworld and went to school for
design, then got started in astudio.
I worked on more print-basedthings like branding and
marketing materials and thatprinted brochure.
While I was working there,actually, I was always just a
(02:27):
little bit interested in web.
We had shared or the studiothat I was in had shared space
with a web agency at the timethat was building websites and
coding things.
I always just looked over myshoulder within that space.
I was always so interested inseeing them actually translate
those design mockups into actualfunctional websites and digital
(02:51):
experiences.
That was really, reallyinteresting to me.
After a couple of years gettingmy feet wet with the branding
and the print-based things, Idecided to go back to school.
I went for a web developmentprogram and learned the ins and
outs of back and in front ofdevelopment.
That's why I really found thatI really loved being in that
(03:12):
space between design anddevelopment.
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 byhappenstance moved out to
Vancouver and got a job out inVancouver, Canada.
That's where I am right nowdoing UI development, Taking
(03:36):
designs and actually coding themout for large-scale e-commerce
platforms.
Through all of that, I justreally had an inkling to go out
on my own and really dive intowhat it looks like to marry
design with development in thesame role.
That's what I'm doing now.
I run my own studio and we doall things print web.
We still do typical printbranding and print collateral.
(04:00):
I also do websites anddevelopment as well.
That's how I've gotten to whereI am.
Cathy Sirvatka (04:06):
Wow, that's really good.
You are kind of like a one-stopshop, sounds like you print and
the development and the designand all of that, which is really
cool.
Vanessa Rusu (04:16):
Yeah, all of it really interests me.
Cathy Sirvatka (04:20):
You mentioned that you were interested in the
coding.
What kind of coding do you do,or do you know?
Vanessa Rusu (04:29):
Yeah, I'm really interested in the way that what
we design how it shows up on thescreen so that's very front-end
.
For anyone who is a coder, it'sconsidered front-end
development.
Specifically, I like to coinwhat I do as UI development
because I like to really look atwhat we're designing in our XDs
and our Figma and things likethat and really make it as pixel
(04:52):
perfect as possible and asfunctional as possible as actual
interactive experiences on theweb.
I stick mainly to HTML.
CSS is my jam, that's what Ilove, and JavaScript as well.
I do get into the moreJavaScript heavy things, but CSS
is kind of my sweet spot, Iwould say.
Cathy Sirvatka (05:10):
Oh, that's cool.
Hey, there's so much you can dowith CSS now that can actually
put.
Vanessa Rusu (05:15):
I love it yeah.
Cathy Sirvatka (05:16):
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 theJavaScript, because that to me
is a whole other part of thebrain.
Vanessa Rusu (05:35):
It is, yeah, and I definitely struggled when I was
learning it, but I just foundit so rewarding when things
worked properly and I couldreally take things from design
through development and havethat understanding of how you
start on an art board and youend with an actual kind of you
know, actual tangible userexperience.
I thought that was so cool, sofor me it's super rewarding.
Cathy Sirvatka (05:55):
That's awesome.
Yeah, that's actually what Igot me into it too.
The fact that you could takesomething and write some code
Well, this is back in the day,but you know and then have it
like this code make an image onthe screen.
It's amazing to me.
Yeah, I love that.
Yeah, so cool, all right.
So now, as part of your processin making websites for your
(06:19):
clients, you really do focus onthe accessibility part of the
website.
Is that correct?
I do, yeah, where does thatcome from for you?
Vanessa Rusu (06:30):
Yeah.
So when it comes toaccessibility, like, I'm
definitely still learning inthis area and I don't, like,
consider myself an expert per se, but it is something that I
actively want to get better Atand I'm constantly researching
and really trying to see, likeam I doing this right?
What should I be doing better?
I think it's really cool thatdesigners can actually do
(06:51):
something that's going to makethe web and the digital space
better and more inclusive andmore accessible for everyone.
Cathy Sirvatka (06:57):
I mean because you did put such a focus on it.
Was that something that youlearned in your previous work,
or what made you?
Because I know a lot of webdesigners and I have to say,
myself included don't always payas much attention to
accessibility as we should.
But you seem to have a goodfocus on it and it's an
(07:19):
important aspect of yourprojects.
So I'm just wondering was thatsomething you learned in school
or were you just inspired to beinclusive, you know?
Vanessa Rusu (07:32):
Yeah, so accessibility is always
something that's kind of beenclose to me.
I would say I myself don't havea disability.
I don't identify as somebodywho does have a disability, but
I did grow up really close tosomeone that does.
My sister does have a CP, whichis cerebral palsy, so she is in
a wheelchair and she does haveissues with reading and writing.
(07:56):
She can't really read and write.
She can recognize patterns butshe doesn't read and write and I
just kind of grew up reallyclose to seeing how lack of
accessibility and lack of accesscan directly kind of impact
your life and how we should beas a society really kind of
taking that into account.
In all areas of life.
We want everything to beaccessible for everyone and
(08:17):
inclusive for everyone, and so Ikind of grew up with that like
more in the physical world whereI was looking at, okay,
buildings aren't alwaysaccessible and houses aren't
always accessible and that canput a huge strain on things and
even stores.
Sometimes the aisles can be tootight to actually navigate a
chair around and obviously myexperience here is all around
navigating a wheelchair and kindof the reading and writing and
(08:41):
things like that.
But it wasn't until I got intomy web development role that I
really saw that accessibilitycould be something that we
actually cater to and reallythink of and include in our
design process on websites.
So there were a few mentors, Iwould say, at my development
role that really advocated foraccessibility, and when I saw
(09:03):
the conversations that they werehaving and the things that we
had to actually consider, Istarted to really understand how
okay accessibility and accessisn't just something for the
physical world, but it issomething that is also for the
digital world and everybody doesdeserve to be able to move
around in the physical world andmove around in the digital
world.
So anything that we can do tokind of bridge that gap and make
(09:25):
sure that we are offering as aninclusive, as an experience
online that we can, I think isreally important to kind of
consider, especially in thedesign process.
So if designers can make thingsmore inclusive, then I
absolutely kind of advocate forthat and learning more about
that.
I myself am not an expert inany means in terms of exactly
(09:46):
what needs to be the mostaccessible, but it is something
that is close to my heart andsomething that I really do care
about including in my designprocess, so that I am not
intentionally or unintentionallycreating barriers for people
and that everybody does havefair access to the things that
I'm designing.
Cathy Sirvatka (10:02):
Okay, I love how you said you know, we think
about how people can move aroundin the physical world, and so
we also need to consider howpeople can move around in the
digital world.
I mean, that's just such agreat way to put it and it puts
it in a better perspective evenfor me.
I think that's neat.
Vanessa Rusu (10:21):
Yeah, yeah.
Anything we can do to help likereally unblock barriers
everywhere, I think is reallyimportant to consider.
Cathy Sirvatka (10:28):
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 addingaccessibility or accessible
features to the website?
Vanessa Rusu (10:42):
Yeah.
So accessibility is it's a hugefield, like it is all
encompassing.
It's not a one-stop shop wherea web designer is gonna be able
to completely you know stamp ofapproval say this is a
completely accessible website.
It does have a lot ofconsiderations in the design.
It starts with design.
You do make a lot of designdecisions.
(11:02):
It also rolls into developmentand your developers are also
going to be making decisionsthat hopefully make things more
accessible for their users, andthen 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 awebsite and I am looking at it
from the design perspective is Istart with a few basics just to
(11:25):
kind of lay the foundation andkind of a short list there is.
I like to consider colorcontrast.
So there is, there areregulations or guidelines around
how much contrast should existbetween, say, your typography
and your background.
So we want a higher level ofcontrast in there.
Think black and white.
You know black text on a whitebackground, there's a ton of
(11:47):
contrast there.
But maybe if we're doing tantext on like, a peach background
, there's not as much contrastthere.
So I like to kind of make surethat as I'm designing, I am
incorporating or at least beingaware of the color choices that
I'm using, that I am meeting thestandards for color contrast,
and there's a lot of checkersonline that will help you kind
(12:08):
of figure out what you need todo and how accessible you need
to be.
But color contrast is a hugeone.
You also don't wanna rely somuch on color alone to
communicate things.
So if you're designing, youknow, maybe a contact form or
something where you're havingpeople kind of have to interact
with or understand things aboutthe page, typically you want
(12:28):
things like your links and yourerror states and things like
that to not rely so much oncolor to only communicate that
message.
But you wanna use other visualindicators whether that's icons
or underlining or things likethat, to really signify to the
user in multiple ways that youknow there's a message for them
or there's an action here thatthey can take.
Cathy Sirvatka (12:48):
Wow, yeah, that's interesting.
You know we did away with Ifeel like we did away with
underlining links and that waslike the one thing.
Like you always did in theearly days, you always had links
underlined as the queue, thevisual queue.
This is clickable and it seemslike people, in their desire to
(13:10):
be creative, to be a littledifferent, kind of moved away
from that and maybe, you know,did some other things but maybe
aren't as accessible, like yousaid.
The color, you know, I don'tforget what you said tan on the
peach or whatever.
You know those kind of thingsyellow on peaches, you know it's
not, that's not a good cue forsome people.
They're not gonna get it.
Vanessa Rusu (13:32):
Exactly.
Yeah, you wanna be as kind ofexplicit as the way that I like
to kind of think about it aspossible when it comes to color.
You want a lot of.
You wanna make it obvious, likeyou just want everything should
be super obvious.
And if you desaturate yourdesign to black and white, can
you still pick up on thosequeues as to whether this is a
link and this is a button andthis is an error state and what
(13:54):
are you communicating?
Does it work if you remove thatcolor component?
So that's something I typicallyconsider as well.
Cathy Sirvatka (14:01):
I love that idea .
If it devolves to black andwhite, does it still work?
Does it work first of all forthe accessible and then does it
still work as a website?
Yeah, that's kind ofinteresting.
That would be an interestingexercise actually to try and do
Start with black and white.
Vanessa Rusu (14:20):
Yeah, for sure, and you can actually get if you
design an X to your figment.
I think those are the two bigones right now.
At least you can get pluginsthat will actually help you kind
of emulate that experience.
So if you are designing and youare kind of saying, okay, I
wonder if this is accessible forpeople who might have different
abilities or different kind ofcolor impairments, say, you can
(14:42):
get plugins where you plug it inand it will actually emulate
your design in various colorimpairments.
You can see if somebody doesn'thave the color red isn't as
strong, what does your designactually look like?
So there are things that youcan add to your design workflows
that will help you test thatway like much more easily than
just trying to do guesswork onit.
Cathy Sirvatka (15:02):
Oh, that's really cool.
Do you have any plugins thatyou always use or that you
prefer?
Vanessa Rusu (15:09):
Yeah, so the one that I use with XD because my
workflow is in XD is calledStark and there are like free
and paid versions of that plugin.
But you can also the freeversion is quite good to get you
started in this area, where youjust add it to your XD and then
, while you're designing, youcan actually just kind of select
elements and you can check thecontrast on them, see how they
(15:31):
line up against accessibilitystandards, and then it will also
simulate color impairments ordifferent ways of seeing color,
so that you can check, you know,if somebody is more on the
color blind spectrum, what is mydesign going to look like for
them.
So Stark is one that I'drecommend.
Cathy Sirvatka (15:47):
That's really good, because I know there's at
least a few different types ofcolor blindness.
So having a plugin that kind ofconsiders all those is really
good, because none of us aredoctors or we don't know these
things if we don't live withthem.
So I think that's really good.
(16:09):
We're gonna provide a link forthat plugin in the show notes,
because I think that's somethingthat a lot of us should be
using, myself included.
You mentioned, I think,standards like the standards for
accessibility, and in ourprevious conversation you said
something about AA standards andI was in my mind I'm like I'm
(16:32):
affirmative action, what is?
But there's actually this is myignorance.
There's actually grades ofaccessibility right there's A,
there's AA and there's AAA.
Yes there is.
So do you know what they meanspecifically or you aim for?
I think you said AA, correct?
Vanessa Rusu (16:54):
Yeah, it's really common to aim for AA.
So it kind of backing up in theworld of accessibility.
When you're starting to kind ofunderstand and think about
accessibility or design process,it can honestly be fairly
overwhelming.
It isn't the easiest thing toonboard into your process
because there's so muchterminology, there's different
levels of accessibility, there'sdifferent kind of things to
(17:17):
look for and then within thatwhen you dive into okay, what
are the contents of thesevarious levels of accessibility?
It's kind of a whole manual initself in each level.
It can be quite daunting tolook at.
But in terms of breaking it downto the bare basics, there are
three levels right now that arekind of widely recognized as
(17:39):
accessibility standards.
So there's a single AA, aa andthen AAA.
So if we break that down evenfurther, basically your single
AA is like the minimal amount ofcompliance that you're gonna
get.
So it's essentially justproviding like the bare minimum
functionality for users withdisabilities or users of various
abilities to kind of use yourwebsite properly as you intended
(18:02):
.
So this often covers thingslike can your user navigate with
a keyboard?
Are there captions and alttexts 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 rightnow which is considered to be
acceptable compliance.
(18:23):
So AA typically is what you'restriving for and this is kind of
like the goalpost for where wewanna be right now on the web,
and it just means that themajority of people with
disabilities or various levelsof abilities can use your site
effectively without majorblockers or impairments.
So when we're looking at thismiddle level, this double A
(18:45):
compliance, we're really lookingat things like color contrast.
Are your colors, you know, justlike what we talked about
previously are the colors?
Do they have enough contrastfor somebody to see them?
Does it make sense?
You know, if we move thatdesign into black and white,
does it still communicateeffectively without the use of
color?
Is our navigation set up in away that makes sense and is easy
(19:06):
to use and is consistentthroughout the websites?
Are we offering that kind ofconsistent experience?
Can somebody use a form without,you know, really hitting
roadblocks or frustration?
Are our forms accessible?
Can we fill them out and submitthem and understand, when we're
looking at them, what we needto do if we do hit errors or
roadblocks, things like that.
(19:26):
So AA just opens it up to kindof a more a majority of people,
giving the majority of peopleaccess, and then AAA is what's
considered optimal compliance.
So this one is like superdifficult to achieve and not
everybody needs to achieve it oreven can achieve it
realistically, but it means thatyour website is accessible to
(19:47):
the maximum number of users thatmight have, you know, different
levels of abilities ordisabilities and that means that
you know if you have video or,yeah, particularly video content
, that you also provide maybe avideo of interpretive or
interpretation through signlanguage, things like that very
high levels of contrast, very,very.
(20:10):
You've incorporated quite a bitof tools with AAA to reach that
optimal compliance.
A lot of times it's not reallylike feasible to achieve optimal
compliance, which is why mostwebsites aim for that AA
compliance level.
Cathy Sirvatka (20:32):
Right, I think I looked at a AAA and it seemed
like more basic.
It was very informational.
Yeah, it was kind of what wemight look at as designers, as
bare bones, you know.
With the contrast is just likewhite background with a darker
text.
(20:52):
There was really not that muchimagery.
Everything seemed to be, youknow, very hierarchical in their
presentation of the content,which would make it much easier
for somebody to navigate with adisability, I would think.
Vanessa Rusu (21:11):
Yeah yeah.
Aaa websites are usually notvery like.
They don't.
They're not heavily designed asmuch as they are designed to be
functional, so you're doingmore things that are supporting
functionality than aesthetics atthat point.
Cathy Sirvatka (21:23):
Yeah, it's sort of a different animal.
That's really interesting.
All right, so talking aboutwebsite elements with regard to
accessibility, let me just pickon fonts.
We just talked about colors.
Are there certain fonts thatare more accessible than others,
(21:43):
or a combination of fonts, orhow do you address the font
situation?
Vanessa Rusu (21:49):
Yeah.
So I think in my research, inmy experience today, there's no
like hard and fast requirementsaround what fonts you can and
cannot use.
A lot of accessibility is innot the on off switch of, yes,
no, accessible, but really beingcritical with our design
choices and thinking and kind oftesting.
If you have, you know, thebudget to kind of test and
(22:12):
actually get feedback on on onwhat you have chosen to
implement.
But there are like guidelinesthat you can kind of consider so
basic, your basic system fontslike aerial, helvetica, verdana,
tahoma, those kind of ones thatcome out of the box when you're
, when you're designing, thoseare typically considered to be
quite accessible.
So those are obviously choicesthat you could make.
(22:34):
Or fonts that are very similarto those basic system fonts in
their legibility and theirweights and their sizing and and
everything like that Typicallyare good choices.
What I like to do is just reallylook at it with a critical eye
again and say you know, is thislegible?
Am I compromising legibilityfor aesthetics here?
You know cursive fonts are, canbe really pretty, but they can
(22:57):
also be fairly difficult to read.
So what type of usage am I, amI using with the fonts that I'm
choosing and does it make sense?
Does it make sense to me?
Does it make sense to someonewho might, you know, have a
reading or learning disabilityor, you know, might need more
time to kind of read, or mightbe even new to the language?
Maybe they're just learning,you know.
(23:17):
I mean, I'm designing inEnglish, but maybe they're just
learning that.
And am I giving them aninclusive experience where
they're not struggling to readthe words that I'm choosing to
put on the page?
Cathy Sirvatka (23:28):
Oh my gosh, that's a really good point If
you get, you know and I findit's really popular today these
scripty fonts to be used asheadings or headlines or
whatever yeah, very curly, curvy, fancy fonts that look super
cool.
But yeah, if you're, if you'resafe from the Middle East and
you're not, even you're stillgetting used to our characters
(23:52):
and our type, that would be, Iwould think, crazy to try and
understand.
Vanessa Rusu (23:58):
Yeah, yeah.
So I like, I think, and I thinkthere's a time and a place for
everything.
I think if you're relying onvery decorative fonts to
communicate your core messaging,that's when you might need to
kind of reassess.
But it doesn't mean that youcan't use it as you know accents
or or kind of visual aesthetictouches.
It just means that you need tokind of assess, or I would think
(24:19):
you would need to kind ofassess the is the messaging core
to what I need to communicateand does that, is that inclusive
of a wider audience?
Cathy Sirvatka (24:29):
Yeah, I hear you .
Okay, so like serifs andnon-serif or sans serif, I took
French.
Serif or sans serif Does itmatter?
Does serif or sans serif matter?
Vanessa Rusu (24:45):
So, that's something I can't really speak
directly to with a lot ofknowledge or experience.
I know that you like fonts thatare considered accessible are
like help Helvetica, which is asans serif, but then you also
have Times New Roman, which iswidely considered to be an
accessible font.
That is a serif.
So I think for for myexperience, it just kind of
really comes down to legibilityand then, you know, testing.
Cathy Sirvatka (25:08):
Okay, like you said, going back to the system
fonts which have a little bit ofboth.
Like you just said, it's funnybecause, again, in the whole
timeline of the web and itsexistence, we started out with
those fonts.
Those were the, those were theweb safe fonts, the only ones we
could use.
I know because not everyonewould have them on their
(25:31):
computer, and so you had to usefonts everybody had.
And now we're just driving itaway from those things, but
again, they still make sense ina lot of situations.
Vanessa Rusu (25:44):
Yeah, absolutely.
There's definitely a time in aplace where they still totally
make sense, and it's not thatyou can't use any other font.
It's just that I think thoseare a great frame of reference
for what is accessible and youknow kind of identifying, does
it?
You know, using that as aguidepost, I'll say when you're
assessing your font choices, Ilike that a great frame of
(26:04):
reference.
Cathy Sirvatka (26:05):
Yeah, that's really good.
Now, earlier you mentioned yoursister who has CP, and you
think about her when you aredesigning websites, or or do I?
I'm putting words in your mouth, but you talked about the
experience you've had with herwith regard to accessible
(26:27):
buildings.
You know that kind of thing.
You see it from her perspective.
But you mentioned something ina previous conversation about
patterns and that she canrecognize design patterns really
well.
So in patterns with this wouldbe the not the user experience,
but the interface.
(26:48):
We know that logos tend to bein the upper left and menus tend
to be in the upper right.
Can you speak to that a littlebit as far as like where we
expect things to be and andshould we?
Can we deviate from that, orshould we?
Vanessa Rusu (27:06):
Yeah.
So yeah, going back to like theway that my sister specifically
sees the internet and interactswith the web is and again,
she's only, you know, she's oneperson, but she does have a
disability and I think she isimportant.
Her use case is important toconsider but it is, you know,
only one of many out there.
But what I've been able to kindof see with her and what she's
(27:27):
able to do, which I think is socool, is she can really
recognize like patterns in userinterfaces and kind of beyond
that she can.
She has this global designpattern understanding, we'll say
so, I like to call it globaldesign patterns.
But if you can enter anywebsite, she'll typically know
that the logo is going to be inthe top corner or the top center
(27:49):
.
Her navigation is going to be,you know, in the top usually
it's the top right and that anylike copyright or legal
information or anything likethat she's, she's picked up that
that's all kind of in thefooter and then she can use, you
know, imagery and UI patternsto navigate what's a button,
what's not a button, things likethat, and I just think that
that's that's super cool.
(28:09):
So for me, kind of watching thatshe relies on those consistent
elements to kind of be in placereally 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 likeour headers and our navigations
, I want to keep thoseconsistent so that people who
(28:30):
are, you know, might havedifferent abilities or different
understandings that they'renavigating my design with that
they really understand and havehave a I'm not making them work
to try to figure out my specificwebsite and my specific design
pattern.
So I really like to use thoseglobally understood patterns of
where our navigation is and whatour, what our headers look like
, things like that.
And making sure that you knowbuttons look like buttons and
(28:52):
links look like links and andwe're just kind of helping the
user along with you know thatnon verbal language that does
exist in UI components.
Cathy Sirvatka (29:02):
So what do you think and, by the way, you had
mentioned to me in a previousconversation, and I can't
remember if you mentioned ithere that you do teach or you
were teaching.
Do you still teach?
Vanessa Rusu (29:16):
I do, yeah, yeah, so kind of, along with running
my own studio, I do teach verycasually at the College here in
Vancouver.
I teach in the design programand I teach the web centered
classes.
So I teach everything from youknow WordPress to web design.
I even do a little bit of webdevelopment teaching, which is a
whole other beast, but I dohave students.
So I do kind of incorporate allof the you know, the
(29:37):
accessibility, the thoughtprocess and the incorporating
accessibility into your designprocess.
I do try to include that inwhat I do teach to students,
because I just think it's soimportant to kind of have you
know the checklist, if you will,or the understanding that
design is about aesthetics, forsure, and it's about
(29:59):
communication, but it's alsoabout inclusivity and kind of
opening up your design processand the things you're building
to the widest level or, why,widest amount of audience and
people that you can.
Cathy Sirvatka (30:11):
Okay, because I was thinking do they try to step
outside those bounds?
You know, in trying to becreative, especially when you're
a student, you're trying to,you want to try new things.
You've seen things a certainway and you're like, what if I
do it this way?
What if I put the navigationand I've seen this in websites
where the navigation's on theleft side and maybe it's, you
(30:35):
know, tips, so it's it's facingto 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 (30:47):
Yeah, yeah.
So I think I think that, likeeverybody, if you're in a
designer at all, you've probablyexperimented with trying to
break that grid or break thatwheel or reinvent the wheel in
that way.
I know I definitely have in thepast been like, okay, like
what's another way that I could,you know, totally innovate this
header or just like dosomething that's a little bit
different and a little bit cool.
And you know, there'sdefinitely like a time and place
(31:10):
to kind of explore with whatthat looks like and it is a
common, a common thought toreally try to push the bounds of
what's possible in design.
But, kind of going back to theaccessibility conversation, I do
think that it's important tohave an understanding that you
know global, global designpatterns and just inherent ways
that people expect the web to beset up.
(31:31):
That does have value and it issomething that we should
definitely consider when we aredesigning.
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 experimentedwith that layout or doing like a
horizontal scrolling websiteinstead of a vertical scrolling
website.
Things like that.
(31:51):
They're cool to experiment with.
But we really have to kind ofalso assess the design for
inclusivity and say who who'sgoing to get a kick out of this
and who's going to think it'samazing and who's not going to
be able to understand how to useit.
And who are we kind of, youknow, excluding from being able
to use this design?
And is there a way that we canstill innovate here without
(32:12):
completely excluding people whorely on those cues and those
layout patterns and thoseconsistencies?
Cathy Sirvatka (32:18):
Wow, that's really good.
Yeah, it is, it's.
This is a tricky balancebetween wanting to be innovative
and creative and give yourclients something that's you
know, not cookie cutter, yeah,while still considering those
who Need those accessibilityfeatures, which I love your term
(32:38):
I haven't heard anyone actuallyput it this way but global
design patterns, global designpatterns, that's really good.
Vanessa Rusu (32:46):
Yeah, I'm not sure if that's specific to me.
That's just typically what Iuse to take and pay it, but I'm
sure there's a word out there.
If it's not out there, youshould coin it.
Yeah for sure.
Cathy Sirvatka (32:59):
I will.
I will give you credit for thatone.
One last thing about theelements on the page.
What about using heading levels?
I see a lot of websites thatdon't have the heading levels in
the right order.
You know they're actually thereto help outline the content.
(33:22):
That's not only beneficial tosomebody with disabilities, but
also Google likes it whenthey're used correctly heading
level one, heading level two andI see a lot of people you know
I'm going to put it an H3 herebecause I like that font or I
like the way that one looks andit's just quick and easy to pop
that there, even though itdoesn't really make sense in the
hierarchy of the page.
Vanessa Rusu (33:45):
Yeah, that's a huge part of, I think, a design
kind of decision that you canmake as a designer upfront is
what are your heading levelslook like?
Because you're totally correctin saying that they're not just
aesthetics, right, they're notjust meant to be six different
design options that we caninclude on a page.
They actually serve purposesbeyond that in terms of how you
(34:07):
know Google's reading your sitewhen they're going through and
skimming your content andorganizing your content.
They are looking at the samelevel and that is dictated by
largely, or also dictated byyour heading levels of how
you're organizing your content.
And then also things likescreen readers will use that to
kind of go through a page andcreate a navigation or table of
contents, if you will, for userswho might be using assistive
(34:28):
devices to really navigate andskim and and Pre read that
content of where they want to goif they're using, you know,
assistive devices or screenreaders or things like that.
So I think it's reallyimportant To kind of consider
your heading levels upfrontwhere you're at the design phase
and you're saying, okay, likeI'm going to have, you know, six
, you have six heading levels.
You have each one through, eachsix if you're in the
(34:49):
development mode but heading onethrough 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 designingthings and things change, that
there is, you know, thisguidebook or style guide to go
back to, of this consistentdesign pattern that we're using
where H2 should be in this placeand they're going to look like
this.
So I always like to think aboutit and the way that I teach it
(35:13):
kind of to my students and andthe way that I frame it to them
Is I kind of try to think of itlike like a book, like each page
on your website is its ownlittle mini book.
So if you think about a book,there's only usually I mean most
books in the world only haveone title.
Where that's the title of thebook, it's going to tell you,
(35:34):
maybe, if it's like a textbook,it's going to tell you exactly
what Topic or subject that thattextbook is about and that would
be considered your age one inthe web design world, where your
page title, or your pageheading, or that book title, if
you will, is going to be usuallyyour most prominent Heading on
the site.
And then, if you look downdeeper into the book reference
(35:56):
than the next thing you wouldlook at is your chapter titles
and that would kind of tell you,okay, like, what is the topic
of this chunk of the book andthe way that relates to web
design is your chapter titlesbecome your age to and your like
section titles as to okay, whatis this section of content on
my page about and how do Irepresent that with a heading.
And then you kind of even dive,you know, one level deeper, and
(36:18):
so on and so on, where your agethrees become, like your sub,
your subheadings or yoursubtitles, and they exist in
your chapter Of your you know,book in the sense, but they're
more specific to exactly what isthis block of content or this
specific piece of content inthis section going to be about.
So that's kind of the way thatI like to look at it is each one
is book title, each two ischapter title, age three is
(36:39):
subtitle and then so on and soforth.
Cathy Sirvatka (36:42):
Yeah, that's really good and I like yours
sounds more creative and funthan I always think of it as
like the term paper that we hadto do in school, in college, you
know, and you had to.
You had to provide an outline.
That was part of the process ofcreating this huge term paper
and I like the book better thanthe term paper.
(37:03):
Analogy Just sounds nice.
Vanessa Rusu (37:07):
Yeah, yeah, I think it's definitely there's
less.
You know PTSD from your collegedays in there, but it kind of
does line up in the way that ifyou think about it as like a
table of contents from even youmay be your your term paper, you
can kind of think about it thatway as well, where screen
readers and things like Googleare going to look at your page
(37:27):
and they are going to kind ofmore or less pull out the table
of contents and that is going tobe your heading structure.
So you wanted to kind of makesense in terms of how you're
laying on your content.
Yeah, yeah, that's that's.
I will take your book analogy.
Cathy Sirvatka (37:43):
And bring it with me.
Now when you're dealing withclients.
You're making client websites.
Some clients have very strongideas about what they want in
their website or how they wantit to look, and some and these
are probably our favorites right, they totally trust us and what
(38:03):
we present to them and theyaccept it because they know
you're the pro.
But when you have a client whohas very specific ideas and
maybe doesn't fit in with theaccessibility aspect of things,
first of all, have you comeacross that and, if so, how?
How do you deal with that withthe client?
Vanessa Rusu (38:24):
Yeah, that's a really good question.
It definitely does come up andI'm sure whether you're the
client or the designer, at somepoint 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 couldhave 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'smaybe not the most accessible
(38:45):
thing.
So it definitely does come up.
Typically, it's easiest to kindof address accessibility
concerns in color at thebeginning of a project.
So if you're the designer, youkind of build your color palette
around or with accessibility inmind.
But if you're a client, youmight not always know what that
(39:06):
means or what that, what, whataccessibility truly means for a
website.
So if clients ever do come tome and you know they want
something and I look at it and Ijust it's not going to be, you
know, meeting our color contrast, say, for accessibility, what I
typically will try to do isjust educate them on you know,
what is accessibility on the web, why do we want it, why do we
(39:27):
need it and generally, you know,going to them and saying, you
know, these colors, whilethey're great and they're on
brand, they aren't inclusive toeverybody and they aren't
actually going to meetaccessibility requirements, and
I think it's really importantthat we do make sure that we are
as inclusive as we can be.
So here's, you know, here's myalternate solution and I'll
(39:47):
propose something that is, youknow, the most close match that
does meet accessibilityrequirements, and often that's
what clients need, like that's.
All they need is Is they justneed to kind of be aware that
that's even a consideration,because they're not web
designers, they don't stay up onthe trends, they have no idea
half the time, and it's our jobto kind of educate them in that
way.
And a lot of them will say, oh,absolutely, I want to be
(40:09):
accessible, I don't want toexclude anybody.
Like, let's figure out asolution here.
So that's obviously reallygreat if that happens.
If it doesn't happen, you know,if they, if they still get
pushed back on on Includingaccessibility or including
compliant colors or things likethat, at that point you kind of
just you have to, you know, tellthe client that you do want to
(40:32):
proceed with accessibility andthere are, depending on where
you're located.
There are actually, you know,legal requirements that are
coming into place aroundaccessibility, and you just have
to have to kind of hope that,if the inclusive inclusivity
conversation isn't enough, thatKind of backing up the need for
accessibility with that proofwherever you're located is going
(40:52):
to do the trick.
Cathy Sirvatka (40:54):
Do you Put anything in your contract
regarding this or have like acheckbox saying I'm willing to
sign off on the fact that I'vechosen Of course contract would
come up before design.
Or do you do you offersomething in writing that kind
of Covers you and acknowledgesthey've made a choice against
(41:18):
what you've suggested?
Vanessa Rusu (41:21):
Yeah, no, so it it has in the past.
I Would say I don't.
I don't necessarily included inmy contract as like a written
thing.
Right now, I do have theconversation early in the
process saying you know, whenyou were, when you work with me.
Part of my process is that I am, you know, going in with a
(41:41):
mindset around accessibility andI really do want to make your
site as accessible as possible.
So I am going to look at thingslike content and color contrast
and navigation patterns andthings like that.
If I get a lot of pushback onAccessibility, typically what
I'll do is I will send an emailsaying okay, like here, here is
you know what I think we shoulddo.
Maybe there's not budget forthat or it depends on, you know,
(42:04):
the client and the project andthe scope and things like that.
And just so you know like weare going to proceed without
making this Accessible.
And I just put it in writingand I have them kind of agree to
that beforehand, just so thatit's tracked, you know.
And and if there is, you knowif rules and laws are in Place
where you live and where yourclient is based.
(42:24):
Out of that, you do have apaper trail on.
You know, we did try to makethis accessible and I've done my
best, and it really was aconscious decision that was made
to not address this problem.
Cathy Sirvatka (42:36):
Yeah, I think that's a really good idea.
I mean, I know in our countryI've heard of some businesses
who have been sued largebusinesses to that Because their
website was not accessible.
So I don't know if the webdesigner has been has gotten in
trouble, but boy, I would surewant to cover my butt on that
(42:59):
one.
Vanessa Rusu (42:59):
Yeah, absolutely.
You just want to be safe ratherthan sorry, especially if you
are keeping up to up to date onaccessibility and you you know
you knowingly are doing thingsthat you wouldn't ideally want
to do.
I think for me it's just betterto kind of put it in writing so
that you are doing as much asyou can and Hopefully you know
(43:20):
if it's not able to beprioritized right away, that
down down the road, that theywill 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 andlet's do it right.
But that being said, it is kindof easiest if you are joining a
project, it's easiest to havethese 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
(43:43):
a development project where I'mnot as involved in the design
and I'm more involved in thedevelopment aspect, I typically
request to see the designs earlyin the process, kind of as the
client approval and Revisionphases going back and forth, so
that I can kind of add thatpiece to the discussion earlier
rather than later, because it's,you know, it's easier to
(44:04):
incorporate it at the beginningof a project, then get all the
way down the road and you'vespent months on.
You know this, a design that'sbeen approved, and at the end of
the road you realize, oh mygosh, it's not accessible and
there's just no budget.
There's too many wheels inmotion, it's too big of a task
to fix it.
So, yeah, I always just like totry to get get in early and at
least plant the seed early thatwe want to accommodate, you know
(44:26):
, especially like things likecolor contrast and design
patterns up front, as as earlyas we can.
Cathy Sirvatka (44:33):
Yeah, so you mentioned budget a couple times.
Does making an accessible siteincrease the pricing of a
project?
Or I Know you try to do it inevery project, but you Maybe
you're just talking about havingto go back and read.
You know, recreate some thingsto be accessible, but does
(44:56):
Accessibility increase the pricein general of your websites?
Vanessa Rusu (45:00):
I do, yeah, so I included in in my price.
It's just part of my designprocess, so it's not something
that I Specifically outline.
As you know, you were payingfor color contrasts to me,
double a compliance like that.
I don't go that deep with it oranything like that, but it is
something that you you do needto spend time on.
So if you include it in yourprocess, it just becomes part of
(45:22):
part of the price.
It is expensive if you Need todo it after you've done your
project.
So if you get all the way to theend because if you've chosen,
you know, like fonts that don'tmake sense or colors that don't
make sense, or navigationpatterns that that aren't, you
know, most, the most inclusiveor Accessible for a wide variety
of people, then that's gonnaobviously cost a ton of money to
(45:45):
go back and like basicallyredesign things.
It can be a huge investment.
The same goes with thedevelopment phase.
So if you are developing awebsite and you're not Keeping
accessibility top of mind anddoing things like using semantic
coding and adding yourdescriptions and tags and and
patterns and heading levels, youknow, using your h1 tags
instead of spans or divs orsomething like that, it's
(46:07):
obviously gonna be more timeconsuming and more intensive to
go back and comb through it, butit is something that, if you
work it into your price, thereare definitely Additional things
to add to the checklist whenyou are doing it, but it's not
something that you know in myexperience is A huge add-on if
you're tackling it with that inmind up front at the beginning
(46:30):
of the project.
Cathy Sirvatka (46:32):
I see that's.
I see that it would make sense.
I mean, going back and tryingto retrofit a website Would be.
I mean, it's almost.
It's like basically a wholeredo, depending on how badly
they veered.
Yeah, it depends on how Exactly.
Yeah exactly.
Now, what tools do you use inyour process?
(46:56):
You mentioned a plugin for Wasit for XD or figma?
I can't remember.
Or maybe it will work with both, or maybe it will work with
both.
Vanessa Rusu (47:05):
It's for both.
Yeah, so I use Stark if you'redesigning for XD or Figma and
I'm sure there's other ones outthere, but that's the one that I
use, where you can literally bein Figma and you can just
select your text and yourbackground and check it against
color contrast and otheraccessibility indicators from
(47:25):
directly within your plugin,which is great when it comes
into web designing.
Say, you're out of XD andyou're actually in a browser,
there are definitely tools thatwill assist you with reading
what's happening in the browserand assessing it for
accessibility.
So there's a couple of pluginsthat I use.
One is called Site Improve, Ibelieve Site Improve
Accessibility Checker and that'sgoing to run through your page
(47:49):
that's in a browser.
So if you're building somethingon WordPress Squarespace or
you're just building it, you canrun it once it's in a browser
and see what's passing andwhat's failing.
It'll run some automated checksfor you.
Automated checks are kind ofonly a piece of the puzzle, but
it'll help you in that way whereit'll tell you whether or not
you're failing those hard passor fail guidelines.
(48:10):
There's also a plugin called Ithink it's by
AxeDevAxEccsAccessibility.
It's called AccessibilityInsights for Web and I'll send
you the link, but it also isanother tool that you can use
when you are checking somethingin a browser for accessibility.
So it's going to measure thingslike is your tab order correct?
You know, if somebody is goingto show you your tab order.
(48:33):
So if somebody is using akeyboard and they're primarily
using the arrow keys or the tabkeys to navigate through your
website, it will actuallyvisually show you the path that
somebody is going to take.
So it'll say this item isnumber one and then we're going
to tab and then it'll highlightthat this is the second thing in
your tab order.
So that will help you kind ofreally get an understanding of
(48:54):
how somebody might see or useyour page from different devices
, along with kind of checkingthings like color contrast and
font sizes and things like that.
Cathy Sirvatka (49:03):
I love that.
The tab order.
That's something we don'tnecessarily think about, so I
like that tool a lot.
And is there anything else thatyou use?
You use Lighthouse right inChrome.
Vanessa Rusu (49:16):
Yeah, so that's actually something that is
they've added, I think, directlyto Chrome now, which is super
cool.
So if you are familiar with theInspect, the dev console on
Chrome, you can launch up yourLighthouse tools and that's
going to assess for performance,accessibility, seo.
You get a whole bunch of stuffin there and it'll tell you,
(49:36):
kind of in plain English, moreor less, where you could improve
as well.
So that's an awesome tool aswell.
Cathy Sirvatka (49:42):
That's really cool.
Yeah, it did used to beseparate and I didn't catch it
right away until I went to ameetup group that it was
actually incorporated into theInspect, because I use Inspect
all the time.
We all probably do.
Vanessa Rusu (49:57):
So the super cool thing if you're using Inspect as
well, if you are like a CSSnerd like me is if you're using
your Inspect tool in Chrome thelatest versions I've seen they
actually do help you with colorcontrast right in there.
So if you're ever inspectingthe color in your little Chrome
dev tools, it will show youwhether or not the color of that
text is accessible, for whichlevel of accessibility it meets.
(50:20):
If it fails, it passes, and youcan do that and play with it
right in the dev tools, which Ithink is so cool now.
Cathy Sirvatka (50:26):
That's amazing, actually, that they can do that
and it helps us so we don't haveto step page by page.
If you're developing pages andyou've gone through your website
and you're trying to remainaccessible but maybe you've
missed something somewhere, thenthese tools can help because
they'll just scan through andcatch anything you may have
missed along the way.
(50:46):
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 makesure I got everything.
It could be a lot of extra work, so that's really cool.
I love that these tools are outthere now.
Thank you so much, vanessa.
If listeners want to find youor learn more about you or go
(51:10):
just check out your work, wherecan they find you?
Vanessa Rusu (51:13):
Yeah, absolutely so.
I'm a bit hidden on socialmedia these days, but I do have
an Instagram account that peoplecould go and visit me at.
So I'm at VanessaRusoustudio,so just my namestudio.
That's where I'm hanging out onInstagram.
You can also find me onLinkedIn and if you want to see
more of my work, you can checkout my website at
(51:35):
VanessaRusoucom.
As per every designer out there, I'm sure it's not as up to
date as I'd like it to be, butthat's where you can see some of
my work and learn more about me.
Cathy Sirvatka (51:45):
OK, that's cool.
Thank you so much again, and Ijust appreciate the education
that you brought to us today.
Vanessa Rusu (51:53):
Yeah, thank you so much.
It was so great to be here andI was so happy to talk to you
today.
Cathy Sirvatka (51:57):
Great, thank you .
If you're looking for thatfreelance inspo, you need
subscribe to this podcast.
Then share it with someone else, because who doesn't need
inspiration?
Accessibility.
We see it in the physical world, with wheelchair ramps and
disability parking spaces, buthow much consideration do we
give it in our website projects?
I myself have been somewhatlackadaisical with this facet of
web design, but after thisconversation I recently had with
Vanessa Rusu, I will be addingsome steps to my process.
(00:20):
Vanessa Rusu has a web studioand also teaches WordPress UI
and UX design.
She loves being in the spacebetween design and development,
and today she shares her viewsabout website accessibility and
steps through some of theelements of a website that can
be purposefully created withvarious levels of impairment in
(00:41):
mind.
She talks about designdevelopment and writing copy,
and then breaks it down evenfurther, delving into color
contrast, fonts, link cues,heading usage and just generally
striking a balance betweendesign and functionality.
Take a listen, because I thinkshe'll spark some new thoughts
for you, as she did for me.
My name is Cathy Sirvatka, andthis is Web Pros Savvy, a
(01:04):
podcast for freelance webdesigners and developers who are
always on the lookout for waysto grow their business.
You'll hear interviews withexperienced freelance web
professionals about theirbusiness operations, the
services they offer and thetypes of clients they work with.
They openly share their storiesand pull back the curtain on
how they achieve success, sothat you can boost your own
(01:26):
business.
Here we go.
Welcome to the Web Pros Savvypodcast.
This is your host, CathySirvatka.
(01:49):
Vanessa, welcome to the show.
It's so good to have you here.
Vanessa Rusu (01:54):
Yeah, thanks so much for having me on.
I'm excited to chat with youtoday, good.
Cathy Sirvatka (01:59):
Can you give us a little background on your work
as a web designer and how youcame to work for yourself?
Vanessa Rusu (02:07):
Yeah, I originally went to school for graphic
design.
I got my start in the printworld and went to school for
design, then got started in astudio.
I worked on more print-basedthings like branding and
marketing materials and thatprinted brochure.
While I was working there,actually, I was always just a
(02:27):
little bit interested in web.
We had shared or the studiothat I was in had shared space
with a web agency at the timethat was building websites and
coding things.
I always just looked over myshoulder within that space.
I was always so interested inseeing them actually translate
those design mockups into actualfunctional websites and digital
(02:51):
experiences.
That was really, reallyinteresting to me.
After a couple of years gettingmy feet wet with the branding
and the print-based things, Idecided to go back to school.
I went for a web developmentprogram and learned the ins and
outs of back and in front ofdevelopment.
That's why I really found thatI really loved being in that
(03:12):
space between design anddevelopment.
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 byhappenstance moved out to
Vancouver and got a job out inVancouver, Canada.
That's where I am right nowdoing UI development, Taking
(03:36):
designs and actually coding themout for large-scale e-commerce
platforms.
Through all of that, I justreally had an inkling to go out
on my own and really dive intowhat it looks like to marry
design with development in thesame role.
That's what I'm doing now.
I run my own studio and we doall things print web.
We still do typical printbranding and print collateral.
(04:00):
I also do websites anddevelopment as well.
That's how I've gotten to whereI am.
Cathy Sirvatka (04:06):
Wow, that's really good.
You are kind of like a one-stopshop, sounds like you print and
the development and the designand all of that, which is really
cool.
Vanessa Rusu (04:16):
Yeah, all of it really interests me.
Cathy Sirvatka (04:20):
You mentioned that you were interested in the
coding.
What kind of coding do you do,or do you know?
Vanessa Rusu (04:29):
Yeah, I'm really interested in the way that what
we design how it shows up on thescreen so that's very front-end
.
For anyone who is a coder, it'sconsidered front-end
development.
Specifically, I like to coinwhat I do as UI development
because I like to really look atwhat we're designing in our XDs
and our Figma and things likethat and really make it as pixel
(04:52):
perfect as possible and asfunctional as possible as actual
interactive experiences on theweb.
I stick mainly to HTML.
CSS is my jam, that's what Ilove, and JavaScript as well.
I do get into the moreJavaScript heavy things, but CSS
is kind of my sweet spot, Iwould say.
Cathy Sirvatka (05:10):
Oh, that's cool.
Hey, there's so much you can dowith CSS now that can actually
put.
Vanessa Rusu (05:15):
I love it yeah.
Cathy Sirvatka (05:16):
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 theJavaScript, because that to me
is a whole other part of thebrain.
Vanessa Rusu (05:35):
It is, yeah, and I definitely struggled when I was
learning it, but I just foundit so rewarding when things
worked properly and I couldreally take things from design
through development and havethat understanding of how you
start on an art board and youend with an actual kind of you
know, actual tangible userexperience.
I thought that was so cool, sofor me it's super rewarding.
Cathy Sirvatka (05:55):
That's awesome.
Yeah, that's actually what Igot me into it too.
The fact that you could takesomething and write some code
Well, this is back in the day,but you know and then have it
like this code make an image onthe screen.
It's amazing to me.
Yeah, I love that.
Yeah, so cool, all right.
So now, as part of your processin making websites for your
(06:19):
clients, you really do focus onthe accessibility part of the
website.
Is that correct?
I do, yeah, where does thatcome from for you?
Vanessa Rusu (06:30):
Yeah.
So when it comes toaccessibility, like, I'm
definitely still learning inthis area and I don't, like,
consider myself an expert per se, but it is something that I
actively want to get better Atand I'm constantly researching
and really trying to see, likeam I doing this right?
What should I be doing better?
I think it's really cool thatdesigners can actually do
(06:51):
something that's going to makethe web and the digital space
better and more inclusive andmore accessible for everyone.
Cathy Sirvatka (06:57):
I mean because you did put such a focus on it.
Was that something that youlearned in your previous work,
or what made you?
Because I know a lot of webdesigners and I have to say,
myself included don't always payas much attention to
accessibility as we should.
But you seem to have a goodfocus on it and it's an
(07:19):
important aspect of yourprojects.
So I'm just wondering was thatsomething you learned in school
or were you just inspired to beinclusive, you know?
Vanessa Rusu (07:32):
Yeah, so accessibility is always
something that's kind of beenclose to me.
I would say I myself don't havea disability.
I don't identify as somebodywho does have a disability, but
I did grow up really close tosomeone that does.
My sister does have a CP, whichis cerebral palsy, so she is in
a wheelchair and she does haveissues with reading and writing.
(07:56):
She can't really read and write.
She can recognize patterns butshe doesn't read and write and I
just kind of grew up reallyclose to seeing how lack of
accessibility and lack of accesscan directly kind of impact
your life and how we should beas a society really kind of
taking that into account.
In all areas of life.
We want everything to beaccessible for everyone and
(08:17):
inclusive for everyone, and so Ikind of grew up with that like
more in the physical world whereI was looking at, okay,
buildings aren't alwaysaccessible and houses aren't
always accessible and that canput a huge strain on things and
even stores.
Sometimes the aisles can be tootight to actually navigate a
chair around and obviously myexperience here is all around
navigating a wheelchair and kindof the reading and writing and
(08:41):
things like that.
But it wasn't until I got intomy web development role that I
really saw that accessibilitycould be something that we
actually cater to and reallythink of and include in our
design process on websites.
So there were a few mentors, Iwould say, at my development
role that really advocated foraccessibility, and when I saw
(09:03):
the conversations that they werehaving and the things that we
had to actually consider, Istarted to really understand how
okay accessibility and accessisn't just something for the
physical world, but it issomething that is also for the
digital world and everybody doesdeserve to be able to move
around in the physical world andmove around in the digital
world.
So anything that we can do tokind of bridge that gap and make
(09:25):
sure that we are offering as aninclusive, as an experience
online that we can, I think isreally important to kind of
consider, especially in thedesign process.
So if designers can make thingsmore inclusive, then I
absolutely kind of advocate forthat and learning more about
that.
I myself am not an expert inany means in terms of exactly
(09:46):
what needs to be the mostaccessible, but it is something
that is close to my heart andsomething that I really do care
about including in my designprocess, so that I am not
intentionally or unintentionallycreating barriers for people
and that everybody does havefair access to the things that
I'm designing.
Cathy Sirvatka (10:02):
Okay, I love how you said you know, we think
about how people can move aroundin the physical world, and so
we also need to consider howpeople can move around in the
digital world.
I mean, that's just such agreat way to put it and it puts
it in a better perspective evenfor me.
I think that's neat.
Vanessa Rusu (10:21):
Yeah, yeah.
Anything we can do to help likereally unblock barriers
everywhere, I think is reallyimportant to consider.
Cathy Sirvatka (10:28):
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 addingaccessibility or accessible
features to the website?
Vanessa Rusu (10:42):
Yeah.
So accessibility is it's a hugefield, like it is all
encompassing.
It's not a one-stop shop wherea web designer is gonna be able
to completely you know stamp ofapproval say this is a
completely accessible website.
It does have a lot ofconsiderations in the design.
It starts with design.
You do make a lot of designdecisions.
(11:02):
It also rolls into developmentand your developers are also
going to be making decisionsthat hopefully make things more
accessible for their users, andthen 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 awebsite and I am looking at it
from the design perspective is Istart with a few basics just to
(11:25):
kind of lay the foundation andkind of a short list there is.
I like to consider colorcontrast.
So there is, there areregulations or guidelines around
how much contrast should existbetween, say, your typography
and your background.
So we want a higher level ofcontrast in there.
Think black and white.
You know black text on a whitebackground, there's a ton of
(11:47):
contrast there.
But maybe if we're doing tantext on like, a peach background
, there's not as much contrastthere.
So I like to kind of make surethat as I'm designing, I am
incorporating or at least beingaware of the color choices that
I'm using, that I am meeting thestandards for color contrast,
and there's a lot of checkersonline that will help you kind
(12:08):
of figure out what you need todo and how accessible you need
to be.
But color contrast is a hugeone.
You also don't wanna rely somuch on color alone to
communicate things.
So if you're designing, youknow, maybe a contact form or
something where you're havingpeople kind of have to interact
with or understand things aboutthe page, typically you want
(12:28):
things like your links and yourerror states and things like
that to not rely so much oncolor to only communicate that
message.
But you wanna use other visualindicators whether that's icons
or underlining or things likethat, to really signify to the
user in multiple ways that youknow there's a message for them
or there's an action here thatthey can take.
Cathy Sirvatka (12:48):
Wow, yeah, that's interesting.
You know we did away with Ifeel like we did away with
underlining links and that waslike the one thing.
Like you always did in theearly days, you always had links
underlined as the queue, thevisual queue.
This is clickable and it seemslike people, in their desire to
(13:10):
be creative, to be a littledifferent, kind of moved away
from that and maybe, you know,did some other things but maybe
aren't as accessible, like yousaid.
The color, you know, I don'tforget what you said tan on the
peach or whatever.
You know those kind of thingsyellow on peaches, you know it's
not, that's not a good cue forsome people.
They're not gonna get it.
Vanessa Rusu (13:32):
Exactly.
Yeah, you wanna be as kind ofexplicit as the way that I like
to kind of think about it aspossible when it comes to color.
You want a lot of.
You wanna make it obvious, likeyou just want everything should
be super obvious.
And if you desaturate yourdesign to black and white, can
you still pick up on thosequeues as to whether this is a
link and this is a button andthis is an error state and what
(13:54):
are you communicating?
Does it work if you remove thatcolor component?
So that's something I typicallyconsider as well.
Cathy Sirvatka (14:01):
I love that idea .
If it devolves to black andwhite, does it still work?
Does it work first of all forthe accessible and then does it
still work as a website?
Yeah, that's kind ofinteresting.
That would be an interestingexercise actually to try and do
Start with black and white.
Vanessa Rusu (14:20):
Yeah, for sure, and you can actually get if you
design an X to your figment.
I think those are the two bigones right now.
At least you can get pluginsthat will actually help you kind
of emulate that experience.
So if you are designing and youare kind of saying, okay, I
wonder if this is accessible forpeople who might have different
abilities or different kind ofcolor impairments, say, you can
(14:42):
get plugins where you plug it inand it will actually emulate
your design in various colorimpairments.
You can see if somebody doesn'thave the color red isn't as
strong, what does your designactually look like?
So there are things that youcan add to your design workflows
that will help you test thatway like much more easily than
just trying to do guesswork onit.
Cathy Sirvatka (15:02):
Oh, that's really cool.
Do you have any plugins thatyou always use or that you
prefer?
Vanessa Rusu (15:09):
Yeah, so the one that I use with XD because my
workflow is in XD is calledStark and there are like free
and paid versions of that plugin.
But you can also the freeversion is quite good to get you
started in this area, where youjust add it to your XD and then
, while you're designing, youcan actually just kind of select
elements and you can check thecontrast on them, see how they
(15:31):
line up against accessibilitystandards, and then it will also
simulate color impairments ordifferent ways of seeing color,
so that you can check, you know,if somebody is more on the
color blind spectrum, what is mydesign going to look like for
them.
So Stark is one that I'drecommend.
Cathy Sirvatka (15:47):
That's really good, because I know there's at
least a few different types ofcolor blindness.
So having a plugin that kind ofconsiders all those is really
good, because none of us aredoctors or we don't know these
things if we don't live withthem.
So I think that's really good.
(16:09):
We're gonna provide a link forthat plugin in the show notes,
because I think that's somethingthat a lot of us should be
using, myself included.
You mentioned, I think,standards like the standards for
accessibility, and in ourprevious conversation you said
something about AA standards andI was in my mind I'm like I'm
(16:32):
affirmative action, what is?
But there's actually this is myignorance.
There's actually grades ofaccessibility right there's A,
there's AA and there's AAA.
Yes there is.
So do you know what they meanspecifically or you aim for?
I think you said AA, correct?
Vanessa Rusu (16:54):
Yeah, it's really common to aim for AA.
So it kind of backing up in theworld of accessibility.
When you're starting to kind ofunderstand and think about
accessibility or design process,it can honestly be fairly
overwhelming.
It isn't the easiest thing toonboard into your process
because there's so muchterminology, there's different
levels of accessibility, there'sdifferent kind of things to
(17:17):
look for and then within thatwhen you dive into okay, what
are the contents of thesevarious levels of accessibility?
It's kind of a whole manual initself in each level.
It can be quite daunting tolook at.
But in terms of breaking it downto the bare basics, there are
three levels right now that arekind of widely recognized as
(17:39):
accessibility standards.
So there's a single AA, aa andthen AAA.
So if we break that down evenfurther, basically your single
AA is like the minimal amount ofcompliance that you're gonna
get.
So it's essentially justproviding like the bare minimum
functionality for users withdisabilities or users of various
abilities to kind of use yourwebsite properly as you intended
(18:02):
.
So this often covers thingslike can your user navigate with
a keyboard?
Are there captions and alttexts 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 rightnow which is considered to be
acceptable compliance.
(18:23):
So AA typically is what you'restriving for and this is kind of
like the goalpost for where wewanna be right now on the web,
and it just means that themajority of people with
disabilities or various levelsof abilities can use your site
effectively without majorblockers or impairments.
So when we're looking at thismiddle level, this double A
(18:45):
compliance, we're really lookingat things like color contrast.
Are your colors, you know, justlike what we talked about
previously are the colors?
Do they have enough contrastfor somebody to see them?
Does it make sense?
You know, if we move thatdesign into black and white,
does it still communicateeffectively without the use of
color?
Is our navigation set up in away that makes sense and is easy
(19:06):
to use and is consistentthroughout the websites?
Are we offering that kind ofconsistent experience?
Can somebody use a form without,you know, really hitting
roadblocks or frustration?
Are our forms accessible?
Can we fill them out and submitthem and understand, when we're
looking at them, what we needto do if we do hit errors or
roadblocks, things like that.
(19:26):
So AA just opens it up to kindof a more a majority of people,
giving the majority of peopleaccess, and then AAA is what's
considered optimal compliance.
So this one is like superdifficult to achieve and not
everybody needs to achieve it oreven can achieve it
realistically, but it means thatyour website is accessible to
(19:47):
the maximum number of users thatmight have, you know, different
levels of abilities ordisabilities and that means that
you know if you have video or,yeah, particularly video content
, that you also provide maybe avideo of interpretive or
interpretation through signlanguage, things like that very
high levels of contrast, very,very.
(20:10):
You've incorporated quite a bitof tools with AAA to reach that
optimal compliance.
A lot of times it's not reallylike feasible to achieve optimal
compliance, which is why mostwebsites aim for that AA
compliance level.
Cathy Sirvatka (20:32):
Right, I think I looked at a AAA and it seemed
like more basic.
It was very informational.
Yeah, it was kind of what wemight look at as designers, as
bare bones, you know.
With the contrast is just likewhite background with a darker
text.
(20:52):
There was really not that muchimagery.
Everything seemed to be, youknow, very hierarchical in their
presentation of the content,which would make it much easier
for somebody to navigate with adisability, I would think.
Vanessa Rusu (21:11):
Yeah yeah.
Aaa websites are usually notvery like.
They don't.
They're not heavily designed asmuch as they are designed to be
functional, so you're doingmore things that are supporting
functionality than aesthetics atthat point.
Cathy Sirvatka (21:23):
Yeah, it's sort of a different animal.
That's really interesting.
All right, so talking aboutwebsite elements with regard to
accessibility, let me just pickon fonts.
We just talked about colors.
Are there certain fonts thatare more accessible than others,
(21:43):
or a combination of fonts, orhow do you address the font
situation?
Vanessa Rusu (21:49):
Yeah.
So I think in my research, inmy experience today, there's no
like hard and fast requirementsaround what fonts you can and
cannot use.
A lot of accessibility is innot the on off switch of, yes,
no, accessible, but really beingcritical with our design
choices and thinking and kind oftesting.
If you have, you know, thebudget to kind of test and
(22:12):
actually get feedback on on onwhat you have chosen to
implement.
But there are like guidelinesthat you can kind of consider so
basic, your basic system fontslike aerial, helvetica, verdana,
tahoma, those kind of ones thatcome out of the box when you're
, when you're designing, thoseare typically considered to be
quite accessible.
So those are obviously choicesthat you could make.
(22:34):
Or fonts that are very similarto those basic system fonts in
their legibility and theirweights and their sizing and and
everything like that Typicallyare good choices.
What I like to do is just reallylook at it with a critical eye
again and say you know, is thislegible?
Am I compromising legibilityfor aesthetics here?
You know cursive fonts are, canbe really pretty, but they can
(22:57):
also be fairly difficult to read.
So what type of usage am I, amI using with the fonts that I'm
choosing and does it make sense?
Does it make sense to me?
Does it make sense to someonewho might, you know, have a
reading or learning disabilityor, you know, might need more
time to kind of read, or mightbe even new to the language?
Maybe they're just learning,you know.
(23:17):
I mean, I'm designing inEnglish, but maybe they're just
learning that.
And am I giving them aninclusive experience where
they're not struggling to readthe words that I'm choosing to
put on the page?
Cathy Sirvatka (23:28):
Oh my gosh, that's a really good point If
you get, you know and I findit's really popular today these
scripty fonts to be used asheadings or headlines or
whatever yeah, very curly, curvy, fancy fonts that look super
cool.
But yeah, if you're, if you'resafe from the Middle East and
you're not, even you're stillgetting used to our characters
(23:52):
and our type, that would be, Iwould think, crazy to try and
understand.
Vanessa Rusu (23:58):
Yeah, yeah.
So I like, I think, and I thinkthere's a time and a place for
everything.
I think if you're relying onvery decorative fonts to
communicate your core messaging,that's when you might need to
kind of reassess.
But it doesn't mean that youcan't use it as you know accents
or or kind of visual aesthetictouches.
It just means that you need tokind of assess, or I would think
(24:19):
you would need to kind ofassess the is the messaging core
to what I need to communicateand does that, is that inclusive
of a wider audience?
Cathy Sirvatka (24:29):
Yeah, I hear you .
Okay, so like serifs andnon-serif or sans serif, I took
French.
Serif or sans serif Does itmatter?
Does serif or sans serif matter?
Vanessa Rusu (24:45):
So, that's something I can't really speak
directly to with a lot ofknowledge or experience.
I know that you like fonts thatare considered accessible are
like help Helvetica, which is asans serif, but then you also
have Times New Roman, which iswidely considered to be an
accessible font.
That is a serif.
So I think for for myexperience, it just kind of
really comes down to legibilityand then, you know, testing.
Cathy Sirvatka (25:08):
Okay, like you said, going back to the system
fonts which have a little bit ofboth.
Like you just said, it's funnybecause, again, in the whole
timeline of the web and itsexistence, we started out with
those fonts.
Those were the, those were theweb safe fonts, the only ones we
could use.
I know because not everyonewould have them on their
(25:31):
computer, and so you had to usefonts everybody had.
And now we're just driving itaway from those things, but
again, they still make sense ina lot of situations.
Vanessa Rusu (25:44):
Yeah, absolutely.
There's definitely a time in aplace where they still totally
make sense, and it's not thatyou can't use any other font.
It's just that I think thoseare a great frame of reference
for what is accessible and youknow kind of identifying, does
it?
You know, using that as aguidepost, I'll say when you're
assessing your font choices, Ilike that a great frame of
(26:04):
reference.
Cathy Sirvatka (26:05):
Yeah, that's really good.
Now, earlier you mentioned yoursister who has CP, and you
think about her when you aredesigning websites, or or do I?
I'm putting words in your mouth, but you talked about the
experience you've had with herwith regard to accessible
(26:27):
buildings.
You know that kind of thing.
You see it from her perspective.
But you mentioned something ina previous conversation about
patterns and that she canrecognize design patterns really
well.
So in patterns with this wouldbe the not the user experience,
but the interface.
(26:48):
We know that logos tend to bein the upper left and menus tend
to be in the upper right.
Can you speak to that a littlebit as far as like where we
expect things to be and andshould we?
Can we deviate from that, orshould we?
Vanessa Rusu (27:06):
Yeah.
So yeah, going back to like theway that my sister specifically
sees the internet and interactswith the web is and again,
she's only, you know, she's oneperson, but she does have a
disability and I think she isimportant.
Her use case is important toconsider but it is, you know,
only one of many out there.
But what I've been able to kindof see with her and what she's
(27:27):
able to do, which I think is socool, is she can really
recognize like patterns in userinterfaces and kind of beyond
that she can.
She has this global designpattern understanding, we'll say
so, I like to call it globaldesign patterns.
But if you can enter anywebsite, she'll typically know
that the logo is going to be inthe top corner or the top center
(27:49):
.
Her navigation is going to be,you know, in the top usually
it's the top right and that anylike copyright or legal
information or anything likethat she's, she's picked up that
that's all kind of in thefooter and then she can use, you
know, imagery and UI patternsto navigate what's a button,
what's not a button, things likethat, and I just think that
that's that's super cool.
(28:09):
So for me, kind of watching thatshe relies on those consistent
elements to kind of be in placereally 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 likeour headers and our navigations
, I want to keep thoseconsistent so that people who
(28:30):
are, you know, might havedifferent abilities or different
understandings that they'renavigating my design with that
they really understand and havehave a I'm not making them work
to try to figure out my specificwebsite and my specific design
pattern.
So I really like to use thoseglobally understood patterns of
where our navigation is and whatour, what our headers look like
, things like that.
And making sure that you knowbuttons look like buttons and
(28:52):
links look like links and andwe're just kind of helping the
user along with you know thatnon verbal language that does
exist in UI components.
Cathy Sirvatka (29:02):
So what do you think and, by the way, you had
mentioned to me in a previousconversation, and I can't
remember if you mentioned ithere that you do teach or you
were teaching.
Do you still teach?
Vanessa Rusu (29:16):
I do, yeah, yeah, so kind of, along with running
my own studio, I do teach verycasually at the College here in
Vancouver.
I teach in the design programand I teach the web centered
classes.
So I teach everything from youknow WordPress to web design.
I even do a little bit of webdevelopment teaching, which is a
whole other beast, but I dohave students.
So I do kind of incorporate allof the you know, the
(29:37):
accessibility, the thoughtprocess and the incorporating
accessibility into your designprocess.
I do try to include that inwhat I do teach to students,
because I just think it's soimportant to kind of have you
know the checklist, if you will,or the understanding that
design is about aesthetics, forsure, and it's about
(29:59):
communication, but it's alsoabout inclusivity and kind of
opening up your design processand the things you're building
to the widest level or, why,widest amount of audience and
people that you can.
Cathy Sirvatka (30:11):
Okay, because I was thinking do they try to step
outside those bounds?
You know, in trying to becreative, especially when you're
a student, you're trying to,you want to try new things.
You've seen things a certainway and you're like, what if I
do it this way?
What if I put the navigationand I've seen this in websites
where the navigation's on theleft side and maybe it's, you
(30:35):
know, tips, so it's it's facingto 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 (30:47):
Yeah, yeah.
So I think I think that, likeeverybody, if you're in a
designer at all, you've probablyexperimented with trying to
break that grid or break thatwheel or reinvent the wheel in
that way.
I know I definitely have in thepast been like, okay, like
what's another way that I could,you know, totally innovate this
header or just like dosomething that's a little bit
different and a little bit cool.
And you know, there'sdefinitely like a time and place
(31:10):
to kind of explore with whatthat looks like and it is a
common, a common thought toreally try to push the bounds of
what's possible in design.
But, kind of going back to theaccessibility conversation, I do
think that it's important tohave an understanding that you
know global, global designpatterns and just inherent ways
that people expect the web to beset up.
(31:31):
That does have value and it issomething that we should
definitely consider when we aredesigning.
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 experimentedwith that layout or doing like a
horizontal scrolling websiteinstead of a vertical scrolling
website.
Things like that.
(31:51):
They're cool to experiment with.
But we really have to kind ofalso assess the design for
inclusivity and say who who'sgoing to get a kick out of this
and who's going to think it'samazing and who's not going to
be able to understand how to useit.
And who are we kind of, youknow, excluding from being able
to use this design?
And is there a way that we canstill innovate here without
(32:12):
completely excluding people whorely on those cues and those
layout patterns and thoseconsistencies?
Cathy Sirvatka (32:18):
Wow, that's really good.
Yeah, it is, it's.
This is a tricky balancebetween wanting to be innovative
and creative and give yourclients something that's you
know, not cookie cutter, yeah,while still considering those
who Need those accessibilityfeatures, which I love your term
(32:38):
I haven't heard anyone actuallyput it this way but global
design patterns, global designpatterns, that's really good.
Vanessa Rusu (32:46):
Yeah, I'm not sure if that's specific to me.
That's just typically what Iuse to take and pay it, but I'm
sure there's a word out there.
If it's not out there, youshould coin it.
Yeah for sure.
Cathy Sirvatka (32:59):
I will.
I will give you credit for thatone.
One last thing about theelements on the page.
What about using heading levels?
I see a lot of websites thatdon't have the heading levels in
the right order.
You know they're actually thereto help outline the content.
(33:22):
That's not only beneficial tosomebody with disabilities, but
also Google likes it whenthey're used correctly heading
level one, heading level two andI see a lot of people you know
I'm going to put it an H3 herebecause I like that font or I
like the way that one looks andit's just quick and easy to pop
that there, even though itdoesn't really make sense in the
hierarchy of the page.
Vanessa Rusu (33:45):
Yeah, that's a huge part of, I think, a design
kind of decision that you canmake as a designer upfront is
what are your heading levelslook like?
Because you're totally correctin saying that they're not just
aesthetics, right, they're notjust meant to be six different
design options that we caninclude on a page.
They actually serve purposesbeyond that in terms of how you
(34:07):
know Google's reading your sitewhen they're going through and
skimming your content andorganizing your content.
They are looking at the samelevel and that is dictated by
largely, or also dictated byyour heading levels of how
you're organizing your content.
And then also things likescreen readers will use that to
kind of go through a page andcreate a navigation or table of
contents, if you will, for userswho might be using assistive
(34:28):
devices to really navigate andskim and and Pre read that
content of where they want to goif they're using, you know,
assistive devices or screenreaders or things like that.
So I think it's reallyimportant To kind of consider
your heading levels upfrontwhere you're at the design phase
and you're saying, okay, likeI'm going to have, you know, six
, you have six heading levels.
You have each one through, eachsix if you're in the
(34:49):
development mode but heading onethrough 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 designingthings and things change, that
there is, you know, thisguidebook or style guide to go
back to, of this consistentdesign pattern that we're using
where H2 should be in this placeand they're going to look like
this.
So I always like to think aboutit and the way that I teach it
(35:13):
kind of to my students and andthe way that I frame it to them
Is I kind of try to think of itlike like a book, like each page
on your website is its ownlittle mini book.
So if you think about a book,there's only usually I mean most
books in the world only haveone title.
Where that's the title of thebook, it's going to tell you,
(35:34):
maybe, if it's like a textbook,it's going to tell you exactly
what Topic or subject that thattextbook is about and that would
be considered your age one inthe web design world, where your
page title, or your pageheading, or that book title, if
you will, is going to be usuallyyour most prominent Heading on
the site.
And then, if you look downdeeper into the book reference
(35:56):
than the next thing you wouldlook at is your chapter titles
and that would kind of tell you,okay, like, what is the topic
of this chunk of the book andthe way that relates to web
design is your chapter titlesbecome your age to and your like
section titles as to okay, whatis this section of content on
my page about and how do Irepresent that with a heading.
And then you kind of even dive,you know, one level deeper, and
(36:18):
so on and so on, where your agethrees become, like your sub,
your subheadings or yoursubtitles, and they exist in
your chapter Of your you know,book in the sense, but they're
more specific to exactly what isthis block of content or this
specific piece of content inthis section going to be about.
So that's kind of the way thatI like to look at it is each one
is book title, each two ischapter title, age three is
(36:39):
subtitle and then so on and soforth.
Cathy Sirvatka (36:42):
Yeah, that's really good and I like yours
sounds more creative and funthan I always think of it as
like the term paper that we hadto do in school, in college, you
know, and you had to.
You had to provide an outline.
That was part of the process ofcreating this huge term paper
and I like the book better thanthe term paper.
(37:03):
Analogy Just sounds nice.
Vanessa Rusu (37:07):
Yeah, yeah, I think it's definitely there's
less.
You know PTSD from your collegedays in there, but it kind of
does line up in the way that ifyou think about it as like a
table of contents from even youmay be your your term paper, you
can kind of think about it thatway as well, where screen
readers and things like Googleare going to look at your page
(37:27):
and they are going to kind ofmore or less pull out the table
of contents and that is going tobe your heading structure.
So you wanted to kind of makesense in terms of how you're
laying on your content.
Yeah, yeah, that's that's.
I will take your book analogy.
Cathy Sirvatka (37:43):
And bring it with me.
Now when you're dealing withclients.
You're making client websites.
Some clients have very strongideas about what they want in
their website or how they wantit to look, and some and these
are probably our favorites right, they totally trust us and what
(38:03):
we present to them and theyaccept it because they know
you're the pro.
But when you have a client whohas very specific ideas and
maybe doesn't fit in with theaccessibility aspect of things,
first of all, have you comeacross that and, if so, how?
How do you deal with that withthe client?
Vanessa Rusu (38:24):
Yeah, that's a really good question.
It definitely does come up andI'm sure whether you're the
client or the designer, at somepoint 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 couldhave 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'smaybe not the most accessible
(38:45):
thing.
So it definitely does come up.
Typically, it's easiest to kindof address accessibility
concerns in color at thebeginning of a project.
So if you're the designer, youkind of build your color palette
around or with accessibility inmind.
But if you're a client, youmight not always know what that
(39:06):
means or what that, what, whataccessibility truly means for a
website.
So if clients ever do come tome and you know they want
something and I look at it and Ijust it's not going to be, you
know, meeting our color contrast, say, for accessibility, what I
typically will try to do isjust educate them on you know,
what is accessibility on the web, why do we want it, why do we
(39:27):
need it and generally, you know,going to them and saying, you
know, these colors, whilethey're great and they're on
brand, they aren't inclusive toeverybody and they aren't
actually going to meetaccessibility requirements, and
I think it's really importantthat we do make sure that we are
as inclusive as we can be.
So here's, you know, here's myalternate solution and I'll
(39:47):
propose something that is, youknow, the most close match that
does meet accessibilityrequirements, and often that's
what clients need, like that's.
All they need is Is they justneed to kind of be aware that
that's even a consideration,because they're not web
designers, they don't stay up onthe trends, they have no idea
half the time, and it's our jobto kind of educate them in that
way.
And a lot of them will say, oh,absolutely, I want to be
(40:09):
accessible, I don't want toexclude anybody.
Like, let's figure out asolution here.
So that's obviously reallygreat if that happens.
If it doesn't happen, you know,if they, if they still get
pushed back on on Includingaccessibility or including
compliant colors or things likethat, at that point you kind of
just you have to, you know, tellthe client that you do want to
(40:32):
proceed with accessibility andthere are, depending on where
you're located.
There are actually, you know,legal requirements that are
coming into place aroundaccessibility, and you just have
to have to kind of hope that,if the inclusive inclusivity
conversation isn't enough, thatKind of backing up the need for
accessibility with that proofwherever you're located is going
(40:52):
to do the trick.
Cathy Sirvatka (40:54):
Do you Put anything in your contract
regarding this or have like acheckbox saying I'm willing to
sign off on the fact that I'vechosen Of course contract would
come up before design.
Or do you do you offersomething in writing that kind
of Covers you and acknowledgesthey've made a choice against
(41:18):
what you've suggested?
Vanessa Rusu (41:21):
Yeah, no, so it it has in the past.
I Would say I don't.
I don't necessarily included inmy contract as like a written
thing.
Right now, I do have theconversation early in the
process saying you know, whenyou were, when you work with me.
Part of my process is that I am, you know, going in with a
(41:41):
mindset around accessibility andI really do want to make your
site as accessible as possible.
So I am going to look at thingslike content and color contrast
and navigation patterns andthings like that.
If I get a lot of pushback onAccessibility, typically what
I'll do is I will send an emailsaying okay, like here, here is
you know what I think we shoulddo.
Maybe there's not budget forthat or it depends on, you know,
(42:04):
the client and the project andthe scope and things like that.
And just so you know like weare going to proceed without
making this Accessible.
And I just put it in writingand I have them kind of agree to
that beforehand, just so thatit's tracked, you know.
And and if there is, you knowif rules and laws are in Place
where you live and where yourclient is based.
(42:24):
Out of that, you do have apaper trail on.
You know, we did try to makethis accessible and I've done my
best, and it really was aconscious decision that was made
to not address this problem.
Cathy Sirvatka (42:36):
Yeah, I think that's a really good idea.
I mean, I know in our countryI've heard of some businesses
who have been sued largebusinesses to that Because their
website was not accessible.
So I don't know if the webdesigner has been has gotten in
trouble, but boy, I would surewant to cover my butt on that
(42:59):
one.
Vanessa Rusu (42:59):
Yeah, absolutely.
You just want to be safe ratherthan sorry, especially if you
are keeping up to up to date onaccessibility and you you know
you knowingly are doing thingsthat you wouldn't ideally want
to do.
I think for me it's just betterto kind of put it in writing so
that you are doing as much asyou can and Hopefully you know
(43:20):
if it's not able to beprioritized right away, that
down down the road, that theywill 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 andlet's do it right.
But that being said, it is kindof easiest if you are joining a
project, it's easiest to havethese 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
(43:43):
a development project where I'mnot as involved in the design
and I'm more involved in thedevelopment aspect, I typically
request to see the designs earlyin the process, kind of as the
client approval and Revisionphases going back and forth, so
that I can kind of add thatpiece to the discussion earlier
rather than later, because it's,you know, it's easier to
(44:04):
incorporate it at the beginningof a project, then get all the
way down the road and you'vespent months on.
You know this, a design that'sbeen approved, and at the end of
the road you realize, oh mygosh, it's not accessible and
there's just no budget.
There's too many wheels inmotion, it's too big of a task
to fix it.
So, yeah, I always just like totry to get get in early and at
least plant the seed early thatwe want to accommodate, you know
(44:26):
, especially like things likecolor contrast and design
patterns up front, as as earlyas we can.
Cathy Sirvatka (44:33):
Yeah, so you mentioned budget a couple times.
Does making an accessible siteincrease the pricing of a
project?
Or I Know you try to do it inevery project, but you Maybe
you're just talking about havingto go back and read.
You know, recreate some thingsto be accessible, but does
(44:56):
Accessibility increase the pricein general of your websites?
Vanessa Rusu (45:00):
I do, yeah, so I included in in my price.
It's just part of my designprocess, so it's not something
that I Specifically outline.
As you know, you were payingfor color contrasts to me,
double a compliance like that.
I don't go that deep with it oranything like that, but it is
something that you you do needto spend time on.
So if you include it in yourprocess, it just becomes part of
(45:22):
part of the price.
It is expensive if you Need todo it after you've done your
project.
So if you get all the way to theend because if you've chosen,
you know, like fonts that don'tmake sense or colors that don't
make sense, or navigationpatterns that that aren't, you
know, most, the most inclusiveor Accessible for a wide variety
of people, then that's gonnaobviously cost a ton of money to
(45:45):
go back and like basicallyredesign things.
It can be a huge investment.
The same goes with thedevelopment phase.
So if you are developing awebsite and you're not Keeping
accessibility top of mind anddoing things like using semantic
coding and adding yourdescriptions and tags and and
patterns and heading levels, youknow, using your h1 tags
instead of spans or divs orsomething like that, it's
(46:07):
obviously gonna be more timeconsuming and more intensive to
go back and comb through it, butit is something that, if you
work it into your price, thereare definitely Additional things
to add to the checklist whenyou are doing it, but it's not
something that you know in myexperience is A huge add-on if
you're tackling it with that inmind up front at the beginning
(46:30):
of the project.
Cathy Sirvatka (46:32):
I see that's.
I see that it would make sense.
I mean, going back and tryingto retrofit a website Would be.
I mean, it's almost.
It's like basically a wholeredo, depending on how badly
they veered.
Yeah, it depends on how Exactly.
Yeah exactly.
Now, what tools do you use inyour process?
(46:56):
You mentioned a plugin for Wasit for XD or figma?
I can't remember.
Or maybe it will work with both, or maybe it will work with
both.
Vanessa Rusu (47:05):
It's for both.
Yeah, so I use Stark if you'redesigning for XD or Figma and
I'm sure there's other ones outthere, but that's the one that I
use, where you can literally bein Figma and you can just
select your text and yourbackground and check it against
color contrast and otheraccessibility indicators from
(47:25):
directly within your plugin,which is great when it comes
into web designing.
Say, you're out of XD andyou're actually in a browser,
there are definitely tools thatwill assist you with reading
what's happening in the browserand assessing it for
accessibility.
So there's a couple of pluginsthat I use.
One is called Site Improve, Ibelieve Site Improve
Accessibility Checker and that'sgoing to run through your page
(47:49):
that's in a browser.
So if you're building somethingon WordPress Squarespace or
you're just building it, you canrun it once it's in a browser
and see what's passing andwhat's failing.
It'll run some automated checksfor you.
Automated checks are kind ofonly a piece of the puzzle, but
it'll help you in that way whereit'll tell you whether or not
you're failing those hard passor fail guidelines.
(48:10):
There's also a plugin called Ithink it's by
AxeDevAxEccsAccessibility.
It's called AccessibilityInsights for Web and I'll send
you the link, but it also isanother tool that you can use
when you are checking somethingin a browser for accessibility.
So it's going to measure thingslike is your tab order correct?
You know, if somebody is goingto show you your tab order.
(48:33):
So if somebody is using akeyboard and they're primarily
using the arrow keys or the tabkeys to navigate through your
website, it will actuallyvisually show you the path that
somebody is going to take.
So it'll say this item isnumber one and then we're going
to tab and then it'll highlightthat this is the second thing in
your tab order.
So that will help you kind ofreally get an understanding of
(48:54):
how somebody might see or useyour page from different devices
, along with kind of checkingthings like color contrast and
font sizes and things like that.
Cathy Sirvatka (49:03):
I love that.
The tab order.
That's something we don'tnecessarily think about, so I
like that tool a lot.
And is there anything else thatyou use?
You use Lighthouse right inChrome.
Vanessa Rusu (49:16):
Yeah, so that's actually something that is
they've added, I think, directlyto Chrome now, which is super
cool.
So if you are familiar with theInspect, the dev console on
Chrome, you can launch up yourLighthouse tools and that's
going to assess for performance,accessibility, seo.
You get a whole bunch of stuffin there and it'll tell you,
(49:36):
kind of in plain English, moreor less, where you could improve
as well.
So that's an awesome tool aswell.
Cathy Sirvatka (49:42):
That's really cool.
Yeah, it did used to beseparate and I didn't catch it
right away until I went to ameetup group that it was
actually incorporated into theInspect, because I use Inspect
all the time.
We all probably do.
Vanessa Rusu (49:57):
So the super cool thing if you're using Inspect as
well, if you are like a CSSnerd like me is if you're using
your Inspect tool in Chrome thelatest versions I've seen they
actually do help you with colorcontrast right in there.
So if you're ever inspectingthe color in your little Chrome
dev tools, it will show youwhether or not the color of that
text is accessible, for whichlevel of accessibility it meets.
(50:20):
If it fails, it passes, and youcan do that and play with it
right in the dev tools, which Ithink is so cool now.
Cathy Sirvatka (50:26):
That's amazing, actually, that they can do that
and it helps us so we don't haveto step page by page.
If you're developing pages andyou've gone through your website
and you're trying to remainaccessible but maybe you've
missed something somewhere, thenthese tools can help because
they'll just scan through andcatch anything you may have
missed along the way.
(50:46):
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 makesure I got everything.
It could be a lot of extra work, so that's really cool.
I love that these tools are outthere now.
Thank you so much, vanessa.
If listeners want to find youor learn more about you or go
(51:10):
just check out your work, wherecan they find you?
Vanessa Rusu (51:13):
Yeah, absolutely so.
I'm a bit hidden on socialmedia these days, but I do have
an Instagram account that peoplecould go and visit me at.
So I'm at VanessaRusoustudio,so just my namestudio.
That's where I'm hanging out onInstagram.
You can also find me onLinkedIn and if you want to see
more of my work, you can checkout my website at
(51:35):
VanessaRusoucom.
As per every designer out there, I'm sure it's not as up to
date as I'd like it to be, butthat's where you can see some of
my work and learn more about me.
Cathy Sirvatka (51:45):
OK, that's cool.
Thank you so much again, and Ijust appreciate the education
that you brought to us today.
Vanessa Rusu (51:53):
Yeah, thank you so much.
It was so great to be here andI was so happy to talk to you
today.
Cathy Sirvatka (51:57):
Great, thank you .
If you're looking for thatfreelance inspo, you need
subscribe to this podcast.
Then share it with someone else, because who doesn't need
inspiration?
Popular Podcasts
Stuff You Should Know
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.
24/7 News: The Latest
The latest news in 4 minutes updated every hour, every day.
Crime Junkie
Does hearing about a true crime case always leave you scouring the internet for the truth behind the story? Dive into your next mystery with Crime Junkie. Every Monday, join your host Ashley Flowers as she unravels all the details of infamous and underreported true crime cases with her best friend Brit Prawat. From cold cases to missing persons and heroes in our community who seek justice, Crime Junkie is your destination for theories and stories you won’t hear anywhere else. Whether you're a seasoned true crime enthusiast or new to the genre, you'll find yourself on the edge of your seat awaiting a new episode every Monday. If you can never get enough true crime... Congratulations, you’ve found your people. Follow to join a community of Crime Junkies! Crime Junkie is presented by audiochuck Media Company.