How to Make Your Website More Accessible

September 5, 2019 By Ashley Orndorff, aka Marketing Geek people using various devices at a table

Can your users access your website?

This question is about more than people just being able to land on your website – it’s about whether everyone can access the content on your website, navigate it as easily as possible, and complete actions successfully.

That’s where website accessibility comes in. And, if you have questions, you’re not alone. Making sure your website is completely accessible to everyone is a process. It may take some time, but it doesn’t have to be complicated.

Knowing what web accessibility is and how to make your website more accessible is a good start.

What is Web Accessibility?

At its most basic definition, web accessibility is about making sure all users, regardless of their ability, can access, navigate, and use your website effectively.

According to the W3C (World Wide Web Consortium), web accessibility “means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.”

As Tim Berners-Lee, the W3C Director and inventor of the World Wide Web puts it, “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

For your website to be truly accessible, it needs to be designed and built in a way that removes barriers and ensures all of your visitors an use it.

How to Make Your Website More Accessible

When it comes to making your website more accessible, it’s all about making your content both available and understandable and your site functional. Here are several ways to make your website more accessible:

1. Use Standard Web Formats

Standard web formats are just that – standard. This means that they are widely used.

Additionally, they are updated to current accessibility standards. Because of that, they are also compatible with the standard versions of assistive technologies.

Using standard web formats where possible can go a long way in helping your website achieve and maintain accessibility standards.

2. Avoid Unnecessary JavaScript

JavaScript is one of the most popular client-side scripting languages. But, it can also cause accessibility issues when it’s used excessively or implemented incorrectly.

Too much JavaScript can also seriously slow down the load time of your website pages. And, because page speed is important to SEO and accessibility, it’s important to keep that in mind.

Also, it’s important for visitors to be able to interact with your site with JavaScript turned off. If you avoid relying on JavaScript for things on your website that don’t need it, you’ll also be able to avoid some unnecessary accessibility headaches.

3. Keep Mouse-Dependent Interaction to a Minimum

Another way to make your website more accessible is to keep mouse-dependent interaction to a minimum or to not use it at all. Interactions that are dependent on a mouse over or mouse click are accessibility issues for users who cannot use, or are not using, a mouse.

Mouse-dependent interactions cannot be the only method of triggering an action on your website. Interactions that are coded to respond to both mouse and keyboard commands are more accessible to users and allows them to navigate your site more effectively.

4. Avoid CSS or Stylistic Markup for Context or Meaning

Web design impacts content marketing, SEO, and more, and it also impacts website accessibility. When you are conveying context or meaning, avoid CSS or other stylistic markup. Text hidden in images, fancy font, different colors, or special styling to say something may not translate correctly through assistive technologies.

Instead, spell it out clearly and legibly. If you’re trying to promote a sale or say something important, you want to make sure all of your users get the message as intended.

5. Prioritize an Intuitive Navigation

Your navigation is how site visitors get around on your site. If you want to offer a good user experience, a good navigation is crucial. Your navigation should be intuitive – it should make sense and be easy to understand.

Use Analytics to your advantage to see how people navigate your current site. Also, get groups of testers together to go through your site. Have them take note of anything that trips them up. You can also use screen recordings, heat maps, click tracking tools, and more to see how people are using the site and where your current navigation may be causing unnecessary friction.

Getting an outside perspective is particularly helpful. After all, what seems intuitive for you may not be intuitive from a site visitor’s perspective. This will help you identify potential pitfalls in your navigation and help you improve it.

6. Pick Colors with a Higher Contrast

Approximately, 8% of males and 0.5% of females are color blind – that’s about 108 million web users and rising. And, that doesn’t even include people who are living with other vision impairments!

Choosing colors with the right contrasts can make your website content easier to see, navigate, and understand regardless of what colors your user can or can’t see.

A good rule of thumb is to make sure it looks good in grayscale.

Tagging or naming colors, especially when dealing with products, is essential. But, when it comes to distinguishing text or other elements on your site, you don’t want to rely just on color to make it stand out.

7. Make Sure URLs are Logical and Readable

For both people and for search engines, your URLs should read well and make sense. When you see a URL ending in something like /?284, can you tell from the URL what that page is about?

Neither can your users.

Although a screen reader, Braille display, or other assistive technology can read that URL, it’s not going to mean anything to your user. It’s not descriptive and provides no context for the content on that page.

And, if your users don’t get it, neither will search engine crawlers.

8. Identify the Language

Another way to make your website more accessible is to clearly and accurately identify the language of the page and content on the page. You can do this by using the lang (language) attribute properly.

Using the lang attribute to tag the language of your page and page content in your HTML offers several benefits including better accessibility.

Although the major search engines tend to use automatic language detection, they aren’t foolproof. Plus, using internal markup on your pages can help to improve the quality of your users’ search results based on their linguistic preferences.

Identifying the language of your content also help to improve the efficiency of translation tools, screen readers, Braille translators, and other assistive technologies. These applications need to be able to determine whether they can produce output from the text by staying in their current mode or by switching to a different language mode – the lang attribute can help them do that more efficiently.

9. Provide Multiple Ways of Finding Content

You want to make sure your content is as accessible as possible, which means providing multiple ways of finding it.

Users will be navigating your site in different ways and using several different types of assistive technologies. The best thing you can do is to offer several different methods or pathways for finding content like a site search, site map, table of contents, clear navigation, etc.

10. Use a Clear Heading Structure

Headings help define your content and provide a hierarchy on the page. This is why they are one of the most impactful webpage elements. Using clear headings is important and so is using a complete heading structure. This means that there are no empty headings on your page.

If it doesn’t make sense to use a bunch of headers, then don’t use a lot. Just make sure you’re not leaving empty header tags behind. These will mess with screen readers and other assistive technologies, which will potentially distort your user experience.

Besides, using a proper heading structure with an H1, H2s, and H3s or more if you need them is good on-page SEO. When done right, it can improve user engagement with your content and give your page a boost in the SERPs (search engine results pages).

11. Focus on Descriptive Labels

Clear, descriptive, and informative labels on your links and images can make a big difference in accessibility. Plus, when they’re done properly, they also help improve your on-page SEO.

Choose Descriptive Anchor Text for Your Links

“Click here” is not a good anchor text to use for your links – it’s not descriptive. Users can’t tell from the anchor text where they’re going or what type of content to expect when they get there.

Instead of being vague, use anchor text that provides context for where that link will take them. Not only does this improve your site’s accessibility, but it’s also better on-page SEO too.

Use Image Alt Tags Effectively

Be just as descriptive with the alt tags on your images. Alt tags allow both search engines and screen readers to “see” images. So, instead of trying to stuff keywords in the alt tag, which is a bad move for SEO anyway, use that space to accurately describe what the image portrays.

Not only are descriptive alt tags one of the tips for better image SEO, but they also improve the accessibility of your website content and improve the user experience. Your alt tags should allow someone who can’t see the images to understand what they are showing.

12. Define Abbreviations and Acronyms

How often have you seen a string of letters thrown together that are supposed to mean something, but you have no idea what it stands for?

Users on your website will have the same problem if you don’t define abbreviations or acronyms.

Even if you think the abbreviation or acronym is widely known, make sure you define it so everyone can easily understand what you’re saying.

You can do this by spelling out the abbreviation or acronym in parentheses following it and you can also use the abbreviation tag in your HTML. This allows you to define abbreviations and acronyms without needing to do so in parentheses every time.

13. Keep Your Text Legible

In order for your content to be understood, people need to be able to see and read it. Keeping your text legible and big enough to read easily is imperative to making sure people can access it.

In the U.S. alone, more than 8.1 million web users rely on a screen magnifier, screen reader, or other assistive technology to help them navigate the web with a vision impairment.

Choose a font that is simple and keeps the text on your site legible. That way, it is easy for screen readers or braille displays to “read” and it stays legible for users who are colorblind or who are using a screen magnifier. Typography trends can help you create a cool look, but they’re not useful if they make your site inaccessible instead of helping to make your website more accessible.

14. Have Clear, Informative Page Titles & Descriptions

Your page title and meta description make up the bulk of your website page’s listing in the search engine results. You want to make sure you are using these elements to clearly describe what a user can expect to find on a page once they click through to view it. This is an essential part of how to write meta descriptions.

These should be unique to each page. Not only does avoiding duplicate titles and descriptions and using descriptive language improve the accessibility of your website, but they’re also SEO best practices too.

15. Supply Other Ways to Access Audio

Videos are great interactive pieces of content for your website. But, not everyone can see or hear them properly.

Captioning your videos and providing transcripts helps. There are automatic services that can help you do this, but you will want to check them yourself or use a trusted service.

Automated services don’t always get transcripts or captions right. For the sake of your brand’s online reputation, you want to make sure what’s actually being said in the video comes across correctly in your captions and transcripts.

16. Keep Testing and Improving

Web accessibility is always improving as technology updates and processes improve. So, it’s important to test your site and then continuing to test and make changes in order to keep improving your website’s accessibility.

Besides, if you don’t test your site for accessibility, you may never know what’s wrong and you’ll never know if everything you did to make it more accessible made a difference.

Resources for Web Accessibility

Thankfully, there are a lot of resources available to help you learn more about web accessibility and to test for it.

Resources to Learn More and Stay Updated

These websites have plenty of information to help you learn more about web accessibility and to stay updated with changes:

Web Accessibility Testing Tools

A good way to test whether your site is accessible and to test changes you’ve made is to use it the way your users would. Granted, you should already be testing as a user across different devices. Now, you just need to add assistive technologies into your testing process.

Screen Readers

There are plenty of screen reading tools available, but not all of them are free. These are a few free screen readers to try:

Other Evaluation Tools

These are just a few other accessibility testing tools you can use for a variety of things. You can also check out the web accessibility evaluation tools list from W3C for a much larger list of tools for just about everything you would need.

With this information on how to make your website more accessible, you’re on your way to a more accessible web for everyone!

If it’s been a while since your last site redesign, it may be time for a refresh and an update, especially if your user experience is slacking. Contact us for a meeting of the MINDs to see how we can help get your website up to date and back on track!

View Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Are You Ready To Do More with Mind?

Click the link below to get started!

Work With Mind