WCAG 2.0

( Web Content Accessibility Guidelines 2.0 )( Web Content Accessibility Guidelines 2.0 )

WCAG 2.0WCAG 2.0

““The power of the web is in its universality. Access by The power of the web is in its universality. Access by everyone regardless of disability is an essential aspecteveryone regardless of disability is an essential aspect.”.”

Site accessibility is a measure of how effectively all people, including those with disabilities, are able to access and use web pages.

WCAG 2.0WCAG 2.0

Universal DesignUniversal Design

“I've spent the past few weeks trying to use my computer mostly via keyboard and voice control, trying to avoid touching my mouse (recurring overuse injury in my elbow)” Donna Mauer, maadmob.net/donna/blog/

WCAG 2.0WCAG 2.0

The four broad categories of disabilitiesThe four broad categories of disabilities

Visual- blind, color blind and reduced visionHearing- deaf, reduced hearingPhysical- in the case of the web means those with motor disabilities that inhibits the use of the keyboard or mouseCognitive/ neurological- dyslexia, memory problems, attention deficit disorder.

WCAG 2.0WCAG 2.0

Why does it matter?Why does it matter?

Different able persons are invisible onlineMore access to informationEqual opportunity (Access for Discrimination) Financial incentives (e.g widen number of customers, less bandwidth, faster loading pages, etc).Competitiveness ( a good skill)

WCAG 2.0WCAG 2.0

WAI (Web Accessibility Initiative )WAI (Web Accessibility Initiative )

Guidelines widely considered as the international standard for Web accessibility

Support materials to help understand and implement Web accessibility.

WCAG 2.0WCAG 2.0

WCAG 2.0WCAG 2.0

WCAG 2.0 StructureWCAG 2.0 Structure

Perceivable Operable Understandable Robust

WCAG 2.0WCAG 2.0

1. Perceivable1. Perceivable

Guidelines 1.1 Text Alternatives 1.2 Time based Media 1.3 Adaptable 1.4 Distinguishable

WCAG 2.0WCAG 2.0

Information and user interface components must be presentable to users in ways they can perceive.

1. Perceivable ( Guideline 1.1 )1. Perceivable ( Guideline 1.1 )

1.1 Text Alternatives

WCAG 2.0WCAG 2.0

Provide text alternatives for all non-text content


Advisory Techniques Providing sign language videos for audio-only files

WCAG 2.0WCAG 2.0



Situation A: If a short description can serve the same purpose and present the same information as the non-text content

G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

using a short text alternative technique listed below

WCAG 2.0WCAG 2.0



1.2 Time based Media

WCAG 2.0WCAG 2.0

Provide synchronized alternatives for multimedia


1.2.1 Audio-only and video-onlyPrerecorded audio-only and prerecorded video-only

media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such: (Level A)

Prerecorded Audio-only Prerecorded Video-only

WCAG 2.0WCAG 2.0



1.2.1 Advisory Techniques Providing a transcript of a live audio only presentation after the

fact Linking to textual information that provides comparable

information (e.g. for a traffic Webcam, a municipality could provide a link to the text traffic report.)

WCAG 2.0WCAG 2.0



1.2.2 Captions (Prerecorded) Captions are provided for all prerecorded audio content in

synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

Prerecorded Audio-only

WCAG 2.0WCAG 2.0



1.2.2 Advisory Techniques Providing a note saying "No sound is used in this clip" for video-

only clips Using SMIL 1.0 to provide captions for all languages for which

there are audio tracks Using SMIL 2.0 to provide captions for all languages for which

there are audio tracks

WCAG 2.0WCAG 2.0



1.3 Adaptable

WCAG 2.0WCAG 2.0

Ensure information and structure can be separated from presentation


1.3.1 Info and Relationships Information, structure, and relationships conveyed

through presentation can be programmatically determined or are available in text. (Level A)

WCAG 2.0WCAG 2.0

1.3 Adaptable


1.3.1 Advisory Techniques C22: Using CSS to control visual presentation of text (CSS)Using CSS rather than tables for page layout

WCAG 2.0WCAG 2.0

1.3 Adaptable


1.3.2 Meaningful SequenceWhen the sequence in which content is presented affects

its meaning, a correct reading sequence can be programmatically determined. (Level A)

WCAG 2.0WCAG 2.0

1.3 Adaptable


1.3.2 Advisory Techniques Using left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-leftProviding a link to linearized rendering

WCAG 2.0WCAG 2.0

1.3 Adaptable


1.3.3 Sensory CharacteristicsInstructions provided for understanding and operating

content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)

WCAG 2.0WCAG 2.0

1.3 Adaptable


1.3.3 Advisory Techniques Using an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning

WCAG 2.0WCAG 2.0

1.3 Adaptable


1.4 Distinguishable

WCAG 2.0WCAG 2.0

Easy to distinguish foreground information from its background


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. (Level A)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.1 Advisory Techniques Conveying information redundantly using color

WCAG 2.0WCAG 2.0

1.4 Distinguishable


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. (Level A)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.2 Advisory Techniques Conveying information redundantly using color

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.3 Contrast (Minimum) The visual presentation of text and images of text has a

contrast ratio of at least 4.5:1, except for the following: (Level AA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.3 Advisory Techniques Using a higher contrast value for text that is over a patterned backgroundUsing a higher contrast values for lines in diagrams

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.4 Resize text Except for captions and images of text, text can be

resized without assisted technology up to 200 percent without loss of content or functionality. (Level AA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.4 Advisory Techniques Providing large fonts by defaultUsing page-percent for container sizesAvoiding scaling font sizes smaller than the user-agent defaultAvoiding justified textProviding sufficient inter-line and inter-column spacing

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.5 Images of TextIf the technologies being used can achieve the visual

presentation, text is used to convey information rather than images of text except for the following: (Level AA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.5 Advisory TechniquesIdentifying informative non-text contentAvoid applying text styling to text characters within a word

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.6 Contrast (Enhanced)The visual presentation of text and images of text has a

contrast ratio of at least 7:1, except for the following: (Level AAA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.6 Advisory TechniquesLarge TextIncidentalLogotypes

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.7 Contrast (Enhanced)The visual presentation of text and images of text has a

contrast ratio of at least 7:1, except for the following: (Level AAA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.7 Advisory TechniquesLarge TextIncidentalLogotypes

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.8 Low or No Background Audio-> contains primarily speech in the foreground

-> is not an audio CAPTCHA or audio logo -> is not vocalization intended to be primarily musical expression such as singing or rapping

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.8 Advisory TechniquesNo Background: The audio does not contain background sounds.Turn Off: The background sounds can be turned off.20 dB: The background sounds are at least 20 decibels lower than the foreground speech content

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.9 Visual PresentationFor the visual presentation of blocks of text, a mechanism is available

to achieve the following: (Level AAA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.9 Advisory TechniquesForeground and background colors can be selected by the user.Width is no more than 80 characters or glyphs (40 if CJK).Text is not justified (aligned to both the left and the right margins).

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.10 Images of Text (No Exception):Images of text are only used for pure decoration or where a particular

presentation of text is essential to the information being conveyed. (Level AAA)

WCAG 2.0WCAG 2.0

1.4 Distinguishable


1.4.10 Advisory TechniquesUsing server-side scripts to resize images of text

WCAG 2.0WCAG 2.0

1.4 Distinguishable

2. Operable2. Operable

Guidelines 2.1 Keyboard 2.2 Enough Time 2.3 Seizures 2.4 Navigable

WCAG 2.0WCAG 2.0

User interface components and navigation must be operable

2. Operable ( Guideline 2.1 )2. Operable ( Guideline 2.1 )

2.1 Keyboard Accessible

WCAG 2.0WCAG 2.0

Make all functionality available from a keyboard.


2.1.1 KeyboardAll functionality of the content is operable through a

keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)

WCAG 2.0WCAG 2.0



2.1.1 Advisory TechniquesUsing XHTML role, state, and value attributes if repurposing static elements as interactive user interface componentsProviding keyboard shortcuts to important links and form controlsUsing unique letter combinations to begin each item of a list

WCAG 2.0WCAG 2.0



2.1.2 No Keyboard TrapIf keyboard focus can be moved to a component of the

page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)

WCAG 2.0WCAG 2.0



2.1.3 Keyboard (No Exception)All functionality of the content is operable through a

keyboard interface without requiring specific timings for individual keystrokes. (Level AAA)

WCAG 2.0WCAG 2.0



2.2.1 Timing AdjustableFor each time limit that is set by the content, at least one of the

following is true: (Level A)◦Turn off◦Adjust◦Extend◦Real-time Exception

WCAG 2.0WCAG 2.0

2.2 Enough Time


2.2.1 Advisory TechniquesUsing a script to poll the server and notify a user if a time limit is present

WCAG 2.0WCAG 2.0

2.2 Enough Time


2.2.2 Pause, Stop, HideFor moving, blinking, scrolling, or auto-updating information, all

of the following are true: (Level A)◦Moving, blinking, scrolling◦Auto-updating

WCAG 2.0WCAG 2.0

2.2 Enough Time


2.2.2 Advisory TechniquesProviding a mechanism to stop all content that blinks within a Web pageProviding the user with a means to stop moving content even if it stops automatically within 5 seconds

WCAG 2.0WCAG 2.0

2.2 Enough Time


2.2.3 No Timing 2.2.4 Interruptions 2.2.5 Re-authenticating

WCAG 2.0WCAG 2.0

2.2 Enough Time


2.3.1 Three Flashes or Below ThresholdWeb pages do not contain anything that flashes more than

three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)

WCAG 2.0WCAG 2.0

2.3 Seizures


2.3.1 Advisory TechniquesReducing contrast for any flashing content Avoiding fully saturated reds for any flashing contentReducing the number of flashes even if they do not violate thresholds

WCAG 2.0WCAG 2.0

2.3 Seizures


2.3.2 Three Flashes or Below ThresholdWeb pages do not contain anything that flashes more than

three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)

WCAG 2.0WCAG 2.0

2.3 Seizures


2.3.1 Advisory TechniquesReducing contrast for any flashing content Avoiding fully saturated reds for any flashing contentReducing the number of flashes even if they do not violate thresholds

WCAG 2.0WCAG 2.0

2.3 Seizures


2.3.2 Three FlashesWeb pages do not contain anything that flashes more than

three times in any one second period. (Level AAA)

WCAG 2.0WCAG 2.0

2.3 Seizures


2.3.2 Advisory TechniquesSlowing down live material to avoid rapid flashes (as in flashbulbs) Freezing the image momentarily if 3 flashes within one second are detectedDropping the contrast ratio if 3 flashes within one second are detected

WCAG 2.0WCAG 2.0

2.3 Seizures


2.4.1 Bypass BlocksA mechanism is available to bypass blocks of content that are

repeated on multiple Web pages. (Level A)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.2 Page TitledWeb pages have titles that describe topic or purpose. (Level A)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.3 Focus OrderIf a Web page can be navigated sequentially and the

navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.4 Link Purpose (In Context)The purpose of each link can be determined from the link text

alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.5 Multiple WaysMore than one way is available to locate a Web page within a

set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.6 Headings and LabelsHeadings and labels describe topic or purpose. (Level AA)

2.4.7 Focus VisibleAny keyboard operable user interface has a mode of operation

where the keyboard focus indicator is visible. (Level AA)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.8 LocationInformation about the user's location within a set of Web pages

is available. (Level AAA)

2.4.9 Link Purpose (Link Only)A mechanism is available to allow the purpose of each link to

be identified from link text alone. (Level AAA)

WCAG 2.0WCAG 2.0

2.4 Navigable


2.4.10 Section HeadingsSection headings are used to organize the content. (Level

AAA)

WCAG 2.0WCAG 2.0

2.4 Navigable

3. Understandable3. Understandable

Guidelines 3.1 Readable 3.2 Predictable 3.3 Input Assistance 3.4 Help 3.5 Error Prevention (All)

WCAG 2.0WCAG 2.0

Information and the operation of user interface must be understandable

3. Understandable3. Understandable ( Guideline 3.1 ) ( Guideline 3.1 )

3.1.1 Language of PageThe default human language of each Web page can be

programmatically determined. (Level A)

WCAG 2.0WCAG 2.0

3.1 Readable


3.1.2 Language of PartsExcept for proper names, technical terms, words of

indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)

WCAG 2.0WCAG 2.0

3.1 Readable


3.1.3 Unusual WordsA mechanism is available for identifying specific definitions of

words or phrases used in an unusual or restricted way, including idioms and jargon. (Level AAA)

WCAG 2.0WCAG 2.0

3.1 Readable


3.1.4 AbbreviationsA mechanism for identifying the expanded form or meaning of

abbreviations is available. (Level AAA)

WCAG 2.0WCAG 2.0

3.1 Readable


3.1.5 Reading LevelProper names and titles, supplemental content, or a version

that does not require reading ability more advanced than the lower secondary education level, is available. (Level AAA)

WCAG 2.0WCAG 2.0

3.1 Readable


3.2.1 On FocusWhen any component receives focus, it does not initiate a

change of context. (Level A)

WCAG 2.0WCAG 2.0

3.2 Predictable


3.2.2 On InputChanging the setting of any user interface component does

not automatically cause a change of context unless the user has been advised of the behavior before using the component. (Level A)

WCAG 2.0WCAG 2.0

3.2 Predictable


3.2.3 Consistent NavigationNavigational mechanisms that are repeated on multiple Web

pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)

WCAG 2.0WCAG 2.0

3.2 Predictable


3.2.4 Consistent IdentificationComponents that have the same functionality within a set of

Web pages are identified consistently. (Level AA)

WCAG 2.0WCAG 2.0

3.2 Predictable


3.2.5 Change on RequestChanges of context are initiated only by user request or a

mechanism is available to turn off such changes. (Level AAA)

WCAG 2.0WCAG 2.0

3.2 Predictable


3.3.1 Error Identification (A) 3.3.2 Labels or Instructions (A) 3.3.3 Error Suggestion (AA) 3.3.4 Error Prevention (Legal, Financial, Data) (AA) 3.3.5 Help (AAA)3.3.6 Error Prevention (AAA)

WCAG 2.0WCAG 2.0

3.3 Input Assistance

4. Robust4. Robust

Guidelines 4.1 Parsing (A) 3.2 Name, Role, Value (A)

WCAG 2.0WCAG 2.0

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

TestTest

WCAG 2.0WCAG 2.0

◦ WAVE – http://wave.webaim.org/toolbar

◦ Screen Readers

NVDA – http://www.nvda-project.org

JAWS for Windows – http://www.freedomscientific.com

◦ Screen Magnifiers

ZoomText Xtra – http://www.aisquared.com

Dolphin Supernova – http://www.yourdolphin.com

◦ Alternate Input devices –

Track ball and switch – http://www.ablenetinc.com

◦ Dragon Naturally Speaking

• http://www.nuance.com

◦ Talks – a screen reader for mobile S60 phones

http://www.nuance.com/talks/

Thank youThank you

WCAG 2.0WCAG 2.0

Sathasivam K.

E-Mail: [email protected]

Blog : http://sadhas.wordpress.com/

Website: http:// ijoin.webnode.com/

Date post:	30-Oct-2014
Category:	Design
Upload:	sathasivam
View:	3 times
Download:	0 times