Tips To Make Your Website Accessible To Everyone

As a website owner, you will want to attract as many visitors as possible. However, not everyone follows the guides necessary to ensure their website can be used by everyone.

Web accessibility is one of the most overlooked aspects of designing a website that we often brush off. There are millions of users out there who rely on websites being accessible, and if you don’t make your website accessible to them, you will be missing out on a lot of users.

With that, we can say Web accessibility is the art of making your website accessible and usable by everyone on the internet regardless of their condition. This includes people with disabilities like vision impairment, physical disabilities, cognitive disabilities and sometimes even the aged ones.

There’s a misunderstanding that web accessibility requires sacrifices to beautiful designs, or that it’s not worth the effort and time. The good news here is, accessibility isn’t difficult to implement on an existing or a new website.

All you need is to understand the underlying issues that can make a site hard or impossible to use by certain people. Once you were able to identify them, you can follow steps to avoid those mistakes and make your site accessible to all visitors.

Most web accessibility guidelines already go hand-in-hand with website development practices. In my previous article, I gave a thorough explanation of what web accessibility is and how to accomplish it following basic steps. In this article, I will outline the most important accessibility guidelines and show you how to implement them on your website easily.

Let's get started.

Choose The Right Content Management System With Support For Accessibility

The first thing we need to talk about is using the right Content Management System (CMS) to power your websites and its content. This goes a very long way when making an accessible website.

There are many content management systems available out there to help you build your website and make it accessible. The most popular opensource examples include Wordpress, Drupal, and Joomla. Then we have the likes on Squarespace, Blogger (a lot of people still use it), Wix and also headless CMSes like Contentful and so on.

Most of this platform is built with accessibility in mind as they focus to help get your online presence fast and smooth to users online. Using a CMS really helps reduce the time and effort you will be spending making your website accessible as it’s already built-in so you can focus on the main thing which is content.

Ensure Your Website is Keyboard Accessible

This is one of the most important guidelines as most users are used to exploring the web just using the Keyboard as it saves a lot of mouse clicks. For a website to be accessible, you must be able to use it without the use of a mouse. Most users with mobility disabilities, including repetitive stress injuries, may not be able to use a mouse or trackpad and many assistive technologies rely on keyboard-only navigation.

You must ensure your website is keyboard accessible since these users are able to access your website content through the use of a keyboard by pressing the “tab” or “arrow” keys, or through the use of alternative input devices such as single-switch input or mouth stick.

In order to give your users a smooth experience:

1. You will want to make sure their tab order is the same as the visual order that is the order it is displayed. This will make it easy for them to use the tab key to jump between different areas of a page, such as links, buttons, and forms.
2. You will want to make sure you didn't clean off the keyboard focus display of elements as this is used to let the user know the current element they are on.
3. Long pages with lots of content should be broken up with anchor links (jump lists), allowing keyboard-only users to skip to relevant parts of the page without having to go through other content. “Skip to main content” should be provided at the top of each page, so keyboard-only users won’t have to tab through the page navigation in order to get the main content and save them time.

All Images Should Have Alt Text (Alternative Text)

This is a very crucial guide you need to adhere to if you will be using images on your website. All images that appears on your website should have an alt text as this serve as text replacement when the image fails to load and also helps give more information about the image with users with vision impairment while using assistive technology like screen readers.

If you are using a CMS like Wordpress, it's actually very easy to add alt text to images while uploading them. The alt attribute on the <img/> tag is basically used to describe an image and by default, most CMS adds it there. It's very useful for SEO if you are writing good descriptive summaries of each image with hot keywords as it can be easily crawled by image search engines.

To implement the alt text in pure HTML, you can see the use case below:

<img src ='theimagesourcelocation' alt=”this is where your image description goes”>

If an image is purely used for decoration only and it does not serve as a piece of crucial information then you can leave the alt attribute out or empty so that the screen reader user is not distracted from the more important content on the page.

Use Your Headings Correctly

Using the headings tag correctly can help structure your content in the right order for users. This makes your website content easier to understand, improves the flow and also easier for screen readers to follow and interpret the content. Screen reader users can use the heading structure to navigate content easily.

By using heading tags (<h1>, <h2>,….,<h6>) correctly, screen readers can easily understand the flow of your website content. Ensure you are not using the CSS properties to make a heading as this will not be interpreted by screen readers and end up confusing users.

When working with headings, you might want to follow the guide below:

1. The use of <h1> tag as the page title, only used as the page title and once on a page
2. The use of <h2> as content subheadings, then followed by h3 and so on.
3. Ensure you follow the order of the heading as this might confuse screen readers.

Choose Your Website Colors Carefully

When building an accessible site, you must take colors in mind carefully as this will have a lot of impact on users especially the ones with visual disabilities.

Up to one in twelve people have issues with the eye, it could be color blindness, color-challenged or color deficiency. Regardless, it all boils down how colors are being interpreted and perceived by different users with unique ways as not everyone sees the same thing. You will want to ensure the colors on your website especially essential element can be easily discovered and distinguished by anyone regardless of their eyes.

Always make sure essential text stands out against their background. Make sure you have a good contrast of colors on your site so that elements are distinguishable. Use higher color contrasts between the text and background and try using more white space and borders to separate blocks of content. While ensuring the text on your web page easy to read, avoid making it too bright since this can also lead to eye fatigue. Avoid clashing colors that could cause eye strain.

Design Accessible Forms

When form fields are not labeled appropriately, the screen reader user does not have the same cues available as the sighted user. It may be impossible to tell what type of content should be entered into a form field.

Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person’s name, it should be labeled appropriately as either “Full Name” or have two separate fields labeled as “First Name” and “Last Name.” Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.

As you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to the “Submit” button, or they may not even realize that additional fields exist. Essentially, the tab order should follow the visual order.

If you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields like “Full Name” and “Date of Birth” could be grouped together as “Personal Information.” This type of form organization can help a screen reader user keep track of progress, and can provide the context that might be lost while filling out the form.

Forms are a useful addition to most sites but must be designed carefully. What’s most important is to ensure that each field is clearly labeled. You should also aim to place the labels adjacent to the respective fields. While a sighted user can easily match a label to the corresponding field or option, this may not be obvious for someone using a screen reader.

You should also aim to provide instructions and information in a clear way that the user can easily understand. To create accessible forms in WordPress, you can use a tool like the Caldera Forms builder. This is a plugin specifically focused on accessibility, which will make your job much easier.

Using Tables The Right Way

When it comes to displaying data, tables are handy. They make it much easier for all users, including those using assistive technology, to parse a large amount of data. To get the maximum benefit, however, you’ll want to keep your tables as simple as you can.

In addition, it’s best to avoid using tables for anything but tabular data. For example, you should never use a table for layouts, lists, or anything else. This can be confusing to screen readers and similar devices.

If you do need to create more complex tables, you can follow this guide from W3. It shows you how to code a table while maintaining accessibility standards.

Using tables for page layout adds additional verbosity to screen reader users. Whenever a screen reader encounters a table, the user is informed that there is a table with “x” number of columns and rows, which distracts from the content. Also, the content may be read in an order that does not match the visual order of the page. Do not create the layout of a website using a table; instead, use CSS for presentation.

When a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a bank statement), use headers for rows and columns, which helps explain the relationships of cells. Complex tables may have several cells within the table that have a unique relationship to each other, and these should be identified by using the “scope” attribute in HTML. Table captions (HTML5) can be used to give additional information to users about how best to read and understand the table relationships

Make Content Accessible By Following The ARIA Guidelines

When content updates dynamically (i.e. without a page refresh), screen readers may not be aware. This includes screen overlays, lightboxes, in-page updates, popups, and modal dialogs. Keyboard-only users may be trapped in page overlays. Magnification software users might be zoomed in on the wrong section of the page.

These functions can easily be made accessible. Options include ARIA roles and alerts, as well as front-end development frameworks that specifically support accessibility.

Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard. Additionally, all videos must have options for closed captioning and transcripts for the hearing-impaired.

If your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard. If you are using any unique widgets (such as a calendar picker or drag-and-drops), be sure to test for accessibility.

In addition to making your site keyboard-friendly, you also need to ensure that all content on the page is actually accessible. While this is usually not a problem, it can be an issue when a page contains dynamic content.

In short, content is dynamic if it can change without the page it’s on reloading. This can become a problem if the site doesn’t inform assistive tools of the change. For example, many screen readers will only ‘read’ the site as it appears when it first loads. As such, you need to make it aware when something shifts or the user will miss the new content.

One way you can do this is by using ARIA landmarks. These are tags you add to the content in order to clearly define it on the page. You can tag dynamic content as a ‘live region,’ which enables screen readers and similar devices to understand the content as it changes.

ARIA is also useful for making navigation more straightforward as it lets users skip directly to specific content. This way, they won’t have to tab through every menu item just to get to your main content and can easily pass over other link-heavy sections. The same effect can be achieved using skip-to-main links, which are invisible links that let users skip menus. However, ARIA tends to be more flexible and efficient.

The Make WordPress Accessible handbook contains a section on ARIA landmarks that you may want to check out. It’s also worth noting that all WordPress themes with the accessibility-ready tag will have ARIA landmarks added by default.

Web Accessible Tools

Here are some online website accessibility checking tools that you can use to check and validate your website’s compliance with accessibility:

1. Accessibe: This is a web accessibility tool powered by AI. It helps you correct and makes your website adhere to all the web accessibilities guides quickly without coding.
2. Axe: Axe is the World’s most popular accessibility testing toolkit built on the World’s most popular accessibility rules library.
3. A11Y Compliance Platform by Bureau of Internet Accessibility
4. Accessibility Checklist by Elsevier
5. Accessibility Developer Tools by Google Accessibility
6. ColorTester by Alfasado Inc.