Top 10 Tips for Making Your Website Accessible

Back in the 1970s, a report from the World Health Organization revealed 10% of the world population lived with some type of disability. The same research today sees the number rising to 15%. This includes:

466 million people with deafness and hearing loss.

1.3 billion blind or visually impaired.

2-3% of the world population with cognitive disabilities.

Those are some gloomy facts that nobody likes to hear.

I know I don’t but alas, I’m part of these statistics as well (blind with one eye and 25% impairment on the other).

This is why I found the topic “Tips for Making Your Website Accessible” particularly important to include on Hosting Tribunal.

[bctt tweet=”Accessibility is not only a matter of catering for the disabled. It is about making the Internet free and usable for everyone. ” username=””]

After all, it’s the whole point of its existence.

Optimizing your site for different screens and electronic devices has become a common practice in website building. That’s a good first step. But you can do so much more…

Today we’re going to dive a little deeper and learn how to make a website accessible to everyone, whether they are using a screen reader, voice recognition tech, or other assistive devices. But first, let’s cover the basics.

What is Web Accessibility?

Simply put, online accessibility is the art of making your website available and usable for everyone. This includes people with vision or hearing impairment, cognitive problems, physical disabilities, and even the elderly. This broad audience makes use of assistive technology like web screen readers, speech recognition devices, Braille terminals, or alternative keyboards to surf the Web

All good then, surely every new page that goes online addresses the needs of such a larger audience, right?

Wrong!

As a matter of fact, a whopping 70% of websites do not meet the basic principles outlined in the Web Content Accessibility Guidelines (WCAG). To be fair, those standards were set in February 2017, not so long ago. But that should not act as an excuse to neglect the needs of people who already have it hard enough.

Why Website Accessibility?

From a moral and ethical point of view, there should be no argument against optimizing your site so that everyone can reach it. I think that is abundantly clear. But even if you look at things from a business perspective, there is still a lot to gain from site accessibility.

Here’s the good news:

Optimizing your company page for maximum availability does not take a lot of effort, and brings a ton of tangible and intangible benefits like:

– Enhancing your brand reputation

– Improving customer experience

– Extending your market share

– Reducing legal risk

– Employing innovative tech

Those opportunities are just too good to pass by.

Today I’m going to let you in on the top 10 tips for making your website accessible and, hopefully, you too can make a positive change.

1. Choose a Site-Building Platform that Supports Accessibility

The rapid evolution of open-source systems has ensured they are versatile enough to meet the web availability guidelines. WordPress, as the most popular CMS out there, is (unsurprisingly) well-prepared for the task. However, other market competitors, like Joomla and Drupal, are doing an excellent job as well.

In contrast, popular closed-source platforms like Squarespace and Blogger offer significantly less in terms of accessibility. The developers of these tools focus on an entirely different audience, and optimizing pages for people with disabilities seems low on their list of priorities.

Keeping things on track, let’s take a closer look solely at the platforms that are in sync with the latest security standards.

The WordPress community plays an active role in the development and improvement of WP add-ons. How to implement web accessibility is a growing concern for them, and it certainly shows by all the new plugins and themes that are well-equipped for the task. WordPress also employs a separate “Accessibility Team” which assists devs when they’re working on core updates.

Talk about commitment!

Joomla was the King of CMSs before WordPress took the reigns. And it’s not because Joomla deteriorated – it’s just that WP was evolving so rapidly it was impossible to keep up with its tempo. Still, the second most popular content management system is well-versed when it comes to accessibility modifications. You can easily implement accessible code for essential elements and theme optimizations. Just ensure the template core is susceptible to such changes, and you are good to go.

Drupal usually caters to a more tech-friendly audience, but that doesn’t mean accessibility takes a back seat. The web-building app is fully WCAG 2.0 compliant and offers extensive documentation on implementing those standards. The latest Drupal 8 core update took things a step further by adding improvements to the HTML5 and ARIA markups (I’ll tell you more about those further down).

Any of the three platforms is perfectly suitable to start with, but what about all the webmasters that already manage a site? Don’t worry, guys, I haven’t forgotten about you lot. Here are a few tools that let you check how accessible your website is right now:

  • WAVE (Website Accessibility Evaluation Tool) — developed by the WebAIM organization. Includes online checker and Mozilla/Chrome extensions.
  • SortSite — runs your website through the WCAG 2.0 guidelines and prioritizes the possible issues. Available as a desktop or web application.
  • A11Y Compliance — developed by the Bureau for Internet Accessibility, this one covers all the latest standards, including section 508 of the Americans with Disabilities Act (ADA). Supports the common site markups like CSS, HTML, XHTML, SVG, PDF, and more.

2. Use Semantic Markup

When you are writing for a broad audience, you should always keep readability in mind, ensuring the text flows well and carries a clear meaning. The same thing goes “behind the scenes,” so to speak. Properly marking your essential content elements is crucial when it comes to making them understandable for readers that cannot rely on visual cues.

Luckily, HTML5 gives you all the solutions for optimizing your object labels. Let’s check out the key semantic markup and how it helps our content become more readable:

  • <section> — defines a new section in the content. Usually starts with a new heading.
  • <article> — signifies new, independent content that you can read separately from the rest of the site.
  • <header> — indicates a new header.
  • <h1, h2…h6> — outlines the headings. The main title should be the single H1 tag. The subheadings should carry the H2-H6 tags, depending on your content structure.
  • <table> — points out a table within the content.
  • <form> — indicates a form.
  • <nav> — defines navigational links.
  • <footer> — specifies the footer of the page.

Mastering the use of HTML semantic markup is one of the most successful techniques to increase accessibility of web pages.

Keep in mind not all attributes are self-explanatory. The <div> or <span> elements, for example, don’t carry any clear meaning, so you might need to include a more definitive class name to define their content.

You can follow this guide by W3Schools to learn more about HTML5 markup.

3. Adopt Keyboard-Friendly Layout and Navigation

We are so used to exploring the Web with the help of our trusted keyboard and mouse that we cannot imagine our online experience without them.

Well, for the millions of people with motor skill difficulties out there, this is the reality they are facing every day. Traumatic injuries, diseases, congenital conditions — there are countless reasons why one would be unable to take full advantage of the underlying computer hardware.

People with physical and cognitive disabilities often utilize assistive technology when going online. This might include:

– Adaptive keyboards

– Speech recognition software

– Screen readers

– Mouth sticks

– Head wands

– Trackball mouse

For many, such assistive tech is the only way to use a computer or be a part of the Web. But even the most advanced solutions prove pointless for the impaired if the site they landed on is not optimized to accommodate them.

Web Accessibility Tips

Simple actions can do wonders. Like ensuring your entire website is keyboard-friendly, for starters.

This means the visitor should be able to access all essential objects on the page solely by using the keyboard (usually with the <tab> key). Define your anchored links, outline focused elements, and ensure your in-page interactions are represented by buttons.

Imagine your mouse didn’t have a pointer. Impossible to use it properly, right?

Same thing happens if you don’t have a visual indicator when tabbing along your page elements (like a dotted outline or a blue box).

Many webmasters prefer to remove this indicator by default, as they believe it’s unnecessary and an eyesore. I’m sure the millions of people with motor difficulties would disagree.

In 2018, a BBC News reporter compiled an intriguing case study when he tried to browse the Web for 24 hours with only a keyboard.

4. Follow ARIA Good Practices

ARIA stands for Accessible Rich Internet Applications and outlines a set of guidelines on how to make a website accessible for people who use assistive technology.

These good practices are particularly helpful when it comes to serving dynamic content and defining user interface controls developed with Javascript, Ajax, HTML, and others.

Let’s say I have a time-based event on my website. The content is dynamic and changes as time passes. I can tell that by looking at the page, but what if I can’t rely on my sight?

Screen readers and other assisting devices can’t interact with these elements by default. ARIA guidelines address these reachability challenges and define methods to optimize compatibility with such technology.

For a full summary of the WAI-ARIA guide, you can follow this link.

5. Use Alt Text on Images

I’ve raised point about the importance of alt text for your website optimization before. Search engine robots do not “read” visuals; instead, they rely on the alternative text (or alt text) to tell them what they contain.

While most Google searches are web searches, you can also find results for images, video, documents, and other media types. Without a well-defined alt text, your photos will be practically invisible for the crawlers. It complements your textual content and allows your site to rank in image searches as well.

That’s all fine and dandy, but there is another benefit you probably haven’t considered before.

Just as the web crawlers, screen readers and other similar technologies also appreciate when your visual content is labeled correctly.

If you are a WordPress user, then you already have most of the work cut out for you. Once you upload a new image in the media gallery, you’ll see the empty field where you can fill in the alt text.

It’s not so straightforward to do this with Joomla or with Drupal, but luckily there are comprehensive tutorials and plugins to back you up.

So, the next time you upload an image to your page or article, take a moment to fill out the alt text field. These few seconds can make all the difference for someone else.

6. Avoid Tables and Complex Layouts

Tables offer a very effective way to present data to our readers in a clear and comprehensive manner Back in the early days of the Web, they even used to often function as a framework for our web layout.

[bctt tweet=”Old habits might die hard, but make sure to bury the habit of overusing tables once and for all. ” username=””]

Should you use a table to display a list? No.

How about a layout? Forget about it.

Maybe a step-by-step instruction? Absolutely not.

Navigating through a grid with a keyboard-only setup is hard enough, but the task becomes even more burdensome if you are using a screen reader. The web page reader interprets data one cell at a time, and it’s easy to get lost and confused, especially with complicated and descriptive tables.

Look, I get it.

Tables can prove indispensable, especially when it comes to depicting bulk statistical information. I’m just suggesting you utilize them only when absolutely necessary, and even then — make sure everything is in sync with the accessibility standards.

Same goes for your layout. Don’t discourage people with blindness and visual impairment from checking your content just because your menus, text, and links are impossible to navigate.

Make them readable! Ensure your layout elements are neatly structured, properly labeled, and easily identifiable. The web accessibility of so many people depends on what you do (or don’t do) behind the scenes.

7. Choose Colors Carefully

Color psychology is a favorite topic of mine. I’ve had a strange fascination with the effect of colors on our emotions for years now. In fact, I’ll probably prepare something extensive on the topic pretty soon. But don’t let me get carried away…
You might be easily fascinated with blue layouts, or perhaps green is more the color of your choice. At the end of the day, there are certain recommended practices and tips for making your website accessible that go way beyond the scope of personal preference.

  • avoid bright colors — too much intensity in the colors of your layout not only decreases readability but is also dangerous for people with higher photosensitivity.
  • keep a clear contrast — people with color blindness can find your content very hard to read if the colors are too similar. You can check your current contrast ratio with the WebAIM tool. A ratio of 5:1 for standard text and 3:1 should work perfectly well for most readers.

Tips for Website Accessibility - Contrast

  • ensure your essential elements are not color reliant — take a toggle button for example. Its functionality is clear with or without any color, and the same should go for all your key website components.

All the popular CMS applications let you refine your color scheme in depth. For some bright examples of how a clear design layout should look like, you can check the top ten websites of the Web.

8. Utilize Video & Audio Captions

Go ahead and play a random video on YouTube. I’ll wait.

Now mute the sound.

Can you make up what is going on?

No? Understandably so.

[bctt tweet=”A whopping 41% of videos are incomprehensible with the sound off. ” username=””]

Captioning your audiovisual content is beneficial for a number of reasons. You might think only people with hearing impairment have something to gain from captions, but the reality couldn’t be further from the truth.

80% of people who prefer reading subtitles have no hearing disabilities.

Captions help viewers focus, enrich their vocabulary, and better understand the language. And in a classic telemarketing manner, I can tell you “buuuuuuuuut wait — there’s more!”

Imagine scrolling down your Facebook newsfeed, and each time you pass by a video, it plays automatically with the sound on. Annoying, isn’t it? What if you want to have a sneak peek at your phone while you’re in the library and the banging noise attracts all eyes on you?

Regardless of the surrounding environment, transcripts provide an easy workaround for pushing multimedia content without putting off your visitors.

9. Design Forms with Accessibility in Mind

Forms are another one of those website elements where webmasters rarely consider accessibility as a top priority. Especially nowadays, when using placeholder text is so trendy. I am talking about forms like this:

Web Accessibility - Forms

Navigating through the tabs is a breeze when you see the instructions inside, but what if you couldn’t? The same form would deliver only empty fields if the visitor is browsing the page with a screen reader. Not to mention all the people who need to take their time when working on a computer — sure is bothersome to be filling something out and losing your train of thought.

You need to ensure each field is properly labeled and the labels are adjacent to their respective boxes. Should you need to include extra instructions for the recipients — do it outside the fields instead of using placeholder text.

Same goes for error messages — outlining clear instructions when the user fills out a box incorrectly is a must.

Neatly labeled and comprehensive forms are just another one of those web accessibility examples where something seemingly insignificant can make a huge difference.

Still wondering about the proper way to design an accessible form? The whole process is outlined in this tutorial.

10. Skipping Navigational Links

We have already established that links, just as other essential page elements, need to be carefully optimized to be accessible by everyone. There is more to it, though.

Websites, where navigational links are in abundance (like online shops), can be a nightmare to navigate with a screen reader or keyboard-only setup.

Imagine just ten categories with ten subcategories each, showcasing thousands of products. And you have to <tab> through each and every field to get to the end of the page.

Just thinking about it makes me dizzy…

Skipping navigational links is one of those website accessibility features that rarely come to mind, but is actually quite easy to implement.

The concept is rather simple — you place one main link on the top of the page, which redirects the user only to the important anchor links below. This way your visitor skips unnecessary information and jumps straight to the good stuff.

There is more than one way to skin a cat, and the same goes for optimizing your navigational links. Check out some of the best tips in this practical guide.

Wrapping Up

Freedom is one of the founding principles of the internet, and Accessibility is one of the most powerful tools supporting that goal. Now you too can make a positive impact and play an active part in this noble quest for online autonomy.

People with disabilities already have it hard enough. So it’s very disheartening to hear that

[bctt tweet=”71% of disabled people leave a webpage immediately if it’s not optimized for accessibility.” username=””]

That’s 71% out of hundreds of millions!

It takes so little effort to open the gates of your website wide open and let everyone in. You already have the key — go ahead and use it!

FAQ

What are the four major categories of accessibility?

You can classify accessibility features according to the disability types they serve:

– Visual — partial or full blindness, color blindness, low and impaired vision.

– Hearing — deafness and partial hearing loss

– Cognitive — learning disabilities, loss of focus, memory loss.

– Physical — limited motor functions, traumatic and congenital conditions.

What is W3C accessibility?

The World Wide Web Consortium (W3C) defines online accessibility as a set of “strategies, standards, and supporting resources to help you make the Web more accessible to people with disabilities.”

What is Accessibility API?

Accessibility APIs established their presence in the late ‘90s as a way of passing valuable information to assistive technologies. The API “reads” the website elements and “translates” them in a comprehensive code that can be interpreted by such devices. This includes information about the name, role, and state of the object.

Can I modify CSS to improve site reachability?

CSS customizations are a prime mention when it comes to tips for making your website accessible. We’ve even outlined some of them in this article. That was only scratching the service, though, as you can do a ton of practical things while tinkering with the CSS:

– Improve text readability

– Hide unnecessary content

– Establish navigational order

– Give focus to key site elements

– Optimize document structure

Leave a Reply

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