Accessible by default: Shift accessibility left Requirements around accessibility and inclusivity are often overlooked all together or until just before, if not just after, the release of software. Not only are accessible experiences a legal requirement, they also improve the usability of applications for everybody, so why is it still an afterthought? This talk will explore how accessible practices can be embedded into the development lifecycle and become the default way of working. Speaker: Katie Peterson, Senior Software Developer, Thoughtworks Katie is a senior software developer and community lead for the internal Thoughtworks Asia Pacific frontend community. Katie joined Thoughtworks as a graduate developer after undergoing a career change. She loves how coding allows her to build creative solutions that solve real-world problems and how technology is constantly evolving. She's passionate about the future of frontend technologies and making products that are inclusive. Katie's also passionate about how teams can use their time more efficiently to deliver practical results and improve ways of working without trading off against future sustainability.

1. © 2022 Thoughtworks | Confidential
By
Thoughtworks
1

2. © 2022 Thoughtworks | Confidential
By Thoughtworks
Accessible by default: Shift
accessibility left
2

3. © 2022 Thoughtworks | Confidential
Katie Peterson
3
User research and
design
Full stack
development

4. "The power of the Web
is in its universality.
Access by everyone
regardless of disability
is an essential aspect."
Tim Berners-Lee, W3C
1997
4

5. Web Content Accessibility Guidelines

6. Who is disabled?
6
Permanent Temporary Situational
All of us at some point in our lives.

7. Disabilities have many different forms
Permanent
Being born blind
Temporary
Needing to wear
glasses or
contacts.
Situational
Sun is shining
heavily on
screen.

8. Closed captions CC

9. The curb-cut effect

10. Free advertising

11. 11
The Australian
Disability
Discrimination Act
makes it illegal to
treat people unfairly
because of disability.

12. 96.8% of websites
aren't completely
accessible
WebAIM (2022)
12

13. Shift left in the product life-cycle
Maintain and evolve
Design and build
Research
Accessibility

15. The myth of the average user
15
Disabled
Over 65
Distracted
Target
Mobile
users
> 65

16. “I want to continue
learning and
developing my
technical skills in a
supportive
environment.”
Grad Persona
Personal story
● Recently graduated
software engineer
● Lives in Wollongong
● Looking for their
first professional
job in tech
Name: Emma
Goals
● To get a job as a full-stack developer
● Learn from experienced developers
● Find a job with learning and career opportunities
● Ability to work from home or have flexibility around
days spent in the office
Age: 24 Occupation: Developer
Frustrations / Pain points
● Many grad roles require in person interviews
● Not many grad roles in Wollongong
Tech capabilities
● Uses a Google Pixel
phone
● Interested in
android
development

17. Grad Persona: Hearing impaired
Personal story
● Recently graduated
software engineer
● Lives in Wollongong
● Looking for their first
professional job in
tech
Hearing impaired,
uses cochlear
implant
Goals
● To get a job as a full-stack developer
● Learn from experienced developers
● Find a job with learning and career opportunities
● Ability to work from home or have flexibility around
days spent in the office
Frustrations / Pain points
● Many grad roles require in person interviews
● Not many grad roles in Wollongong
When closed captions are not turned at the start
of conference calls, it is impossible to follow the
conversation
Tech
capabilities
● Uses a Google
Pixel phone
● Interested in
android
development
Name: Emma Age: 24 Occupation: Developer
“I want to continue
learning and
developing my
technical skills in a
supportive
environment.”

18. Grad Persona: Austistic
Personal story
● Recently graduated
software engineer
● Lives in Wollongong
● Looking for their first
professional job in
tech
Diagnosed with
autism as a teen and
has mild symptoms
Goals
● To get a job as a full-stack developer
● Learn from experienced developers
● Find a job with learning and career opportunities
● Ability to work from home or have flexibility around
days spent in the office
Frustrations / Pain points
● Many grad roles require in person interviews
● Not many grad roles in Wollongong
Interviews can be emotionally draining because it
can be hard to engage in casual “getting to know
you” conversations.
I struggle to understand ambiguous language,
idioms and metaphors.
Tech
capabilities
● Uses a Google
Pixel phone
● Interested in
android
development
Name: Emma Age: 24 Occupation: Developer
“I want to continue
learning and
developing my
technical skills in a
supportive
environment.”

19. Shift left in the product life-cycle
Maintain and evolve
Design and build
Research
Accessibility

20. Set a baseline

21. Data driven
approach

22. Low contrast text
Alma Media
Producing the next
journalistic masterpieces
with machine learning

23. Ambiguous links

24. Poor alt text

25. Heading hierarchy
First
heading
is H3

26. Null alt text

27. Accessibility delivery
in action
27
● Cross functional
requirements (CFR)
○ “The system shall be
accessible to comply
with WCAG 2.1
standards”

28. Incorporate into stories
28
> Imagine you want to buy a pair of
shoes. How do you select the shoes
and put it into your shopping cart?
Given a user is on the homepage
When they navigate to “Explore
careers with us” link
Then they should be taken to the
careers page
Accessibility acceptance criteria:
● Be focusable with a keyboard (WCAG
2.1.1)
● Indicate when it has keyboard focus
(WCAG 2.4.7)
● Inform the user where the link will
take them when clicked (WCAG
2.4.4)

29. Use only a keyboard
Default accessibility
practices Test with a screen reader
Check page structure
Sufficient colour contrast
Use tooling
Automate testing
Following these practices will help build
a robust user experience

30. Use only a keyboard
● All elements are
reachable and usable via
keyboard
● All elements have a clear
focus indicator
● TAB order is logical

31. Keyboard
focusable

32. Use a screen reader
> Imagine you want to buy a pair of
shoes. How do you select the shoes
and put it into your shopping cart?
● Elements are reachable,
understandable and usable
● All images and multimedia
has alt text
● Navigation is logical

33. Descriptive
link

34. Page structure
● Use heading hierarchy
○ <h1> ⇒ <h6>
● Use aria labels for interactive
elements
● Separate structure and
meaning from style
● Turn off your CSS
○ Headings map, web developer
chrome plugins

35. ● Check for sufficient color
contrast
○ Stark or built in colour
contrast in the browser
● Use additional colour
independent indicators like
text or shapes
What does it look like?

36. Sufficient
contrast

37. Use tooling

38. Tools for automated a11y testing
Like other types of testing, by shifting left, you can identify accessibility issues early.
Linters Unit tests
Pipeline
tests
E2E tests

39. Whose job is it anyway?
Automated
testing
Manual
testing
Accessible
design
Disability
research
User
testing
HTML &
CSS

40. Shifting Accessibility Left
● Adopt a data-driven
approach to accessibility
and use tooling that is
already available
● Build accessibility into the
product workflow
● Provide role specific
guidelines and training

41. What can you do
today?
41
● Alt text on your social
media today
● Install a free browser based
accessibility tool

42. In summary
● Promote the value of accessibility to your leadership
● Bring real data about your disabled users into discovery
● Define your default practices and ways of working for accessibility
● Identify responsibilities for accessibility within your team
● Address your capability gaps with training

43. “When you do disability
accessibility, you’re not
doing charity. You’re
giving powerful work
that helps your
organization grow. It
helps you reach more
customers and it drives
revenue.”
43
Haben Girba
Author and disability rights activist
Image: https://habengirma.com/

44. © 2022 Thoughtworks | Confidential
Questions?
44