Designing for Accessibility with Accessibility in Mind #bigd19

Janelle Arita, Jenny Lanier, and Steven Raden
IBM Design
Designing for Accessibility 
with Accessibility in Mind

3 IBM IBM Conﬁdential / © 2019 IBM CorporationEnterprise Design Thinking
Take Snapshot
All security groups
ActiveSecuritygroupname
Id: 4d528a48-a620-11e8-98d0-529269fb1459 5 rules remaining 2 interfaces remaining||
Rules
Attached Interfaces
(105603…smith)Catalog Docs Support ManageIBM Cloud
ValueProtocolDestination
Items per page: 10 | 1 of 10 of 11 items 1 of 2 pages 1
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
UDP
Any
TCP
Any
200
Any
800
22 – 85
Search
Search Add ruleEdit rulesRefresh
Add ruleEdit rulesRefresh
Inbound rules
Outbound rules
ValueProtocolSource
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
UDP
TCP
Any
UDP
TCP
Any
UDP
Any
TCP
Any
Any
22 – 80
39
Any
8001 – 8051
22
53
Any
800
22 – 85
123e4567-e89b-12d3-a456-426655440000

5 IBM Nick Hahn + Jenny Lanier IBM Conﬁdential / © 2019 IBM CorporationEnterprise Design Thinking
People with vision impairments use screen
readers like JAWS to engage with computers.
Job
Access
With
Speech
JAWS Screenreader

Insert steven’s video
(can’t do over iCloud unless under 50 mb)
https://ibm.box.com/s/u8zmp7lz610dyskpe2h7h513ogflro7v

Take Snapshot
All security groups
Protocol
UDP
TCP
Any
UDP
TCP
Any
ICMP
Any
TCP
Any
Value
Any
22 – 80
Any
8001 – 8051
Type: 5, Code: 10
Any
800
22 – 85
Source
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
CIDR Block
Security Group
CIDR Block
Inbound rules
ValueDestination
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Protocol
UDP
Any
TCP
Any
200
Any
800
22 – 85
Outbound rules
Save
Save
Cancel
Cancel
Save Cancel
From: 20 To: 8051
From: To:20 8051
Rules
Attached Interfaces
Search

Complexity of new pattern was inaccessible via
keyboard navigation
Needed to use a lot of ARIA tags to compensate
for accessibility issues
Reading high level information required a lot 
of steps
Accessibility Issues 
Discovered with JAWS
All security groups
Refresh
Items per page: 10 | 1 of 10 of 11 items 1 of
Protocol
UDP
TCP
Any
UDP
TCP
Any
ICMP
Any
TCP
Any
Value
Any
22 – 80
Any
8001 – 8051
Type: 5, Code: 10
Any
800
22 – 85
Source
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
CIDR Block
Security Group
CIDR Block
Inbound rules
ValueDestination
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Protocol
UDP
Any
TCP
Any
200
Any
800
22 – 85
Items per page: 10 | 1 of 4 of 4 items 1 of
Search Refresh
Outbound rules
From: 20 To: 8051
From: To:20 8051
Rules
Attached Interfaces
Search

© 2019 IBM Corporation
What does it
mean to be
accessible? 10

The ability of everyone,
regardless of disability
or impairment, to have
access to something.
11

Why is
accessibility
important to
IBM?
• Save time and money by solving accessibility issues before
the development team puts design into code.
• Provide for a better user experience for those who live with
vision impairments, which would target current users and
attract potential customers.
• Secure government contracts.

Meet Randy!
Randy Horwitz
Development Manager
Cloud Innovation lab

Take Snapshot
All security groups
Protocol
UDP
TCP
Any
UDP
TCP
Any
ICMP
Any
TCP
Any
Value
Any
22 – 80
Any
8001 – 8051
Type: 5, Code: 10
Any
800
22 – 85
Source
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
CIDR Block
Security Group
CIDR Block
Inbound rules
ValueDestination
Allow_FTP
99.99.99.0/30
101.40.56.0/24
162.244.78.12/24
Protocol
UDP
Any
TCP
Any
200
Any
800
22 – 85
Outbound rules
Save
Save
Cancel
Cancel
Save Cancel
From: 20 To: 8051
From: To:20 8051
Rules
Attached Interfaces
Search

16
IBM Design Thinking 
(in a nutshell)
• Focus on users and their needs
• Treat everything as a prototype
• Co-create with diverse teams
Enterprise Design ThinkingIBM IBM Conﬁdential / © 2019 IBM Corporation

Problem
Statement
How can we better incorporate accessibility 
into the design process so we can enable teammates
with visual impairments to provide actionable
feedback earlier in the process?

• Has a background in web development and
now works on a team of developers for
CloudLand, a cloud computing company.
• Lives with vision impairment and is assisted by
a guide dog.
• Accessibility advocacy is not his primary
responsibility.
• Uses screen readers to give feedback to devs
and design teams.
Martin, Developer Manager

• UX designer at CloudLand.
• Creates wireframes and Invision prototypes to
explain interactions to her development teams.
• Prototypes are tested on a variety of
participants, but generally limited to point-and-
click interactions.
Desi, Designer

• Front-end developer at CloudLand.
• Iterates with Desi and the design team to create
coded, production level, experiences.
• Primary concerns are around a release being
functional and accurate to designs.
Tonya, Developer

Martin cannot give
feedback until later stages
of development, meaning
his input often goes
unaddressed.
26

Desi cannot get Martin’s
feedback on accessibility
because her designs must be
coded before he can use a
screen reader to evaluate them.
27© 2019 IBM Corporation

Developers have to spend
significant time
refactoring designs to
account for accessibility
issues.
28© 2019 IBM Corporation

Engage with
wireframes before
they ever became
live code.

Other
solutions
• Developed prototypes
• Stark
• A11Y Project
• W3C Guidelines
• IBM Accessibility team Sketch plugin [in-progress]

Solutions in
a physical
space
• Embossers
• 3D Printing
• Raised line drawing kits

Enable users to
iterate quickly in a
tactile, accessible
medium.

41 IBM
Phase 1
Material exploration

• Easy for us work with
• Randy could identify
• Reusable materials
• Durable material
• Inexpensive
Needs

Takeaways
• Foam shapes, hot glue, felt, and textured tape were really
easy to work with and we could iterate with them quickly.
They helped communicate interactions on a larger scale.
• The raised line drawing pad was good for drawing micro
details and interactions.

Next Steps • Use these materials to create a pattern library.

50 IBM
Phase 2 
Creating a pattern library

Takeaways
• The pattern library made it easier for us to quickly create
components and helped Randy to better consume.
• The pattern library also allowed the three of us to keep
consistency across our designs.

Next Steps
• Reiterate next round of designs to allow kit to be reusable
• Apply the updated pattern library and kit to test out WIP
designs with the development team

58 IBM
Phase 3 
Using the kit

“I feel like I’m
finally able to give
useful feedback.”
-Randy
67

Feedback from table
session
68
• Add breadcrumbs to help with way-ﬁnding.
• Incorporate table info on side panel since it
hides content on the page.
• Work through delete interaction for a policy
in the table.

Feedback from order
summary design session
71
• Screen-readers can skip over a button if it is
disabled. Recommends keeping buttons enabled
for such a large CTA here (option 2). 
• Preference of being directed to speciﬁcally what is
needing to be ﬁxed through the use of anchor links
(option 1).

Takeaways
• Randy felt empowered to provide feedback early in the
process.
• The kit could be used to quickly assemble designs in a
sustainable and reusable format, in advance or on the fly.
• The whiteboard offered as a nice contrast in texture
• Look into having a more portable whiteboard

73 IBM
Where do we go from here?
?

We’re leaving our current “Make” phase and are re-
entering “Reflect” and “Observe.”
During this “version” of Reflect and Observe, we’re
able to use the kit in more real design scenarios.
This will help us continue improving and expanding
the kit.
We will also be able to measure its concrete value
in making the design process more efﬁcient and
accessible for all players.

Next steps
• Continue to build the kit with additional components
• Start testing the kit with other teams
• Evangelize accessibility co-creation with other teams
• Get additional feedback from those that are vision impaired

Thanks!
Janelle Arita
jarita@us.ibm.com
Jenny Lanier
jenny.lanier@us.ibm.com
Steven Raden
sgraden@us.ibm.com

Designing for Accessibility with Accessibility in Mind #bigd19

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Designing for Accessibility with Accessibility in Mind #bigd19

Similar to Designing for Accessibility with Accessibility in Mind #bigd19 (20)

Recently uploaded

Recently uploaded (16)

Designing for Accessibility with Accessibility in Mind #bigd19