wcag is not scary any more a11y camp 2016
TRANSCRIPT
WCAG is not scary any more...A11y Camp July 2016, Melbourne
Herin Hentry, Accessibility Testing Services, Planit Software Testing
Why this title?
Hi Herin, How are you? Long time. How’s your work and family?. I am facing a problem with my project.
We are developing a web application for a NGO and were asked to make it WCAG Level AA compliant.We struggled to train the team to implement it. WCAG looks pretty scary.We tried to change the theme & layout of pages and forms.But, We had to Go-live due to time constraints without ticking off WCAG. Is there a way to introduce WCAG as part of the development process? I would like to discuss with you about the possible options to try. We will be starting another project in 3 weeks’ time. So need to have a plan in place. Please let me know if you are available for a google hang out?
WCAG 2.0 – A Jigsaw puzzle?
WCAG 2.0 – Resolved puzzle
How to assemble Jig-Saw puzzle
Applying Jigsaw puzzle concept to WCAG
WCAG Quick Reference
A Simple & Handy Tool
How do we integrate this into a simple Web development
process?
Discovery ProcessContent IdentificationStructure IdentificationLayout the page / WireframeDesign sample pagesCreate Web Style GuideIntegrate ContentDevelopTest
Web development process
Discovery Process
2.4.5 Multiple LevelsSite-wide searchLinks to navigateTable of ContentsSite Map
2.4.2 Page TitledUniqueDescriptiveFront-loadedIdentifies grouping
Discovery Process
Content Identification
Content Check list
Articles/Blog
Banner advertising
Discussion forum
Documents
E-commerce
Forms for contact, quotes
Physical products
Digital content
Email newsletter
Event calendar
Event registration
Image gallery
Link management
RSS Feeds
Social media sharing links
Staff directory
Structure Identification
Structure is how elements and components of an interface are grouped, defines relationships between those elements and components and is the domain of information architect 1.3.1 Info and Relationships
1.3.2 Meaningful Sequence1.3.3 Sensory Characteristics2.4.1 Bypass Blocks2.4.3 Focus Order2.4.6 Headings and Labels3.2.4 Consistent Identification4.1.1 Parsing4.1.2 Name, Role, Value
Layout the page (Wireframes)
3.2.3 Consistent Navigation1.4.4 Resize text
Layout is concerned with emphasis, proportions, and placement and is the domain of the visual designer
Design Home Page + Internal Page
1.4.1 Use of Color
Web design itself refers to the process of creating a web page’s appearance and to the choice of a right colour scheme, fonts and confirming layout.
Web Style Guide
All1.4.3 Contrast (Minimum)
Controls 1.3.1 Info and Relationships2.4.7 Focus Visible3.3.1 Error Identification
A style guide is where proper planning shines. A style guide determines and defines all the design, layout, interactive and type elements used throughout the website.
1.4.3 Colour Contrast (Minimum)
Ref: https://accessibility.oit.ncsu.edu/tools/color-contrast/
Individual Pages with content
3.1.1 Language of Page3.1.2 Language of Parts
1.3.1 Info and Relationships1.3.2 Meaningful Sequence2.4.4 Link Purpose (In Context)2.4.6 Headings and Labels3.3.2 Labels or Instructions
Content based success criteria
Images1.1.1 Non-text Content1.4.5 Images of Text
Media1.1.1 Non-text Content1.2.1 Audio-only and Video-only (Pre-recorded)1.2.2 Captions (Pre-recorded)1.2.3 Audio Description or Media Alternative (Pre-recorded)1.2.4 Captions (Live)1.2.5 Audio Description (Pre-recorded)1.4.2 Audio Control
Flashing / Moving2.2.2 Pause, Stop, Hide2.3.1 Three Flashes or Below Threshold
Form based success criteria
1.3.1 Info and Relationships1.3.2 Meaningful Sequence1.4.1 Use of Color1.4.3 Contrast (Minimum)2.1.1 Keyboard2.1.2 No Keyboard Trap2.4.3 Focus Order2.4.6 Headings and Labels
3.2.1 On Focus3.2.2 On Input3.2.4 Consistent Identification3.3.1 Error Identification3.3.2 Labels or Instructions3.3.3 Error Suggestion3.3.4 Error Prevention (Legal, Financial, Data)4.1.2 Name, Role, Value
Development
2.1.1 Keyboard2.1.2 No Keyboard Trap2.2.1 Timing Adjustable3.2.1 On Focus
What makes an Website Accessible?
Thank you!
