Overview of WCAG

WCAG is a series of web accessibility guidelines published  by W3C.

There are 3 levels of WCAG 2.0 specifications.

1. WCAG Single Level A,
2. WCAG Double Level A.
3. WCAG Triple Level A

Note: Complexity increases based on the level. Triple level A is the most complex

What is ARIA ?

ARIA stands for Accessible rich internet applications. These are set of attributes that we can apply to an element that would do an surgery on the accessibility tree and add in additional semantics

Example for aria attributes for checkbox

In this example we are using aria to describe the input element

"aria-describedby" tells the speech reader to read the  contents from tooltip for the input

<div>
         <label for="username">Your username</label>
           <input type="text" id="username" aria-describedby="usern<div>
          <label for="username">Your username</label>
           <input type="text" id="username" aria-describedby="username-tip" required />
          <div role="tooltip" id="username-tip">Your username is your email address</div>
          </div>ame-tip" required />
         <div role="tooltip" id="username-tip">Your username is your email address</div>
 </div>

Output

For more example about aria properties we can refer this link https://www.w3.org/TR/wai-aria-practices/