Agile and Accessibility

Water and Oil?

Herin Hentry OZeWAI Conference 2016 (Canberra)

About me

- Herin Hentry- Web Accessibility Test Consultant- NSW Department of Education and Communities- Closely work with frustrated developers with a smile - Trying to learn, share my knowledge and educate at the

same time- Upset as Accessibility is still an after thought

• I am not an Agile Practitioner

• I may not talk about agile manifesto or principles much • This work is a project in progress

• This presentation is not about improving agile processes

• This is focussed on incorporating accessibility

About the talk

• I assume everyone has come across Agile at a point

But still…Cannot start without “The Manifesto”Especially when the title is Agile…

• A11y is about users• Agile is about usersButWhy they seem hard to go together?

What others say…• UI/UX design not part of agile• User stories for A11y is excessive• Interpretation of A11y is not uniform

across team• Sprint starts from Day 1 and hence

not enough time for learning• Designers and Developers do not pair

at design. Hence more rework• Too hard to think about users• WCAG is a long list• A11y is new to me• …* A11y - Accessibility

What are we doing about this?

How do we tackle this???

A11y is pushed for later as functionality and feature takes priority

If we leave not treating A11y issues for longer without addressing…

It will go Viral….

Tab index and focus issues

Text Resize issues

Missing Labels issue

Colour Contrast issue Styles issue

On Change triggers…

So what do we do???

Treat them at early stagePrevent issues from occurring

Agile

What’s before backlog?

Inception phase(Iteration 0)

A11y at inception phase• Resource team with A11y experts• Train / Educate / provide refresher workshop• Perform feasibility analysis of CMS &

frameworks for accessibility support• Choose the right semi-automated tools• Remind the team of best practices• Believe in your team• And keep Motivating and be Supportive…

Agile team / A11y ResourcingProject Manager

Scrum MasterUI / UX Team

Development TeamTest team

User Experience Testers

Cross functional team+

User Experience Testers

Training…

Provide initial training …

Customised training after few iterations…

Defect based training after few releases…

Issues demo / Screen reader demos…

Feasibility Analysis & ToolsCMSCreate this support creation of accessible content as per HTML semantics?• Heading structure• Tables with proper HTML tags• Styles maintained through style sheets (colour, font, font size etc.) • Lists can be created• Alt text support• Forms and information relationship supportIf Templated, is the template accessible?Support on the fly unit testing for readability, accessibility, spell check?

FrameworkCode reusability & MaintainabilityWidgets are/can be made accessibleAria support

Accessibility is not just WCAG. But, moving forward I am focussing on

WCAG…But, before that… Let’s see a user story

What is a User Story?

As a <role>I want <goal>

so that <benefit>

An Accessibility user story an AT user

As keyboard-only screen reader user,I want to understand the form fields

so that I can submit the course enquiry form to receive course related information

This user story answers…As keyboard-only screen reader user,I want to understand the form fieldsso that I can submit the course enquiry form to receive course related information

• Who?• What?• Why?

It starts a conversation about…• When? • Where? • How?• Which? • Whom?

• Availability of form fields• Positioning of form fields / Sequence• Form mode / browse mode• Is Label enough or further information need• Status of form fields• How about validation results• How can I prevent errors

How to initiate this conversation?WCAG

1.3.1 Info and Relationships1.3.2 Meaningful Sequence1.4.1 Use of Colour1.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

A Functional User Story?

As a <role>I want <goal>

so that <benefit>

An general user story can be

As non-logged in user,I want to submit the course enquiry form

so that I can receive course related information

Can the same checklist be used?WCAG

1.3.1 Info and Relationships1.3.2 Meaningful Sequence1.4.1 Use of Colour1.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

Take away point… 1• Try to incorporate accessibility thinking in

every functional user story. • sneak in the right conversation at the right

time.• Have a quick reference guide open / a

checklist printed with you at design plans and sprint plans.

• Annotate / create tasks based on the A11y conversation

Over all Agile & Accessibility…• Identify design considerations• Identify what can be followed up as Ruleset• What can be followed by style guide• What can be followed by User stories• At which level this can be implemented• Things that can go into Regression• Things that go into Definition of done• Things that go into acceptance criteria

Over all Agile & Accessibility…• Identify design considerations• Identify what can be followed up as Ruleset• What can be followed by style guide• What can be followed by User stories• At which level this can be implemented• Things that can go into Regression• Things that go into Definition of done• Things that go into acceptance criteria

Template / Site Level• 3.1.1 Language of Page• 2.4.2 Page Titled• 2.4.7 Focus Visible• 2.4.1 Bypass Blocks• 2.4.5 Multiple Ways• 1.4.3 Contrast (Minimum)• 1.3.3 Sensory Characteristics• 3.2.3 Consistent Navigation• 1.4.4 Resize text – Maintain Consistency

Page Level

• 2.4.3 Focus order – Source code order• 1.3.1 Info and Relationships• 1.3.2 Meaningful Sequence• 2.4.6 Headings and Labels• 3.2.4 Consistent Identification• 3.3.2 Labels and Instructions

Component/Content Level (UI level)

• 1.1.1 Non-text Content• 1.4.5 Images of Text• 1.3.1 Info and Relationships• 2.1.1 Keyboard• 2.4.4 Link Purpose (In Context)• 1.4.1 Use of Color

Code level

• 3.2.1 On Focus• 3.2.2 On Input• 3.3.1 Error identification• 4.1.1 Parsing• 4.1.2 Name, Role, Value

• Text box• Can this be single / married to be meaningful? • Is this part of a family?

Derive Component thinking

• What happens if one of the family member is unhappy?• What happens if both are not happy?

• How is the correction scenario tackled?• Where did the focus come from?• Where is the focus going to next? (available/not)

Derive Component thinking – Cont..

How does this component interact with• With Vision• With out vision• With colour vision• With out colour vision• With Audibility• Without audibility• How easy to handle with one finger keyboard

activity

Component interaction…

A11y responsibility breakdown

Take away point… 2

• Teaching your child how to interact with others is easier that imagining how others interact with your child, because you are close to your child

• Thinking about your component is easier at times• Do not forget to put yourself in the shoes of different

persona and do user experience testing• Breakdown responsibilities

Summary…

• Include A11y early than remediation• Sneak in A11y where ever you can• Find the design considerations at early level• Include in each phase• Think differently

Thank you!

Questions?

Thanks to• Shaji Mohammed, IAG• Leanne Howard, Planit• Jorge Carillo, Prague university• OZeWAI