Web Content Accessibility Guidelines (WCAG) is a technical standard developed by Accessibility Guidelines Working Group which is part of W3C (World Wide Web Consortium) to make web accessible to people with disabilities. In other words, it is a standard that should be followed when developing web applications and tools so that it is accessible by disabled people who use software like screen readers to access the web.
There are screen reader software like JAWS, NVDA, etc. apart from the screen reading software that comes by default with OS in both desktop and mobiles which are used by disabled people to use the web service. The other common tools they use are Braille Keyboards, Screen Magnifiers, Sip and Puff Systems, Voice Controls, etc.
Each countries has their laws and standards to make their web services accessible. For instance, in US there is an act called ADA (American with Disabilities Act) which requires to build web services accessed by public is accessible by everyone including the disabled people. Section 508 compliance is a section under the Rehabilitation Act which dictates accessibility standards devised by Access Board to make the federal services accessible. Similarly, other countries like UK, Australia, EU has their own laws to ensure accessibility.
WCAG standard, currently WCAG 2.0 has 12 guidelines for web accessibility organised under 4 principles listed below.
-
Perceivable
-
Operable
-
Understandable
-
Robust
A web service that follows a guideline can be rated Level A, AA and AAA, where A being basic conformance, AA is stronger conformance and AAA being the highest level of conformance.
Let’s see a brief introduction on these 4 principles and the guidelines defined under each principle.
PRINCIPLE 1. Perceivable
The content and user interface elements of a web page should be understandable to all the users. There are 4 guidelines defined in WCAG to meet this requirements.
GUIDELINE 1.1 Text Alternatives
Any non-text content in a webpage should have text alternatives to enable tools like screen readers to read it for the users. The success criteria for this guideline below.
1.1.1 Non-text Content – Example: Provide alt text for images.
GUIDELINE 1.2 Time-based Media
Provide text alternative for multimedia contents like audio and video
1.2.1 Audio-only and Video-only (Prerecorded) – Provide transcripts wherever applicable.
1.2.2 Captions (Prerecorded) – Provide captions for the pre-recorded multimedia embedded objects.
1.2.3 Audio Description or Media Alternative (Prerecorded) – Provide text transcripts for the audio files, video and gif animated files.
1.2.4 Captions (Live) – Provide captions for live multimedia contents.
1.2.5 Audio Description (Prerecorded) – Provide audio descriptions similar to text transcripts for videos that conveys the content without audio.
1.2.6 Sign Language (Prerecorded) – A sign language video should be associated for video contents.
1.2.7 Extended Audio Description (Prerecorded) – Extended audio track for videos that convey complex content in less time.
1.2.8 Media Alternative (Prerecorded) – A text transcript for the pre-recorded multimedia.
1.2.9 Audio-only (Live) – A text transcript for live audios.
GUIDELINE 1.3 Adaptable
The structure of content/page should be adaptable when viewed in different presentation viewports. In other words, the content should not lose its meaningful structure when viewed in different ways. The below are the success criteria for this guidelines.
1.3.1 Info and Relationships – Semantic mark-ups should be used. Example: quoted content in <q> or <blockquote>, appropriate use of <table>, header tags (h1, h2, etc.).
1.3.2 Meaningful Sequence
The DOM element order and navigation order should be meaning full.
1.3.3 Sensory Characteristics
Help content should not be dependent on sensory characteristics of user. Example- avoid audio only help content.
GUIDELINE 1.4 Distinguishable
The content in background and foreground should be easily distinguishable when viewed visually and when accessed by screen readers. The below are the success criteria for this guidelines.
1.4.1 Use of Color
The content color alone should not be used as a way of differentiating the content. Example – Differentiating a link and text should not be based on only colors, it can also be styled differently.
1.4.2 Audio Control
Audio content is displayed in a control with pause, stop, volume controls.
1.4.3 Contrast (Minimum)
Color contrast between different type of contents (text and image) should not introduce distractions.
1.4.4 Resize text
The page should adapt to different font size based on zoom level.
1.4.5 Images of Text
Text content should not be presented as image.
1.4.6 Contrast (Enhanced)
Identify the text and image that should be provided with high contrast ratio.
1.4.7 Low or No Background Audio
Audio content should be filtered and should have low background and other distracting noises.
1.4.8 Visual Presentation
Page content should be presented with optimal styling and in an acceptable length.
1.4.9 Images of Text (No Exception)
PRINCIPLE 2. Operable
The page elements including navigation system should be operable.
GUIDELINE 2.1 Keyboard Accessible
All page UI elements and navigation elements should be accessible by keyboard i.e. user should be able to navigate seamlessly using tab key.
2.1.1 Keyboard - All elements can be accessed by keyboard
2.1.2 No Keyboard Trap – When navigating through keyboard the focus is not trapped to a page elements. User should navigate to and away from all page elements.
2.1.3 Keyboard (No Exception) – All page functionality is available to keyboard only users.
GUIDELINE 2.2 Enough Time
The user should be given enough time to read the content before forcing user to move away automatically to next content.
2.2.1 Timing Adjustable – A page content that is displayed with a time limit should allow users to stop or extent the time limit. A typical example is alert should be thrown before the user session expires and an option should be provided to extent the session.
2.2.2 Pause, Stop, Hide – A page content that is scrolling like news headlines, carousel, etc. should be given option to pause, stop and continue.
2.2.3 No Timing – A page should be designed without a time limit.
2.2.4 Interruptions – A page interruptions can be like alerts can be disabled by users.
2.2.5 Re-authenticating – A page when session timeouts, should allow users to re-authenticate and stay in same page.
GUIDELINE 2.3 Seizures
The page content should be designed in a way that it should not cause seizures.
2.3.1 Three Flashes or Below Threshold – There should not be flashes on the page that is more than 3 flashes per second unless it is small or it is with low contrast with less red color.
2.3.2 Three Flashes – No page content flashes more than 3 times per second.
GUIDELINE 2.4 Navigable
User should be given a way to navigate easily across the page and to find and move to desired content and should allow skipping content.
2.4.1 Bypass Blocks – A navigation link to skip content like “Skip to main content” on header section,
2.4.2 Page Titled – Every page should have descriptive title.
2.4.3 Focus Order – The focus order is logical and should follow meaningful sequence.
2.4.4 Link Purpose (In Context) – The purpose of a link or a button should be descriptive based on the context where it is located. A link in text content should be easily identified that is there for navigating to next page or to skip to a section and a link button or a button with input controls is used to submit the form.
2.4.5 Multiple Ways – There should be multiple ways to reach other pages of the site. Like sitemap, category listings, bread crumps, etc.
2.4.6 Headings and Labels – Pages, forms and form elements should have proper heading, labels and form controls should be associate with a label or aria-label attributes.
2.4.7 Focus Visible – Focus on an element should be clearly visible on the screen. For example, a dotted border around the control.
2.4.8 Location – A page location in a sequence, for example in a wizard, is clearly identified with page 2 to 10.
2.4.9 Link Purpose (Link Only) – The purpose of the link is self-descriptive to identify it with the link text alone.
2.4.10 Section Headings – Page section and sub sections should have proper heading.
PRINCIPLE 3. Understandable
The page content and the operation it exposes should be understandable.
GUIDELINE 3.1 Readable
The text content should be readable for all the users from different culture and knowledge (skill) level.
3.1.1 Language of Page – The page content’s language is set using lang attribute like <html lang=”en”>
3.1.2 Language of Parts – The page sub section content language should be set appropriately. <span lang=”ta”>
3.1.3 Unusual Words – A word that don’t have a dictionary meaning is accompanied with proper help texts
3.1.4 Abbreviations – Abbreviations should be decorated by <abbr> and linked to the definition.
3.1.5 Reading Level – Multiple levels of content alternative based on the skill level are provided.
3.1.6 Pronunciation – If a word is only properly identified by pronunciation then a link with pronunciation is provided with the text.
GUIDELINE 3.2 Predictable
The web page content and operations should be intuitive and predictable.
3.2.1 On Focus – The page content should not change substantially on focus that may result in confusion.
3.2.2 On Input - – The page content should not change substantially on input on a page element that may result in confusion.
3.2.3 Consistent Navigation – The page navigation system is consistent across the application.
3.2.4 Consistent Identification – The repeated page content or elements should be used for same purpose. For example, changing the language of a page with a control like dropdown should be consistent across pages.
3.2.5 Change on Request – A page content or element that changes on focus should be given an option to disable the change and user should be able to enable it back.
GUIDELINE 3.3 Input Assistance
Provide enough help text or examples for input to avoid mistakes.
3.3.1 Error Identification – A mandatory element or input that requires specific formats are easily identified with a help text or in a label. The validation errors should be intuitive to identify the mapping to the specific input elements.
3.3.2 Labels or Instructions – Every input elements should have a label and proper instructions. Each label should be properly associated to an input element either with <label for=”id”> or fieldset legend.
3.3.3 Error Suggestion – When a validation error is thrown user should be provided with proper suggestion for correcting the input.
3.3.4 Error Prevention (Legal, Financial, Data) – Crucial data like legal, financial data should be allowed to maintained by the users. Users should be able to edit, delete and confirm the changes to those crucial data.
3.3.5 Help – Proper help text instructions should be associated with each input form.
3.3.6 Error Prevention (All) – A form that can be submitted for data changes should be provided with an option to verify the changes and edit it when needed.
PRINCIPLE 4. Robust
The web page should be robust enough to present well by user agents, screen readers and other assistive software.
GUIDELINE 4.1 Compatible
The page should be compatible to the future changes in the user agents, accessible tools, etc.
4.1.1 Parsing – HTML parsing, semantic and validation errors should be prevented.
4.1.2 Name, Role, Value – HTML mark-up should be properly constructed for accessibility. HTML elements like table, form, etc. are used appropriately. A table should be used to display tabular data and it should not be used to define the structure of the form.
Full Reference: https://www.w3.org/WAI/WCAG20/quickref