The journey from making designs accessible, using best patterns, and implementing those in an agile way into the products. We are tackling a challenge of unifying eight+ tools under the same brand, bringing the way to work fast and build consistency into the products and our customer’s experience. – accessibility in product (basic color and keyboard accessibility) – What is design system ? (design pattern library (UI Kit), code components and documentation)

2. Who am I
During the last 15 years, I went through a journey
of "make it pretty" and serving developers with
assets, to the many opportunities that lead me to
be a part of teams responsible for solving complex
business problems through innovation, design
thinking, and applying Agile methodologies.
I am a Senior UI/UX and
interaction designer who is
passionate about code.
Working as a senior product designer @digita.ai
Bojan Kocijan

3. Make a product accessible
in its DNA
It is not just Designer's job

4. For whom are we
making product
accessible?
- Blind users
- Low-vision users
- Color blind users
- Deaf and hard-of-hearing users
- Physical disabilities
- Users with cognitive disabilities
- Everyone*

5. Users with
disabilies
Accessibility standards not only helps
users with disabilities, it provides better
user experiences for everyone.
Blind users
● Globally the number of people of all
ages visually impaired is estimated to be
285 million, of whom 39 million are
blind.
● People 50 years and older are 82% of
all blind.
● The major causes of visual impairment
are uncorrected refractive errors (43%)
and cataract (33%); the first cause of
blindness is cataract (51%).
● Visual impairment in 2010 is a major
global health issue: the preventable
causes are as high as 80% of the total
global burden.
World Wide Health Organisation

8. How to design
for blind users?
How users might experience our
products
● May use a screen reader
● May rely on Braille output
● Cannot be expected to use a
pointer or mouse for input

9. How to design for
Low-vision
users?
How users might experience our
products
● May use a screen reader
● May use screen magnifiers
● May use high-contrast modes or
other type of displays
● May have their browser font size
scaled larger
● May not use adaptive technology

10. How does this
affect everyone?
● Have you ever tried to read a blog post
outside when the sun is out? Users are not
always in the most optimal lighting,
increasing contrast can help users
consume the content presented much
easier.
● As stated above, people 50 years and older
are 82% of all blind. It is also true that
around age 40 vision gradually degrades
over time so good contrast best practices is
critical to keeping our users engaged.

11. Color blind
users
Colour (color) blindness (colour
vision deficiency, or CVD) affects
approximately 1 in 12 men (8%)
and 1 in 200 women in the world
How users might experience our
products
● May not be able to discern certain colors
like primary and secondary actions
● Text and call to actions may not be
legible
● May rely on other methods other like
labels and status callouts rather than
color to consume of the information.
Color Blind Awareness

12. How to design for
color blind users?
Design Considerations
● Digital.ai themes strive to comply to
WCAG 2.1 AA for contrast. This is the
primary reason why our product colors
differ at the application level from our
branding colors. Careful consideration
and thought has been put into this.

14. Why did we differ
from our brand
colors?

15. We are using
blue as our
Primary CTA
color, why?
Tritanopia
Tritanopia
● Tritanopia, is the least common and
refers to sufferers who struggle to
distinguish blue or yellow light.

16. We are using
blue as our
Primary CTA
color, why?

17. We are using
blue as our
Primary CTA
color, why?

18. How to design for
color blind users?
Red-green are most common
color blindess
The most common type of color blindness
makes it hard to tell the difference
between red and green.
● Always pair icons with destructive action for
color blind users. (and it helps everyone to
see the action faster)

19. Interesting fact?
Traffic lights in Japan
Japanese government assures that us that it
actually just a very blue shade of green —
green enough to satisfy international
regulations, blue enough to still be called ao.
Source: JapanBlueTrafficLights

20. Deaf and hard-
of-hearing users
How users might experience our
products
● May rely on closed captioning and other
alternative representation of audio.
Design Considerations
● Transcribe and caption videos and
animations that have meaningful audio.
● Augment the audio experience with
visual presentations when meaningful
content needs to be communicated.

21. Physical
disabilities
How users might experience our
products
● May rely on keyboards, track balls, voice
recognition, and other assistive
technologies.
● May not be able to use a keyboard,
mouse or other pointers
Design Considerations
● Design for keyboard interactions in
mind
● Learn to navigate using a keyboard
and spend time navigating the web
and digital products using only the
keyboard.

22. Users with
cognitive
disabilities
Functional cognitive disabilities
can result in many forms:
● Memory
● Problem solving
● Attention
● Reading and vernal comprehension
● Mathematics
● Visual comprehension
How users might experience
our products
● May have limited working memory
and may need information to remain
visible through task completion.
● May experience unintended seizures
or other complex reactions to flashing
content due to their specific condition.

23. It is a team effort
Who should be involved
- PM’s and business to identify the need
- Designers to implement color contrast in
pattern library and designs
- Designers and Developers to document
patterns and components
- Developers to develop components
- QA’s to test for accessibility

24. What is our proccess:
Pattern library Code library Documentation
Figma Storybook
GitHub
ZeroHeight
* Or any other toolset of your choice

25. Product accessibility in its DNA

26. Documentation

27. Documenting components
- Usages
- Document anatomy
- States
- Do’s and Don'ts
Designers part
- Color contrast
- Focus states
- Communication with developers

28. Developers part
- Appropriate roles
- ARIA attributes
- Tab indexing

29. QA’s part
- Automated tests for color
contrast
- Keyboard navigation test
- Manual (or automated) tests for
Text to speach

30. How would you describe this
presentation in 3 words?
- Go to menti.com and use the code 3271 2137
- Copy link https://www.menti.com/wdg2x96kbi
- Just scan QR code with your phone

31. Thank you!
Email: kocijan@gmail.com
LinkedIn: https://www.linkedin.com/in/bojankocijan/