Published On: January 23rd, 20197.1 min read

The web is for many people a center part for daily life at home, at work, and on the road. Web accessibility means the people with disability can use the web as same as normal people. For example, someone who can’t hear well can use captions to watch videos, who has no arms can use mouse tech to type, who can’t see well can use a screen reader to read aloud the context of the screen.


Accessibility has many benefits. For example, captions benefit anyone in a loud and in a quiet environment and good color contrast works better where there are layers. Also, aged people can get benefit with it and in fact, every people can get good user experience with an improved layout and design.

A lot of accessibility can be maintained while we code any website or mobile application. For example, HTML provides many parts for web accessibility features i.e. text alternative for images, headers, labels etc supports accessibility and they are loaded by screen readers and also used by search engines.
Good Authoring tools such as content management system, browsers, media players, apps etc need to support accessibility features. W3C provides standards to make web accessible and these standards are known WCAG (Web Content Accessibility Guidelines).

WCAG is built with four core principles. Those are discussed here.

WCAG Guideline Items

1. Perceivable: Information and user interface components must be Presentable to users in such a way they can perceive. For example, people can see the content or hear it or can sense with touching. It has four guidelines. Those are:

1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. As an example, if we consider an image that communicates information must provide a text alternative. The images which are only for design, it’s not mandatory to provide text alternatives.

Example (Level A):

If we don’t provide any alt text A screen reader would read: “Graphic i m g slash cat dot j p g”.But if we provide any alt text like bellow –  

 A cat looking out the window

After Providing the alt text, the screen reader would read: “Graphic A cat looking out the window”

1.2 Time-based Media: If the non-text content is time-based media, then text alternatives at least provide descriptive identification of non-text content. For example, captions can be provided for audio or video content .

Example: An interactive shopping environment is created that allows users to steer themselves around in a virtual store and shop. An alternative for time-based media allows the users to access the same shopping in text with links to choose aisles and to purchase things instead of dragging them into a virtual shopping basket.

1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Here are three success criteria:

1.3.1 Info and Relationships: Information, structure and relationships can be programmatically determined that means semantic and web standard-based HTML. Use semantically Correct markup for the content.

Example (Level A):  Let’s assume we want to show a list of game like this

Some Novice developers can write the code like


But this is not the right way. We should maintain semantic and correct markup and the correct code should be like:


    • cricket


    • Football


    • Hocky


1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, sound etc.

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. It has the following success criteria:

1.4.1 Use of color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

1.4.2 Audio control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

1.4.3 Contrast (Minimum) Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. Images of Text: The image of text can be visually customized to the user’s requirements and a particular presentation of text is essential to the information being conveyed.

2. Operable:  User interface and navigation must be operable  For example, users can use the computer by typing or by voice.

2.1 Keyboard Accessible: Make all functionality available from a keyboard.
Example (Level AA) :We should maintain that all submit button should work while we press Enter from keyboard along with we click submit using mouse.

2.2 Enough Time: Provide users enough time to read and use content. Example (Level AA): If we use slider in the website, then slide the app after a certain time so that the user can get enough time to read the content.

2.3 Seizures: Do not design in a way that is known to cause seizures.
Example (Level AA):Users with seizure disorders can have a seizure triggered by flashing visual content.In 1997, a cartoon on television in Japan sent over 700 children to the hospital, including about 500 who had seizures.The objective of this guideline is to ensure that content that is marked as conforming to WCAG 2.0 avoids the types of flash that are most likely to cause seizure when viewed even for a second or two.

2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
Example (Level A): Web pages must have titles that describe topic or purpose of the web page. The purpose of each link should be determined from the link text etc.

3. Understandable: Information and operations of the user interface must be understandable. People get clear and simple language or things.

3.1 Readable: Make text content readable and understandable.
Example (Level AA):People with disabilities experience text in many different ways. For some the experience is visual; for some it is auditory; for some it is tactile; for still others it is both visual and auditory. Some users experience great difficulty in recognizing written words yet understand extremely complex and sophisticated documents when the text is read aloud, or when key processes and ideas are illustrated visually or interpreted as sign language.

3.2 Predictable: Make Web pages appear and operate in predictable ways. Example (Level A): Sometimes changing the setting of any user interface component should not change automatically unless the user has been advised of the behavior before using the component (For example, the system should ask for cookie permission if system stores cookie data).

3.3 Input Assistance: Help users avoid and correct mistakes.
Example (Level A): Proper message should be shown while entering the value in the form like password, email validation, and combination messages.

4. Robust: Context must be robust enough so that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. For example, people can use different accesses of technologies.

4.1 Compatible: Maximize compatibility with current and future user ages agents, including assistive technologies.
Example:  (Level AAA) If the whole website is accessible from keyboard and voice command, the structure will robust and it will pass level AAA conformance level.

WCAG Version 2.0

Without these four principles and guidelines, WCAG 2.0 maintains 61 testable criteria and 3 levels of conformance like

  • Level A: The minimum level of conformance.
  • Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
  • Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.

Web Accessibility becomes more important day by day. So All web developer should follow WCAG 2.0 to make the tebsite more accessible to all type of users. Here only the overview of WCAG2.0 is described.

If you want to learn more about the guideline please visit W3C official website for WCAG.

Contributor: Anwesha Paul, Nascenia

Share it, Choose Your Platform!

More to Explore

The Quest for Knowledge Continues. Fuel Your Curiosity.