Upload
rabab-gomaa
View
92
Download
1
Embed Size (px)
Citation preview
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
Firefox Extensions1. Wave Toolbar 2. Web Developer
Total Validator Pro Application Manual Verification
. What is WCAG 2.0
. WCAG Quick Ref
. WCAG Report
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
Reference: http://www.w3.org/TR/WCAG20-TECHS/H44.html
. What is WCAG 2.0
. WCAG Quick Ref
. WCAG Report
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
• 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
. Verification Tools
. Screen Reader Test
• Web Report
Screenshot from: Total Validator Pro application Website: https://www.totalvalidator.com/
. What is WCAG 2.0
. WCAG Quick Ref
. WCAG Report
. Verification Tools
. Screen Reader Test
• Web Report – Type of Errors
Screenshot from: Total Validator Pro application Website: https://www.totalvalidator.com/
. What is WCAG 2.0
. WCAG Quick Ref
. WCAG Report
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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
. Verification Tools
. Screen Reader Test
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