2. 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
3. • 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
5. • A11y is about users
• Agile is about users
But
Why 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
6. What are we doing about this?
How do we tackle this???
A11y is pushed for later as functionality and feature takes priority
7. If we leave not treating A11y issues for
longer without addressing…
It will go Viral….
8. Tab index and focus issues
Text Resize issues
Missing Labels issue
Colour Contrast issue Styles issue
On Change triggers…
9. So what do we do???
Treat them at early stagePrevent issues from occurring
15. 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…
16. Agile team / A11y Resourcing
Project Manager
Scrum Master
UI / UX Team
Development Team
Test team
User Experience Testers
Cross functional team
+
User Experience Testers
17. Training…
Provide initial training …
Customised training after few iterations…
Defect based training after few releases…
Issues demo / Screen reader demos…
18. Feasibility Analysis & Tools
CMS
Create 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 support
If Templated, is the template accessible?
Support on the fly unit testing for readability, accessibility, spell check?
Framework
Code reusability & Maintainability
Widgets are/can be made accessible
Aria support
19. Accessibility is not just WCAG. But,
moving forward I am focussing on
WCAG…
But, before that… Let’s see a user story
20. 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
21. This user story answers…
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
• Who?
• What?
• Why?
22. 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
23. How to initiate this conversation?
WCAG
1.3.1 Info and Relationships
1.3.2 Meaningful Sequence
1.4.1 Use of Colour
1.4.3 Contrast (Minimum)
2.1.1 Keyboard
2.1.2 No Keyboard Trap
2.4.3 Focus Order
2.4.6 Headings and Labels
3.2.1 On Focus
3.2.2 On Input
3.2.4 Consistent Identification
3.3.1 Error Identification
3.3.2 Labels or Instructions
3.3.3 Error Suggestion
3.3.4 Error Prevention (Legal, Financial, Data)
4.1.2 Name, Role, Value
24. 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
25. Can the same checklist be used?
WCAG
1.3.1 Info and Relationships
1.3.2 Meaningful Sequence
1.4.1 Use of Colour
1.4.3 Contrast (Minimum)
2.1.1 Keyboard
2.1.2 No Keyboard Trap
2.4.3 Focus Order
2.4.6 Headings and Labels
3.2.1 On Focus
3.2.2 On Input
3.2.4 Consistent Identification
3.3.1 Error Identification
3.3.2 Labels or Instructions
3.3.3 Error Suggestion
3.3.4 Error Prevention (Legal, Financial, Data)
4.1.2 Name, Role, Value
26. 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
27. 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
28. 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
32. 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
33. 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
34. 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
35. • Text box
• Can this be single / married to be meaningful?
• Is this part of a family?
Derive Component thinking
36. • 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..
37. 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…
39. 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
40. 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