How to Make a Website More Accessible - Points for Better Accessibility
Posted in: Accessibility, Ideas, SEO, Themes, WordPress

How to Make a Website More Accessible – Points for Better Accessibility

When creating a website, it’s a good idea to design it in a way that makes it more accessible. The goal of web accessibility is to create a website that is usable by everyone, including people with disabilities.

Millions of users rely on websites to be accessible. If you do not consider their needs, they will be unable to use your website. Also, the accessibility of your website has a great impact on SEO, bounce rate, etc.

The following article lists some important points for better web accessibility to make your website more accessible.

Sufficient Color Contrast for Accessibility

The text color and background color combinations with low contrast can be a problem for people with color vision deficiency such as color blindness or low vision.

These users can include elderly people with low sensitivity to color contrast from aging, as well as people who have reading disabilities.

There are many tools to check color contrast ratio such as:

So, it is better for the accessibility of a website to carefully consider the usage of colors and their combinations with appropriate color contrast ratio.

Keyboard Navigation and Visible Focus State

For visually impaired and blind users, using a mouse to navigate a website can be difficult or nearly impossible. So, they use a keyboard to navigate a website.

Therefore, keyboard navigation is one the most important point of web accessibility.

Supporting keyboard navigation for a website means all the interactive elements of your website must be accessible with a keyboard. For example, using a Tab key, Shift + Tab keys, Esc key, Enter key, and the arrow keys, etc.

All the interactive elements like links, navigation menus, dropdown menus, and sub-menus, forms, input fields, modals, etc. must be accessible by using just a keyboard. For example, users should be able to access a dropdown submenu by using just a keyboard.

Keyboard users make use of the Tab key to navigate the website. When they go to the element, there must be a visible focus indicator that shows them the element they are currently on.

Therefore, it is important to provide a visible and distinct keyboard focus indicator on all the interactive elements. Generally, such elements have an outline on focus.

This is one of the accessibility mistakes to remove the focus state like an outline of the interactive elements. So, always make sure to provide a visible focus state for keyboard users to improve your website accessibility.

When you select a theme or template of your website, make sure it offers keyboard navigation and a visible focus state for interactive elements. These WordPress themes provide keyboard navigation support for all the interactive elements.

Skip Link to Main Content

Usually, the main content is not the first thing on the web page. There could be header links, navigation menu, and other interactive elements before the main content.

As a result, the keyboard and screen reader users must navigate through the other elements including navigation links before reaching the main content.

A skip link to the main content can solve this problem. The skip link is the first link on the web page that allows the users to skip through those elements and go directly to the main content.

Basically, a skip link allows the users to have immediate access to the main content on a web page.

As the best practices, the following points need to be considered:

  • A skip link should be the first thing on the web page and should go right after the opening body tag in HTML.
  • Style the skip link in a way so it appears only when focussed. Means, when the user presses the Tab key on the website initially, then the focus can go to the skip link and it becomes visible to the user.
  • Include a clear text on the link to let the user know what clicking on the skip link does. For example, the link text can be “Skip to content” or “Skip navigation”, etc.

Here’s an example of the HTML structure with the consideration of the skip link:

<body>
  <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

  ...

  <main id="content">...</main>

  ...
</body>

Here’s an example of the screen-reader-text CSS class:

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

Descriptive Link Text and Alternate Text for Images

To improve the accessibility of a website, every link text on a web page should be descriptive as much as possible.

Meaningful links help the users to understand the purpose and context of the links before they follow them.

For example, link texts like “Read More” or “Click Here” are unclear. A better way to improve it would be to add more info that is intended for the screen readers. In HTML, it would look something like the following:

<a href="#">Read More<span class="screen-reader-text"> “How to Make a Website More Accessible – Points for Better Accessibility”</span></a>

Another important aspect of accessibility is descriptive images. An alternate text for images is a description of the image’s content.

For a site to be accessible, every image should provide an alternate text by filling the “alt” attribute of the image in HTML.

If your site is using the image for the sole purpose of decoration, only then you don’t need to specify an alternate text.

Finally, you can test the accessibility of your website using a screen-reader and automated tools such as Lighthouse.

Also, you can test keyboard navigation on your website by navigating through all the interactive elements with just a keyboard.