How to make the WordPress site accessible

Posted on

Overview of Web Accessibility

Web accessibility is the ability of a website, mobile application, or electronic document to be easily navigated and understood by a wide range of users, including users who have visual, speech, , auditory, physical or cognitive.

Accessibility is essential for designers and organizations that want to create high-quality web sites and tools, without preventing people from using their products and services.

Accessibility Diversity

There are nearly 8 billion people in the world. According to the World Health Organization, there are more than one billion people with disabilities. This represents approximately 15% of the population. Access to information is a human right.

Refers to design that seeks to enable and accommodate all human diversity, including a wide range of abilities and disabilities.

The main goal is to create a unified approach to design that allows multiple methods to access the same functionality.


Web availability encompasses all disabilities that influence Internet access, including:

• hearable

• mental

• neurological

• physical

• speech

• Visual

Web availability also helps people without disabilities, for example:

• People using cell phones, smart watches, smart TVs and different gadgets with small screens, different information modes, etc.

• more experienced individuals with changing abilities due to maturation

• people with “transient disabilities” such as a broken arm or lost glasses

• people with “situational difficulties, for example, in broad daylight or in a climate where they cannot pay attention to sound.

Web accessibility standards

The Web Accessibility Initiative (WAI) expands web accessibility standards to help improve the accessibility of the World Wide Web.
WAI is responsible for creating the principles and rules that are used to make the web accessible.

WAI is developing the Web Content Accessibility Guidelines (WCAG). These are internationally recognized and adopted standards.

There are three levels of WCAG conformance:

A-level will be an essential prerequisite for certain users with disabilities to be able to access and use web content.

AA level indicates overall accessibility and the removal of critical barriers to content access.

AAA level offers web accessibility upgrades and improvements for some users with disabilities.

Accessibility conditions

Visual layout

  • The page should be in a logical order for assistive technologies.
  • Structure your pages and posts with appropriate titles.
  • Content blocks should be visually separated and distinct from each other, via padding, margin, or different techniques to achieve visual “white space”.
  • The design should have only one primary visual focus on the elements.
  • Labels should be visually adjacent to their controls.


Fonts should be easily readable by blind and visually impaired users.
Make all links the same color, bold, and underlined.
Buttons and links are regularly important to a site’s experience, and it’s crucial that both have good, accessible names.

<button aria-label="Left align"></button>

Color contrast and accessibility

The guidelines recommend an AA (minimum) contrast ratio of 4.5:1 for all text.

Small text should have a contrast ratio of at least 7 to 1 with the background.

Large text and large text images have a contrast ratio of at least 4.5 to 1 with the background.

The website must be keyboard accessible.

Various users depend on the keyboard to navigate applications, from users with temporary and permanent motor impairments to users who use keyboard shortcuts to be more efficient and productive. Having a decent keyboard navigation methodology for your app creates a better experience for everyone.

Include appropriate text alternatives to objects and images.

Images must have alt text so they are readable through screen-reading devices for the blind and visually impaired

Add captions to your images.

Responsive design

The design should be responsive to provide a better user experience. This will give a win for accessibility.

Control focus using tabindex

Standard HTML components, for example,

Leave a Reply

Your email address will not be published.