December 12, 2023 • 16 mins
Can everyone - and I do mean everyone - use your website?
What a lot of business owners don’t understand is that there are common website trends that make it harder for some individuals to use their websites.
That means you’re excluding a potentially huge chunk of your target audience - up to 27%. That’s the exact opposite of what you want to do right?
The good news is that having an accessible website is not only possible, it’s easy to make your website more accessible for everyone.
Today, we’re going to cover 5 easy ways to make your website more accessible, including:
- Writing good ALT descriptions and how to add them
- How to make links clear to everyone
- Choosing the right color combinations
- How to simplify your website copy to be readable
- And making video and audio content accessible
MENTIONED RESOURCES:
- Captain Coder Website Audit for Accessibility
- Rev.com
- WebAim Contrast Checker
- Wordcounter.net
- Grammarly
FREE RESOURCE: Get more leads from your website
Follow me on Instagram: @captaincoder
Listen
Watch
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
(00:00):
Can everyone.
And I do mean everyone.
Use your websitewhen your website is accessible
to anyone, no matter their abilities.
You'rebuilding a much more inclusive business.
What a lot of business ownersdon't understand
is that there are common website trendsthat make it harder for some individuals.
(00:21):
Here's a website that meansyou're excluding a potentially huge
chunk of your targetaudience up to 27%.
That's the exactopposite of what you want to do, right?
Pretty sure.
Now, the good news is having an accessiblewebsite is not only possible.
(00:43):
It's easy to make your websitemore accessible for everyone.
So let's dove into five easy waysto make your website
more inclusive.
Number one, we're going to addalt descriptions to images.
Now, this is the lowesthanging fruit on our list today.
(01:05):
But the first placeanyone can start with web accessibility
is by adding descriptions to your images.
Now you do this throughsomething called the all tech within HTML.
Let's get technical for 5 seconds.
You have a space to describewhat's in an image.
So those who are exploringyour website suit through a screen reader,
(01:29):
usually those who are blind or havevisual impairments can still understand
and get the context of the imageon your images, on your pages.
Now you place this description,this alt tag
or alternative text tag.
Now a screen reader reads that descriptionback to the user
so they can understand what itwhat the impact of that images
(01:53):
on the rest of the content.
Now, as a super simple example,say that you have a headshot
that you've uploaded to your website.
You can make the alt descriptionpicture of Sally Smith
sitting on a brown couch holding her arms.
You want to keep this description shortand to the point, but provide
(02:16):
some context.
Now here's the cool thing about all tags.
Something that's a nice little sidebenefit.
Google can't see your images either, soby adding
a good alt description,you're also improving your ACL.
Now most of what you doto improve your web accessibility actually
has a positive impact on your ACL,so there's really no point to not do this.
(02:41):
Now, if you want to know how you can addalt text, you can actually easy
and easily add descriptionsto almost any website builder.
You just may have to google itfor your own personal one.
Now in WordPressthere's a spot for alt text right there.
When you upload an image to the medialibrary and Squarespace,
(03:02):
you can add it either as the file nameor through the image.
BLOCK There's a spot for alt text and showit has a description box.
Literally, this is just a quick Google ofhow do I adult text to a blank website?
So whatever type of website you haveand there should be some help
articles for you to make this easy. Nowalmost every single image on your website
(03:25):
should have some kind of description.
The points where you don't need to iswhen there are background images or maybe
patterns or things that are just therefor some kind of visual element.
But pretty much every imageyou can't go wrong with adding an alt
description to it.
(03:47):
Now, somethingthat you want to think about here
is not putting text in an image.
If someone who has visual impairmentscan't see your images,
you might be wondering about the graphicyou uploaded
to your website with text in it.
Yeah, just. Just don't do that.
(04:07):
Okay.
Now, when you put text in images,you're making it difficult for many people
to readand get the context of that information.
Anything important for your dream clientto understand needs to be written.
An actual text, actual copy,never in an image.
(04:28):
Now how do we make info graphics?
How do these factorand how do we make those accessible?
Now, any large infographic that you useshould include a detailed description
below with the important informationlike the statistics, the findings, etc..
The number twowe need to make our links clear.
(04:49):
Now, our next item might require some timeto go through the pages of your website,
but any links on your websiteneed to be clear
and very easy to understandthat they are in fact links.
When someone is looking at your website,is it obvious that they can click
that thing?
You might be too close to it,so ask a friend if they understand
how to navigate your website.
(05:14):
We want people to dig through our website.
Look at our services pages,get to our contact page
and fill out a formor head over to our blog.
We have to make this easy by making linkssuper clear.
Not only is this a great user experience,it also helps everyone,
no matter their abilities.
(05:38):
For action links where you're tellingsomething, somebody to go and do this
at the end of, say, a block of textor a section, make it a button,
and then keep that button style consistentthroughout your entire website.
This makes it so easy for people to knowthat they can click that thing
and it will help themmove thier website
(06:00):
and actually work with you.
Now if you want to link a bit of textin a paragraph, we call this a text link.
You need to make it a different color andadds in styling to its what stands out.
For instance, on my websitemy main font is black
and my links are blue and bolded.
(06:22):
You can also add an underlyingwhich is a very clear link indicator
or set a different styleso that when you hover over it, it's
also clear that it's something clickable.
Now you might want to might wonderwhat text do we actually link?
Because this does have an impacton our accessibility.
(06:44):
You don't want to link somethingsimple like click here
or learn more.
That doesn't say anythingto your dream client
about what they're going to getwhen they click that link.
So instead, use descriptive link text.
(07:04):
That can mean having a buttonthat answers an implied question
that you asked in the text above, i.e.
learn how which is better than learn more,or telling them that the page
they're going to go to.
So like seeour services, view our portfolio,
read testimonials in a text link.
(07:25):
It should reference where they'regoing to go and when they click that.
So you can either referencean article title or relevant extract
depending on what it is,or just link the most relevant
part of the sentence that matters.
Where are they going to end up?
Just please. Just don't ever link.
(07:45):
Click here.
Now, number three, color contrast.
Now, before you create any graphicsor update your website,
you need to think about color contrast.
Now, the combination of the font coloron top of the background color matters
a lot to someone who has low visionor colorblindness suit.
(08:09):
I have neither,and I still have a hard time
reading some graphicsthat I see all over social media
because the contrast is all way off.
So while you're designing,you think that a certain color like
this is just going to look really nice,this color combination,
before you actually put that outinto the world.
(08:31):
Run that through an accessibility tool.
First.
First, though, I love webcamscontrast checker.
It is freeand it is quick and easy to use.
Now, the one color combinationthat we are not initially
always seems to come back as a fail.
Never, never fails.
Look, this is going to feel likeyou're limiting your design,
(08:51):
but what you're doing is you're actuallymaking things better for everyone.
When you're a font colorand your background color
do not have a high enough contrast,not everybody is going to be able
to read it.
Some of that font is going to actuallylook like it disappears
to somebody who has colorblindness.
Now I am pretty sure that you do not wantto prevent people
(09:14):
from reading the copy on your website.
So use web aims toolbefore you start designing
anything before you ever go into Canadaand create a graphic for social media.
Check.
The hex codes are the font coloryou want to use
and with the background coloryou plan to use.
Just to make sure that's actually legible.
(09:35):
Now, some color combosthat I see all the time that are fails
are like white on a lighter blue.
We think it looks nice,but nobody can read it.
Red on pink or pink on red.
That's a tough one.
I see it a lot.
Yellow on basically. Any background?
All color combos.
I see.
These are things I see failall of the time.
(09:57):
What's happening for a lot of the peoplethat I see, especially on social media,
is you're uploadingwhat you think are great graphics.
Now I can actually read them.
Not only will checking your colorcontrasts
help improve your website's legibility,it'll also extend
to all of your marketing materialsif you follow a simple process.
(10:20):
Now, when we start working with clientsand we get brand information
and we create a color contrast guide,we test each color
combination and list outwhich hex codes work with each other.
That way, we're always choosing a safecombination down the line
that won't affect legibilityof your all too important copy.
(10:40):
Which number four?
You want to simplify your copy?
Now, this is coming from an English majorwho actually has a master's in literature,
who loves to writeand loves being creative.
But all too often we're creating contentthat not everyone can understand
and connect withbeyond the accessibility of our words.
(11:05):
Your dream client doesn'tlikely understand all of your technical
jargon anyway, and they want to be ableto skim your websites.
So what does simplified websitecopy look like?
It means shorter sentences, a paragraphs,simple vocabulary, bulleted lists
where applicable and even boldedimportant sections of paragraph.
(11:30):
It also means using your headline sizesappropriately so.
One each one per page.
Introduce new sectionswith a heading to you.
Want to make sure that people understandwhere are the thought changes as
they scroll down the page?
Now allof those things will help your website
copy to be read fasteror to be more easily read
by everyone who visits your website.
(11:56):
You want to aim for about a high schoolreading level,
so like they say about 11th grade, 10thor 11th grade, and focus on the outcomes
you're providing your clients,not the steps you're taking.
I mean, they don't really careabout the house anyway, just the what.
So you can use online toolslike grammarly or word contract
(12:17):
not to help you parrot on your writingand make it more succinct.
Full disclosure All of my blogsare improved through both of these tools.
They help catch my overly superfluouswriting.
Mostly.
Now number five, captions and transcripts.
(12:38):
Now, do you a podcastor do you upload YouTube videos?
I mean, like this podcastand YouTube video that you're
literally listening to right this second.
Do you put any of those on your website?
You need to include alternative optionsso anyone can access your content.
Now, if you're creating videoswith any kind of narration,
(13:00):
any kind of voiceover,you need to include captions ones
so that everyone can accessthe information in the video.
Now, thankfully, this has becomequite popular to provide captions.
Hall Saluja so many platforms haveautomatic captions
already built in Instagram and TikTok.
(13:20):
Tok used several options for captioning,including styles, which lets
you have a little bit of fun with it.
You can use apps like captions to makethem even more stylized and more unique.
YouTube is adding captionsautomatically now.
They just tell youit might not be there immediately
when the video is loaded,but they will do automatic captions.
(13:41):
Now, if you have longer form videos,I recommend some videos longer
than 30 seconds to a minute.
I recommend services like Bravoconbecause it'll help you create
captions that you can uploadto your YouTube or Vimeo videos.
They're going to be a little bitmore accurate.
You're able to edit them a littlemore easily before you upload them.
(14:04):
And it's especially usefulwhen you're creating videos for lead
magnets, online coursesor say, a welcome video for your website
so that, you know,the captions are spot on.
Now, if youhave just audio on your website,
you'll want to ensure that you also havesome kind of transcription option
available to.
(14:26):
My blogs are actually basictranscriptions of many of my podcast
episodes.
This allows me to reach everyoneand they can get value for my podcast
even if they can't listen to it.
All righty.
Now it's time to ensure that your websiteand the other content you're putting out
there are as inclusive as possible.
(14:50):
Now, as business owners, it is so easyto get overwhelmed with everything
that we need to know and do.
And the goal postsfeel like they move all of the time.
But now that you knowhow to be more inclusive,
it's time to put it into practice.
Now, before you go get overwhelmedand you think I can't possibly
(15:12):
do all these things.
Just know that somethinglike 0.02% of websites
on the internet are fully accessible.
That doesn't mean that you can makeit doesn't mean you can't make some
strides to make your own more accessibleand offer a better experience to than
many of your competitors are offering.
(15:33):
Right.
We want to be better than the peoplewho we are competing against,
even if that person is just ourselves.
Now, if you don't want to do that yourselfand you're overwhelmed
by everything that you're seeing here,even though these are things
that you can do consistentlyto keep your content accessible, I get it.
And if you don't know where to startwith your own website, I also get it.
(15:55):
My team and I actually offerfull website audits
where we test your websiteand give you the action plan,
but can also perform the remediationand make your website more accessible
with our website on it.
So it's time to investand a good experience for everyone,
(16:17):
and you can do that by clicking the linkbelow in the video description.
Now, thank you all for tuning in.
I'll see you again next week.
Can everyone.
And I do mean everyone.
Use your websitewhen your website is accessible
to anyone, no matter their abilities.
You'rebuilding a much more inclusive business.
What a lot of business ownersdon't understand
is that there are common website trendsthat make it harder for some individuals.
(00:21):
Here's a website that meansyou're excluding a potentially huge
chunk of your targetaudience up to 27%.
That's the exactopposite of what you want to do, right?
Pretty sure.
Now, the good news is having an accessiblewebsite is not only possible.
(00:43):
It's easy to make your websitemore accessible for everyone.
So let's dove into five easy waysto make your website
more inclusive.
Number one, we're going to addalt descriptions to images.
Now, this is the lowesthanging fruit on our list today.
(01:05):
But the first placeanyone can start with web accessibility
is by adding descriptions to your images.
Now you do this throughsomething called the all tech within HTML.
Let's get technical for 5 seconds.
You have a space to describewhat's in an image.
So those who are exploringyour website suit through a screen reader,
(01:29):
usually those who are blind or havevisual impairments can still understand
and get the context of the imageon your images, on your pages.
Now you place this description,this alt tag
or alternative text tag.
Now a screen reader reads that descriptionback to the user
so they can understand what itwhat the impact of that images
(01:53):
on the rest of the content.
Now, as a super simple example,say that you have a headshot
that you've uploaded to your website.
You can make the alt descriptionpicture of Sally Smith
sitting on a brown couch holding her arms.
You want to keep this description shortand to the point, but provide
(02:16):
some context.
Now here's the cool thing about all tags.
Something that's a nice little sidebenefit.
Google can't see your images either, soby adding
a good alt description,you're also improving your ACL.
Now most of what you doto improve your web accessibility actually
has a positive impact on your ACL,so there's really no point to not do this.
(02:41):
Now, if you want to know how you can addalt text, you can actually easy
and easily add descriptionsto almost any website builder.
You just may have to google itfor your own personal one.
Now in WordPressthere's a spot for alt text right there.
When you upload an image to the medialibrary and Squarespace,
(03:02):
you can add it either as the file nameor through the image.
BLOCK There's a spot for alt text and showit has a description box.
Literally, this is just a quick Google ofhow do I adult text to a blank website?
So whatever type of website you haveand there should be some help
articles for you to make this easy. Nowalmost every single image on your website
(03:25):
should have some kind of description.
The points where you don't need to iswhen there are background images or maybe
patterns or things that are just therefor some kind of visual element.
But pretty much every imageyou can't go wrong with adding an alt
description to it.
(03:47):
Now, somethingthat you want to think about here
is not putting text in an image.
If someone who has visual impairmentscan't see your images,
you might be wondering about the graphicyou uploaded
to your website with text in it.
Yeah, just. Just don't do that.
(04:07):
Okay.
Now, when you put text in images,you're making it difficult for many people
to readand get the context of that information.
Anything important for your dream clientto understand needs to be written.
An actual text, actual copy,never in an image.
(04:28):
Now how do we make info graphics?
How do these factorand how do we make those accessible?
Now, any large infographic that you useshould include a detailed description
below with the important informationlike the statistics, the findings, etc..
The number twowe need to make our links clear.
(04:49):
Now, our next item might require some timeto go through the pages of your website,
but any links on your websiteneed to be clear
and very easy to understandthat they are in fact links.
When someone is looking at your website,is it obvious that they can click
that thing?
You might be too close to it,so ask a friend if they understand
how to navigate your website.
(05:14):
We want people to dig through our website.
Look at our services pages,get to our contact page
and fill out a formor head over to our blog.
We have to make this easy by making linkssuper clear.
Not only is this a great user experience,it also helps everyone,
no matter their abilities.
(05:38):
For action links where you're tellingsomething, somebody to go and do this
at the end of, say, a block of textor a section, make it a button,
and then keep that button style consistentthroughout your entire website.
This makes it so easy for people to knowthat they can click that thing
and it will help themmove thier website
(06:00):
and actually work with you.
Now if you want to link a bit of textin a paragraph, we call this a text link.
You need to make it a different color andadds in styling to its what stands out.
For instance, on my websitemy main font is black
and my links are blue and bolded.
(06:22):
You can also add an underlyingwhich is a very clear link indicator
or set a different styleso that when you hover over it, it's
also clear that it's something clickable.
Now you might want to might wonderwhat text do we actually link?
Because this does have an impacton our accessibility.
(06:44):
You don't want to link somethingsimple like click here
or learn more.
That doesn't say anythingto your dream client
about what they're going to getwhen they click that link.
So instead, use descriptive link text.
(07:04):
That can mean having a buttonthat answers an implied question
that you asked in the text above, i.e.
learn how which is better than learn more,or telling them that the page
they're going to go to.
So like seeour services, view our portfolio,
read testimonials in a text link.
(07:25):
It should reference where they'regoing to go and when they click that.
So you can either referencean article title or relevant extract
depending on what it is,or just link the most relevant
part of the sentence that matters.
Where are they going to end up?
Just please. Just don't ever link.
(07:45):
Click here.
Now, number three, color contrast.
Now, before you create any graphicsor update your website,
you need to think about color contrast.
Now, the combination of the font coloron top of the background color matters
a lot to someone who has low visionor colorblindness suit.
(08:09):
I have neither,and I still have a hard time
reading some graphicsthat I see all over social media
because the contrast is all way off.
So while you're designing,you think that a certain color like
this is just going to look really nice,this color combination,
before you actually put that outinto the world.
(08:31):
Run that through an accessibility tool.
First.
First, though, I love webcamscontrast checker.
It is freeand it is quick and easy to use.
Now, the one color combinationthat we are not initially
always seems to come back as a fail.
Never, never fails.
Look, this is going to feel likeyou're limiting your design,
(08:51):
but what you're doing is you're actuallymaking things better for everyone.
When you're a font colorand your background color
do not have a high enough contrast,not everybody is going to be able
to read it.
Some of that font is going to actuallylook like it disappears
to somebody who has colorblindness.
Now I am pretty sure that you do not wantto prevent people
(09:14):
from reading the copy on your website.
So use web aims toolbefore you start designing
anything before you ever go into Canadaand create a graphic for social media.
Check.
The hex codes are the font coloryou want to use
and with the background coloryou plan to use.
Just to make sure that's actually legible.
(09:35):
Now, some color combosthat I see all the time that are fails
are like white on a lighter blue.
We think it looks nice,but nobody can read it.
Red on pink or pink on red.
That's a tough one.
I see it a lot.
Yellow on basically. Any background?
All color combos.
I see.
These are things I see failall of the time.
(09:57):
What's happening for a lot of the peoplethat I see, especially on social media,
is you're uploadingwhat you think are great graphics.
Now I can actually read them.
Not only will checking your colorcontrasts
help improve your website's legibility,it'll also extend
to all of your marketing materialsif you follow a simple process.
(10:20):
Now, when we start working with clientsand we get brand information
and we create a color contrast guide,we test each color
combination and list outwhich hex codes work with each other.
That way, we're always choosing a safecombination down the line
that won't affect legibilityof your all too important copy.
(10:40):
Which number four?
You want to simplify your copy?
Now, this is coming from an English majorwho actually has a master's in literature,
who loves to writeand loves being creative.
But all too often we're creating contentthat not everyone can understand
and connect withbeyond the accessibility of our words.
(11:05):
Your dream client doesn'tlikely understand all of your technical
jargon anyway, and they want to be ableto skim your websites.
So what does simplified websitecopy look like?
It means shorter sentences, a paragraphs,simple vocabulary, bulleted lists
where applicable and even boldedimportant sections of paragraph.
(11:30):
It also means using your headline sizesappropriately so.
One each one per page.
Introduce new sectionswith a heading to you.
Want to make sure that people understandwhere are the thought changes as
they scroll down the page?
Now allof those things will help your website
copy to be read fasteror to be more easily read
by everyone who visits your website.
(11:56):
You want to aim for about a high schoolreading level,
so like they say about 11th grade, 10thor 11th grade, and focus on the outcomes
you're providing your clients,not the steps you're taking.
I mean, they don't really careabout the house anyway, just the what.
So you can use online toolslike grammarly or word contract
(12:17):
not to help you parrot on your writingand make it more succinct.
Full disclosure All of my blogsare improved through both of these tools.
They help catch my overly superfluouswriting.
Mostly.
Now number five, captions and transcripts.
(12:38):
Now, do you a podcastor do you upload YouTube videos?
I mean, like this podcastand YouTube video that you're
literally listening to right this second.
Do you put any of those on your website?
You need to include alternative optionsso anyone can access your content.
Now, if you're creating videoswith any kind of narration,
(13:00):
any kind of voiceover,you need to include captions ones
so that everyone can accessthe information in the video.
Now, thankfully, this has becomequite popular to provide captions.
Hall Saluja so many platforms haveautomatic captions
already built in Instagram and TikTok.
(13:20):
Tok used several options for captioning,including styles, which lets
you have a little bit of fun with it.
You can use apps like captions to makethem even more stylized and more unique.
YouTube is adding captionsautomatically now.
They just tell youit might not be there immediately
when the video is loaded,but they will do automatic captions.
(13:41):
Now, if you have longer form videos,I recommend some videos longer
than 30 seconds to a minute.
I recommend services like Bravoconbecause it'll help you create
captions that you can uploadto your YouTube or Vimeo videos.
They're going to be a little bitmore accurate.
You're able to edit them a littlemore easily before you upload them.
(14:04):
And it's especially usefulwhen you're creating videos for lead
magnets, online coursesor say, a welcome video for your website
so that, you know,the captions are spot on.
Now, if youhave just audio on your website,
you'll want to ensure that you also havesome kind of transcription option
available to.
(14:26):
My blogs are actually basictranscriptions of many of my podcast
episodes.
This allows me to reach everyoneand they can get value for my podcast
even if they can't listen to it.
All righty.
Now it's time to ensure that your websiteand the other content you're putting out
there are as inclusive as possible.
(14:50):
Now, as business owners, it is so easyto get overwhelmed with everything
that we need to know and do.
And the goal postsfeel like they move all of the time.
But now that you knowhow to be more inclusive,
it's time to put it into practice.
Now, before you go get overwhelmedand you think I can't possibly
(15:12):
do all these things.
Just know that somethinglike 0.02% of websites
on the internet are fully accessible.
That doesn't mean that you can makeit doesn't mean you can't make some
strides to make your own more accessibleand offer a better experience to than
many of your competitors are offering.
(15:33):
Right.
We want to be better than the peoplewho we are competing against,
even if that person is just ourselves.
Now, if you don't want to do that yourselfand you're overwhelmed
by everything that you're seeing here,even though these are things
that you can do consistentlyto keep your content accessible, I get it.
And if you don't know where to startwith your own website, I also get it.
(15:55):
My team and I actually offerfull website audits
where we test your websiteand give you the action plan,
but can also perform the remediationand make your website more accessible
with our website on it.
So it's time to investand a good experience for everyone,
(16:17):
and you can do that by clicking the linkbelow in the video description.
Now, thank you all for tuning in.
I'll see you again next week.
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.
iHeartRadio 24/7 News: The Latest
The latest news in 4 minutes updated every hour, every day.
Dateline NBC
Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations. Follow now to get the latest episodes of Dateline NBC completely free, or subscribe to Dateline Premium for ad-free listening and exclusive bonus content: DatelinePremium.com