is it wcag 2.0 compliant?

Rabab Gomaa - Web Accessibility SpecialistDecember, 6th 2014

https://ca.linkedin.com/in/rubydo

Learn how to measure and report on the accessibility compliance of a web page against WCAG 2.0 AA checkpoints

What is WCAG 2.0 WCAG 2.0 Quick Reference WCAG 2.0 AA Report Verification Tools Screen Reader Test Summary &Questions Period

WCAG 2.0 is a stable, referenceable technical standard for web accessibility.

WCAG in Governmental Standards◦ Ontario Government:

Accessibility for Ontarians with Disabilities Act (AODA)

◦ Federal Government:Standard on Web Accessibility

WCAG 2.0 Reference: http://www.w3.org/WAI/intro/wcag

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report

. Verification Tools

. Screen Reader Test

WCAG 2.0 has 38 success criteria covering level A, AA organized under 1. Perceivable (4 guidelines)2. Operable (4 guidelines)3. Understandable (3 guidelines)4. Robust (1 guideline)

Level AA conformance for a webpage, means that the page satisfies all 38 Success Criteria (level A, AA).

WCAG 2.0 Reference: http://www.w3.org/WAI/intro/wcag

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



A customizable quick reference to WCAG 2.0

http://www.w3.org/WAI/WCAG20/quickref/(Google `WCAG quick ref`)

Most people use it as the main resource for working with WCAG.

Screenshot from: http://www.w3.org/WAI/WCAG20/quickref/

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Screenshot from: http://www.w3.org/WAI/WCAG20/quickref/

Success Criteria 2.1.1

Link to Understanding

Sufficient Techniques

Failures

G202: General Technique

H91: HTML and XHTML

Technique

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



WCAG 2.0 Assessment http://www.tbs-sct.gc.ca/ws-nw/wa-aw/wa-aw-assess-methd-eng.asp(Google `WCAG methodology TBS`)

Step1: For each Success Criteria, verify that ◦ Sufficient techniques are

implemented◦ Failures are avoided

Step 2: Mark Path, Fail, or N/A

Step 3: Write the failures

Screenshot from: http://www.tbs-sct.gc.ca/ws-nw/wa-aw/wa-aw-assess-methd-eng.asp

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Note: ◦ The number of Success Criteria passed is the total number of PASS and N/A.

Screenshot from: http://www.tbs-sct.gc.ca/ws-nw/wa-aw/wa-aw-assess-methd-eng.asp

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Failure 2.1.1 Keyboard (Level A):- Use of drag and drop without support for "cut" and "paste" buttons to move objects.

Ref- G202: Ensuring keyboard control for all functionality

Screenshot from: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

Reference specific WCAG link

Location and description of

failure

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Sample of WCAG Report Documentation

Screenshot from: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Firefox Extensions1. Wave Toolbar 2. Web Developer

Total Validator Pro Application Manual Verification

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



WCAG technique/Failure◦ H42: Using h1-h6 to identify

headingsFailure: headings (h3) do not follow a logical order

Success Criteria(s) ◦ 1.3.1 (Info and Relationships)

Screenshot from: http://www.redcross.ca/what-we-do/global-health

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



WCAG technique/Failure◦ H44: Using label elements to associate text labels with form controls

Failure: Label is not associated with the related input field (missing for attribute)

Success Criteria(s) ◦ 1.1.1 (Non-text Content)◦ 1.3.1 (Info and Relationships)◦ 3.3.2 (Labels or Instructions)◦ 4.1.2 (Name, Role, Value)

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Reference: http://www.w3.org/TR/WCAG20-TECHS/H44.html

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Screenshot from: http://www.octranspo1.com/tickets-and-passes/tickets_and_cash

CSS: Display All styles Outline: Table, Table Cells, Headings

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



• TVP checks webpages for WCAG, parsing and link problems.

Screenshot from: Total Validator Pro application Website: https://www.totalvalidator.com/

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



• Web Report


. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



• Web Report – Type of Errors


. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Testing Method◦ The keyboard tab key to verify that tab order follows relationships in the content.

Related WCAG technique/Failure◦ H4: Creating a logical tab order through links, form controls, and objects◦ F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order

that does not preserve meaning and operability

Related Success Criteria(s) ◦ 2.4.3 (Focus Order)

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Commonly used Screen Readers: JAWS , Window-Eyes , NVDA ( open source)

JAWS ShortcutsItem Shortcut

List of headings (h1-h6) Insert + F6

List of Links Insert + F7

List of tables Insert + Ctrl + T

Move from cell to cell Ctrl+alt+ arrow in table

Associated headers in a cell Ctrl + Alt + 5

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



Scenario: Getting para-transpo fare information from

OCTranspo website at http://www.octranspo1.com/tickets-and-passes/tickets_and_cash

. What is WCAG 2.0

. WCAG Quick Ref

. WCAG Report



WCAG 2.0 is a referenceable standard to measure web accessibility

Reporting on WCAG AA compliance process requires assessing the page against 38 success criteria

WCAG evaluation tools include Wave and Web developer and Total Validator Pro

Screen reader testes are useful to measure compliance of some elements

Firefox Extensions: - Wave Toolbar- Web Developer Toolbar- WCAG Contrast Checker- Fangs Screen Reader Emulator - Firebug

Rabab Gomaa - Web Accessibility SpecialistDecember, 6th 2014

https://ca.linkedin.com/in/rubydo

Validation Tools:- Total Validator Pro- W3C validation service: http://validator.w3.org/

Resources when working with WCAG 2.0:- WCAG Quick ref.: http://www.w3.org/WAI/WCAG20/quickref/- WCAG Assessment Methodology Checklist: http://www.tbs-sct.gc.ca/ws-nw/wa-aw/wa-aw-assess-methd-eng.asp-How People with Disabilities Use the Web: http://www.w3.org/WAI/intro/people-use-web/Overview

is it wcag 2.0 compliant?

Internet