wcag is not scary any more a11y camp 2016

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!

hhentry@planittesting.com

Twitter : @HerinHentry

LinkedIn : https://au.linkedin.com/in/herinhentry

hhentry@planittesting.com

Twitter : @HerinHentry

LinkedIn : https://au.linkedin.com/in/herinhentry

hhentry@planittesting.com

Twitter : @HerinHentry

LinkedIn : https://au.linkedin.com/in/herinhentry