How to make WordPress site accessible

Web Accessibility Introduction

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 those users who have visual, speech, auditory, physical, or cognitive disabilities.

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

Accessibility Diversity

There are near 8 billion people in the world. According to World Health Organization, there are over one billion people with disabilities. That is about 15 % of the population. Access to information is a human right.

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

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

Advantages

Web availability envelops all incapacities that influence admittance to the Internet, including:

• hear-able

• mental

• neurological

• physical

• discourse

• Visual

Web availability likewise helps individuals without inabilities, for instance:

• Individuals utilizing cell phones, shrewd watches, savvy televisions, and different gadgets with little screens, different info modes, and so forth

• more seasoned individuals with changing capacities because of maturing

• individuals with “transitory inabilities” like a messed up arm or lost glasses

• individuals with “situational impediments, for example, in splendid daylight or in a climate where they can’t pay attention to sound.

Web accessibility Standards

The Web Accessibility initiative (WAI) develops web accessibility standards in order to help improve accessibility of the World Wide Web.
WAI is liable for creating principles and rules that are utilized in making the web accessible.

WAI develops the Web Content Accessibility Guidelines (WCAG). They are internationally recognized and adopted standards. 

There are three levels of WCAG compliance:

Level A will be an essential prerequisite for certain users with disabilities to have the option to access and utilize web content.

Level AA indicates overall accessibility and expulsion of critical barriers to accessing content.

Level AAA gives upgrades and improvements to web accessibility for certain users with inabilities.

Accessibility Requirements

Visual Layout

• Page should be in a logical order for assistive technologies.
• Structure your pages and posts with appropriate headings.
• Blocks of content should be visually separated and distinct from one other, via padding, margin, or different techniques of achieving visual “white space.”
• The design should have only one main visual focus on elements.
• Labels should be visually adjacent to their controls.
  

Typography

Fonts should be easily readable by blind and low vision users.
Make all links same color , bold and underline.
Buttons and links are regularly important to the experience of a site, and it is crucial that both have good accessible names.

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

Contrast and color 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 images of large text have a contrast ratio of at least 4.5 to 1 with the background.

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 application creates a better experience for everybody.

Include Proper text alternatives to objects and images.

Images should have alt text so it will be readable through screen reader devices for blind and low vision people

Include captions with your images.

Responsive design

Design should be responsive to provide better users experience. It will yields a win for accessibility.

Control focus using tabindex

Standard HTML components, for example, <button> or <input> have keyboard accessibility worked in free of charge. Assuming you’re building custom elements however, use the tabindex attribute to ensure that they’re keyboard accessible.

Insert an element into the natural tab order using tabindex=”0″. For instance:

<div tabindex="0">Focus on me with the tab key</div>

Eliminate a component utilizing tabindex=”- 1″. For instance:

<div tabindex="-1">Can not reach me with tab key</div>

WordPress accessible Themes

• Period by Compete Themes
• Angelica by WebMan Design
• Cindy by WebMan Design
• Morning by Compete Themes

Free accessible WordPress themes

• AeonBlog
• Gridd
• Billie

Best WordPress accessibility plugins

• WP Accessibility
• One Click Accessibility
• WP Accessibility Helper

WordPress accessibility reader

WordPress effort to check that all of our themes are accessible, however some themes have additional features that add simplicity to the site and could make it harder for users who use screen readers and users with disabilities to access all content.

WordPress accessible menu

Navigation is a main function of a website. To ensure people with disabilities have equal access to our web content we need to make sure the menu works for people who can’t use a mouse, such as, people with motor function impairment, keyboard-only users, and screen reader users.
Superfish plugin ensure everyone has equivalent access to your web content. It helps people with a wide range of abilities, such as screen reader users, keyboard only users, and touch screen users. It also justify other risks that go along with people finding inaccessible websites.

WordPress accessibility checker

Axe Dev Tools:

• Chrome Extension
• Firefox Extension

WebAim’s WAVE:

• Chrome Extension
• Firefox Extension
• MS Edge

• Microsoft Insights

Summary

At the point when websites and web tools are appropriately designed and coded, individuals with disabilities can use them. In any case, right now many websites and tools are developed with accessibility barriers that make them difficult or unthinkable for some people to use.

Making the web accessible advantages individuals, organizations, and society. International web standards define what is needed for accessibility.