- According to the World Health Organization,
an estimated 1.3 billion people, one in six worldwide,
experience significant disability.
And that is one of the main reasons website accessibility
is so important.
You want every visitor to have a great experience
on your site, right?
This isn't a Dora the Explorer moment
where you shut out "Yes."
I'm gonna take that as a rhetorical
and assume that you want that to be the case.
The good news. Website accessibility is easy to get right.
So you can make huge improvements fast.
Especially if you've got a few resources at your fingertips.
What's up? It's Jamal from HubSpot.
And in this video, I'm gonna tell you the what, why,
and how of website accessibility,
including six tips for improving yours super quickly.
And maybe best of all,
I'll point you to two amazing, free resources
to guide you on the path to the friendliest, openest,
most successful website in your market.
Not just one, but two resources.
Yeah, we literally just giving away value at this point.
So let's jump in.
So first things first, what, pardon of my language here,
the heck is website accessibility.
Well, I'm glad you asked me.
Website accessibility
is really all about giving your website visitors
the best possible user experience.
Making sure your site is open,
welcoming, and accessible for everyone.
That includes people with visual, motor, auditory,
speech, or cognitive disabilities.
But here's the thing,
and if you only take away one thing from this video,
I hope it's this.
Improving your website accessibility
improves the user experience for every visitor.
So it improves your overall website performance.
The better your accessibility, the better your website.
Which brings us to the why of website accessibility.
The main benefit of improving your web accessibility
is that it makes your website way, way better.
Think about it.
You invested a lot into creating, designing,
and building your site,
and you spend even more on marketing
to get people to visit it.
Well, everything you can do to optimize
that web experience makes all that investment pay off.
It's just good business.
Better accessibility means better SEO, more traffic,
higher conversion rates, and faster performance,
which Google loves.
It's a virtuous circle.
Accessibility pays off over and over again.
The other reason to raise your web accessibility game.
It's just the right thing to do and it's the law.
The American Disabilities Act says
that a business must be "easy to approach, enter, operate,
participate in, and use safely and with dignity
by a person with a disability."
So this isn't optional.
Accessibility is non-negotiable when it comes to websites.
Is that a burden? Absolutely not.
It's great for your business,
it's way easier than you think,
and it doesn't have to be more expensive
than a less accessible site.
So let's get into the how with our six tips
for web accessibility.
Tip number one, use image alt text. Don't worry.
Sounds super technical,
but it's actually pretty straightforward.
Alt text is simply the words you use to describe an image
on a webpage.
It tells web browsers and search spiders and screen readers
what's in the image.
Making it searchable, findable, and you guessed it,
accessible to every visitor.
Even the ones with visual impairments.
In your alt text, you want to use simple words
to describe what's meaningful about the image.
So if the image is a car,
your alt text might say "About the product.
Silver 2.0 liter convertible Ford.
Manual transmission, 18-inch alloy wheels."
Or something like that.
You don't wanna be redundant.
Don't just repeat what's already on the page.
Alt text is an opportunity to add value.
And if the image doesn't carry any meaningful content,
don't use alt text.
You'll just be wasting the user's time.
Only add alt text to images that move the user
through the journey that means something.
Pretty easy.
But you'd be surprised how many important images
on company websites actually don't end up
having any alt text.
So they might as well not be there for many users,
which is a real waste.
If your website has lots of images that are important
to understanding your site,
you want to get good at alt text.
We've made an excellent video on writing alt text
for images that we'll link to in the description below.
Tip number two, use colors thoughtfully.
This is so important, but so many websites overlook it.
The World Health Organization estimates
that there are 2.2 billion people
with moderate to severe vision impairment.
And millions more may not have impaired vision,
but are using older computers or low quality screens.
That means the colors you choose for your website
and how you use them are super important.
Especially when it comes to text and backgrounds.
There are two main things to think about.
Color contrast and color blindness.
For example, this might look like a hot pink sweater to you,
but to those with colorblindness,
it looks like boyfriend material.
My DMs are closed.
For color contrast,
you need to be able to find out about your contrast ratios.
Luckily, there are lots of resources online
like the Color Contrast Checker on colors.com.
Coolers, colors.
So make sure the text and background you want to use
will be legible.
There are also plugins for the design tools
that your designers use
to help them measure color accessibility.
The principle is very simple.
You need high contrast
between your text color and its background.
Light gray on dark gray.
Mm yeah, not so good.
Check out the HubSpot website. Dark text, white background.
Even if you didn't know how to read, you'd be like,
"Wow, that sure are some, those are some letters
and I can tell that they're letters."
But what about color blindness?
Well, research shows that 3.7% of Americans are color blind.
That's 12 million people in the US alone.
If you want them to have a great experience on your website,
think about the way that you use colors.
If you're using color text or symbols,
say a green check mark or red X,
think about backgrounds that will still allow the symbols
to be visible to everyone.
And avoid relying only on color to indicate meaning.
Use text indicators to support your symbols.
Tip number three, consider text size and style.
The principle is very simple.
You want as many people as possible
to be able to read your text.
That means your fonts can't be too small
or too low contrast.
Here it's about solid design principles.
Like clear, consistent type styles with a clear hierarchy.
Put important microcopy above your buttons
and use meaningful texts for CTAs.
Like "Click here to download the report," not just "More."
When you think about accessibility from the start,
you make good choices.
So when you're designing your webpages,
don't just think, "Hey, that looks cool."
Think "Hey, will this be accessible to everyone?"
Tip number four, use your markups well.
We all use the hierarchy of type on a page
to give us a sense of what's important,
to allow us to scan the page and get the meaning.
Well, visually impaired people use screen readers
to read out your site.
So the idea of hierarchy is even more important.
And for hierarchy, we use markups.
H1, H2, H3, titles, subtitles, and paragraph styles
to help readers understand the structure
and order of the content.
Use markup well and your users will be able to listen
to a list of headings and jump straight
to the right content.
Muah, beautiful. Fantastic. Excellent work.
All right, tip number five,
make your site easy to navigate by keyboard.
Remember, not everyone uses a mouse.
In fact, some of us are controlled by a little mouse
on our head pulling, pulling our hair, and that's how we,
that's how I'm recording this video right now.
He gets hungry up there.
So be sure to drop a little cheese nugget in the comments.
That means your site should be easily navigated
using only the keyboard,
and that means paying attention
to a thing called focus states.
Focus states indicate when something has been selected
by hover states, underlining, or highlighting.
This is really simple,
but only if your designer is actually thinking about it.
So make sure that they do.
If I can't actually purchase your product on your site,
I don't think your sales team
or your CFO are gonna be pleased as punch about that.
You know what I'm saying? Finally, tip number six.
Be accessible to hearing impaired people.
You might not know this,
but about 15% of adult Americans
have some level of hearing impairment.
That means you can't rely on audio only.
Use captioning for all videos on your site.
Offer transcripts, podcast episodes, and webinars.
And make sure the key steps in your web journey
aren't reliant on audio alone.
All right, let's step back.
Are you noticing a pattern yet?
All these tips are basically just examples
of good UX principles and an inclusive mindset.
So really it's just empathetic marketing,
knowing your audience.
Things like gender neutral language,
sensitivity to your whole audience, not just a part of it.
Taking the time to include everyone
and making that a priority.
And of course, testing like crazy
with a truly diverse audience of testers.
Web accessibility is an optimization journey.
Making your website better and better
by including more and more people.
So I hope I've convinced you
about the importance of web accessibility
and showed you it's not hard to improve yours.
You just have to want your site to be a great experience
for the greatest number of visitors, for everyone.
And then get to work.
So the two resources that I told you about
at the top of this video.
The first is Web Accessibility: The Ultimate Guide.
It's packed with everything,
literally everything you need to make your site accessible
to every visitor and to make the business case
for accessibility in your company.
We've also created a Web Accessibility Checklist for you.
The checklist makes it easy to make sure your webpages
and digital experiences are accessible
before you press publish.
How cool is that?
Links to the Ultimate Guide and the Checklist
are down in the description.
So that's pretty much the ins and outs of web accessibility.
Now, if you'll excuse me,
I'm gonna go make myself accessible to my kitchen
'cause I'm making some cookies
and they're about to be accessible to my tummy.
You know what I'm saying?
Until then, I'll see you next time.
- I can't find this client info.
- Have you heard of HubSpot?
HubSpot is a CRM platform
so it shares its data across every application.
Every team can stay aligned.
No out-of-sync spreadsheets or dueling databases.
HubSpot. Grow better.
(upbeat music)