Compliance In Progress

1. WCAG 2.0
Web Content Accessibility Guidelines
Jaime Brown – UX Designer

2. Outline

3. Outline
1
• Accessibility Overview
• WCAG 2.0 Overview (2 - 6)
• WCAG 2.0 Principles & Guidelines Breakdown (7
• WAI – ARIA Overview (14 –
• WAI – ARIA Roles (17
• ARIA Guidelines (
• Summary

4. Accessibility Guidelines
2
• WCAG 2.0 refers to Web Content Accessibility Guidelines, the most recent version versus
WAI-ARIA.
• The most thorough web accessibility guide is WCAG 2.0. This detailed resource walks
developers and designers
• WAI-ARIA contains it’s own version of accessibility requirements (in parallel with WCAG
guidelines), with a few notable differences such as in-code attributes.

5. WCAG 2.0 Overview
2
• WCAG 2.0 refers to Web Content Accessibility Guidelines, the most recent version.
• The WCAG accessibility guidelines were developed through the W3C process, with the
singular goal of unifying sites with a shared standard for accessibility.
• The creation of WCAG was intended to make websites more accessible to users with
disabilities, which may impact his or her ability to view and interact with a webpage or
application.
• Guidelines include standards for visual and auditory disabilities.
• Websites adhering to the WCAG guidelines should examine the text, images, and sounds on
their site, as well as the markup or code behind them.

6. WCAG 2.0 Overview
3
The required standards for WCAG (2.) are comprised the following:
• Principles – Each principle includes it’s own set of accompanying guidelines (12 total).
• Perceivable
• Operable
• Understandable
• Robust
• Levels of Conformance -
• Level A
• Level AA
• Level AAA

7. WCAG 2.0 Overview
4
• Perceivable - Information and user interface components must be presentable to users in ways they
can perceive.
1. Text Alternatives
2. Time-Based Media
3. Adaptable
4. Distinguishable
• Operable - User interface components and navigation must be operable.
5. Keyboard Accessible
6. Enough Time
7. Seizures
8. Navigable
• Understandable - Information and the operation of user interface must be understandable.
9. Readable
10.Predictable
11.Input Assistance
• Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user
agents, including assistive technologies.
12. Compatible

8. WCAG 2.0 Overview
5
Levels of Conformance
• Level A - minimum level of accessibility (does not generally achieve broad accessibility for many
situations).
• Level AA - proposed as the new standard; more closely aligns with impending refreshed guidelines for
Access Board Standard for Section 508.
• Level AAA -

9. Principles & Guidelines Breakdown
6
Perceivable (A and AA Level Requirements)
• Text alternatives – Provide text alternatives for any non-text content.
• Time-based media:
• Pre-recorded audio
• Captions
• Audio description
• Captions (Live)

10. Principles & Guidelines Breakdown
7
Adaptable (A and AA Level Requirements)
• Info and Relationships:
• Semantic markup is used to designate headings.
• Tables are used for tabular data.
• Text labels are associated with form input elements.
• Meaningful Sequence
• The reading and navigation order is logical and intuitive.
• Sensory Characteristics
• Instructions do not rely upon shape, size, or visual location. Example “Click the square icon to
continue.”
• Instructions do not rely upon sound.

11. Principles & Guidelines Breakdown
8
Distinguishable (A and AA Level Requirements)
• Use of color
• Audit control
• Contrast minimum
• Resize text
• Images of text
• Contrast enhanced
• Low or no background audio (AAA)
• Visual presentation (AAA):
• Blocks of text are no more than 80 characters wide.
• Are not fully justified.
• Have adequate line spacing, and paragraph spacing (1.5 times line spacing).
• Do not require horizontal scrolling when the text size is doubled.

12. Principles & Guidelines Breakdown
1
Operable (A and AA Level Requirements)
• Keyboard Accessible:
• Keyboard
• No keyboard trap
• Enough time – Provide users enough time to read and use content:
• If a page or application has a time limit, the user is given the option to turn it off, adjust, or extend
that time limit. Only exception would be real-time events.
• Automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused,
stopped, or hidden by the user.
• Automatically updating content (ex – refreshing a page), can be paused, stopped, hidden by the
user, or the user can manually control the timing of the updates.
• Re-authenticating (AAA) – If an authentication session expires, the user can re-authenticate and continue
the activity without losing any data from the current page.

13. Principles & Guidelines Breakdown
1
Understandable (A and AA Level Requirements)
• Readable – make context readable and understandable
• Language of a Page – identified using HTML language attribute.
• Parts of Language – When appropriate identify the language of sections of content that are a different
language are identified, by using the ”lang attribute”..
• Unusual words (AAA) – words that may be ambiguous, unknown, or used in a very specific way are
defined through adjacent text, a definition list, a glossary or other method.
• Pronunciation (AAA) – if the pronunciation of a word is vital to understanding that work, it’s pronunciation
is provided immediately following the word, or via link or glossary.
• Predictable – make web pages appear and operate in predictable ways.
• On Focus
• On Input
• Consistent Navigation
• Consistent Identification

14. Principles & Guidelines Breakdown
1
Understandable (Continued):
• Consistent Navigation
• Consistent Identification
• Input Assistance – Help users avoid and correct mistakes.
• Error Identification – Provide consistent identification:
• Required form elements or those form elements requiring a specific format, value, or length provide
this information within the element’s label.
• If utilized, form validation cues and errors alert users to errors in an efficient, intuitive, and
accessible manner. The errors are clearly identified, and user is allowed to easily fix, and resubmit
the form.
• Labels or instructions
• Error Suggestion – If an input error is detected (either client-side or server side validation), provide
suggestions for fixing the input in a timely and accessible manner.
• Error Prevention (legal, financial, data) – If the user can change or delete legal, financial, or test data,
the changes/deletions are reversible, verified, or confirmed.
• Help (AAA) – Provide instructions and cues in context to help in form completion and submission.

15. Principles & Guidelines Breakdown
1
Robust (A and AA Level Requirements)
• Content can be used reliably by a wide variety of user agents, including assistive technologies.
• Parsing (A) – Significant HTML/XHTML validation/parsing errors are avoided.
• Name, Role, Value – Markup is used in a way that facilitates accessibility. This includes
following the HTML/XHTML specifications and using forms, form labels, frame titles, etc.
appropriately.

16. WAI–ARIA Overview
1
• WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications.
• WAI-ARIA is a separate resource, independent of WCAG 2.0.
• The 3 main components of WAI-ARIA that are intended to convey semantics in adhering to
the ARIA guidelines.
1. Roles – element types that are defined and described by their characteristics.
2. Properties – define characteristics of the component.
3. States – define the current conditions of the component.
• Notes:
• States and properties refer to similar features, and are generally grouped together and referred to as
“ARIA Attributes”.
• ARIA is primarily for developers who create custom widgets and other components that don’t carry the
necessary information.

17. WAI-ARIA Attributes
1
• All ARIA attributes begin with “aria”, as in the aria-checked state, which can be set to true or false.
• When the native semantics of the HTML being used aren’t enough you should add the appropriate roles,
states, and properties that communicate the necessary semantic information to assistive devices.
• ARIA landmarks (regions) are attributes you can add to elements in your page to define areas like the main
content or a navigation region.
• WAI-ARIA provides the ability for developers to specify roles for document areas (and many other things).
• Attributes:
• Landmarks

18. WAI-ARIA Attributes
1
Landmarks include the following:
• Banner = contains the site-oriented content of each page, like the logo, usually located at the top of the
page. There should only be one banner landmark per page.
• Complementary = a section of content that complements the main content but also retains its meaning
when separated from the main content.
• Contentinfo = contains content usually found in the footer of a page, like copyright and privacy
statements. There should only be one contentinfo landmark per page.
• Form = contains form input elements which can be edited and submitted by the user.
• Main = the main content of the page. There should only be one main landmark per page.
• Navigation = a collection of navigation links to navigate the site or page.
• Search = a search tool.
• Application = represents a unique software unit, and keyboard commands are handled by the application
rather than the browser itself. This role should be used sparingly.

19. WAI-ARIA Guidelines (Checklist)
1
• Landmarks
• Language Attributes
• Document Outline
• Links
• Images
• JavaScript
• Forms
• Media (Audio and Video)
• Color and Contrast Ratios
• Color Blindness Testing

20. WCAG 2.0
1
WCAG requirements can be condensed to the following guidelines:
• Perceivable
• Operable
• Understandable
• Robust

21. Resources

22. Resources
Extensions & Applications:
• NoCoffee Chrome Extension (Google)
• Accessibility Developer Tools (Google)
• Color Contrast Analyzer (Google)
• AInspector Sidebar (Firefox)
• WAVE Accessibility Extension 1.0.4 (Firefox)
• A-Tester WGAC 2.0 (Google)
• CKEditor 4 (Non-Browser Download)
General Information:
• WebAIM.org (Visual)
• Designing for Performance – Lara Callender Hogan
• Designing Web Navigation – James Kalbach
• 25 Accessibility Tools (Updated 4/17)
• WAI-ARIA Introduction Information