WCAG

 

Pillars/ Principles of Accessibility(WCAG-Web Content Accessibility Guidelines)

1. Perceivable

   Means to become aware of, know or identify by means of the senses

   1. Text Alternatives

      1. Non-text content

• People with certain disabilities will not be able to perceive the information conveyed through non-text content unless an alternate way is provided to convey the same.(to serve the equivalent purpose)

• Ex: Images, charts, Audio, Video, Graphs,

• Add alt text for images, charts, graphs, diagrams

• Provide alt text, captions, transcript for audio and video

• Audio version for CAPTCHAs

• Remove alt text for decorative images

1. Controls, input

   1. form control accepts user input (input, textarea, select, progress, meter, output)

   2. should’ve a name that describes it’s purpose

   3. (label) for-(input) id association

   4. encapsulate form control with label

   5. aria-labelledby

   6. aria-label

   7. title

<button id="search" aria-label="Search"></button>

(OR)

The text already exist elsewhere in the document. So, using aria-labelledby. Otherwise, should use aria-label as above

<h2 id="searchLabel">Search</h2>

<label for="search">Enter search term

<input type="search" id="search">

</label>

<button aria-labelledby="searchLabel"></button>

2. Time-based media

3. Test

4. Sensory

5. CAPTCHA

6. Decoration, formatting, invisible

1. form control accepts user input (input, textarea, select, progress, meter, output)

2. should’ve a name that describes it’s purpose

3. (label) for-(input) id association

4. encapsulate form control with label

5. aria-labelledby

6. aria-label

7. title

<button id="search" aria-label="Search"></button>

(OR)

The text already exist elsewhere in the document. So, using aria-labelledby. Otherwise, should use aria-label as above

<h2 id="searchLabel">Search</h2>

<label for="search">Enter search term

<input type="search" id="search">

</label>

<button aria-labelledby="searchLabel"></button>

1. Time based media

2. Adaptable

3. Distinguishable

1. Operable

2. Understandable

3. Robust