wcag is not scary any more a11y camp 2016
TRANSCRIPT
![Page 1: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/1.jpg)
WCAG is not scary any more...A11y Camp July 2016, Melbourne
Herin Hentry, Accessibility Testing Services, Planit Software Testing
![Page 2: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/2.jpg)
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?
![Page 3: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/3.jpg)
WCAG 2.0 – A Jigsaw puzzle?
![Page 4: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/4.jpg)
WCAG 2.0 – Resolved puzzle
![Page 5: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/5.jpg)
How to assemble Jig-Saw puzzle
![Page 6: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/6.jpg)
Applying Jigsaw puzzle concept to WCAG
![Page 7: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/7.jpg)
WCAG Quick Reference
![Page 8: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/8.jpg)
A Simple & Handy Tool
![Page 9: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/9.jpg)
How do we integrate this into a simple Web development
process?
![Page 10: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/10.jpg)
Discovery ProcessContent IdentificationStructure IdentificationLayout the page / WireframeDesign sample pagesCreate Web Style GuideIntegrate ContentDevelopTest
Web development process
![Page 11: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/11.jpg)
Discovery Process
2.4.5 Multiple LevelsSite-wide searchLinks to navigateTable of ContentsSite Map
2.4.2 Page TitledUniqueDescriptiveFront-loadedIdentifies grouping
Discovery Process
![Page 12: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/12.jpg)
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
![Page 13: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/13.jpg)
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
![Page 14: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/14.jpg)
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
![Page 15: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/15.jpg)
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.
![Page 16: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/16.jpg)
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.
![Page 17: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/17.jpg)
1.4.3 Colour Contrast (Minimum)
Ref: https://accessibility.oit.ncsu.edu/tools/color-contrast/
![Page 18: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/18.jpg)
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
![Page 19: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/19.jpg)
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
![Page 20: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/20.jpg)
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
![Page 21: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/21.jpg)
Development
2.1.1 Keyboard2.1.2 No Keyboard Trap2.2.1 Timing Adjustable3.2.1 On Focus
![Page 22: Wcag is not scary any more a11y camp 2016](https://reader035.vdocuments.mx/reader035/viewer/2022070512/588b21ea1a28abed688b4f5b/html5/thumbnails/22.jpg)
What makes an Website Accessible?
Thank you!