1. Design for
Accessibility
Visual design best practices
Research by:
Yogesh Daphane
Image credit: Pexels

2. “Accessibility is a practice of making the technology
useful for the humans with some special needs.”
Accessibility is ease of use, being inclusive with most of the audience who are able to
perform the task in a different way than normal users.

3. Why accessibility?
• Bigger audience
• Better usability
• SEO friendly
• Faster page download times, cross browser compatibility

4. Why accessibility?
Source:
a. World Health Organization
https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-
2019-facts-and-figures/
b. Centers for Disease Control and Prevention.
https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-
impacts-all.html
• 2 billion disabled people in
the world, that is 37.5% of
the world’s population
• 1/4 in US have some type
of disability

5. Other factors that matters in
accessibility
• Literacy (Design for illiterates/ semi literates)
• Language (Design that considers other language users)
• Infrastructure (Low resolution/ broken devices, slow/ expensive internet connection etc.)
• Next Billion Users by Google (Users who are new to the technology)

6. Bring Accessibility into Design
Typography

7. • Make sure to maintain an appropriate contrast
• Ideal ratio for FG-BG contrast is 4.5:1 and above
Contrast
Active tab Inactive tab Active tab Inactive tab
Check you contrast ratio at https://webaim.org/resources/contrastchecker/

8. Check you contrast ratio at
https://webaim.org/resources/contrastchecker/
Contrast
This is sample text This is sample text
Contrast ratio
7.06:1
Contrast ratio
3.58:1
#999999 The lightest grey
for bold and large titles
#767676
The lightest grey for regular body text.

9. A tedious max
Paragraph
Reading on the screen is not that easy as reading in the actual world. It is very strainful for the eyes. Reading the lengthy
paragraphs can be a tedious task for users. Hence limit the paragraph with up to 800px max.
Make the lengthy paragraphs simple and easy to read as much as you can. Use the
proper readable font size which is recommended to 14px minimum with appropriate
line-height. Limit the paragraph width up to 800px max.
• Text box width: 800px max
• Minimum font size: 14px
• Line-height for body copy: 1.5 times of font size approx.

10. Paragraph
• Maintain an appropriate visual hierarchy
How many people have disabilities
in the world?
WHO has identified over 1 billion disabled people.
Global disability figures
The WHO says that “the number of people with disabilities
is increasing because of the aging of the population and the
increase of chronic diseases”.
A definition of invisible disability
The forms of disability that are not apparent but that impact
the quality of life.
How many people have
disabilities in the world?
WHO has identified over 1 billion disabled people.
Global disability figures
The WHO says that “the number of people with
disabilities is increasing because of the aging of the
population and the increase of chronic diseases”.
A definition of invisible disability
The forms of disability that are not apparent but that
impact the quality of life.

11. Hyperlinks
• Add some visual cues to hyperlinks i.e. underline (Colors should not
be the only visual feedback in accessibility)
This is the highest memory configurations with
up to 12 TB for a single instance. They are well
suited for memory-intensive workloads such as
large in-memory databases like SAP HANA
and in-memory data analytics workloads.
This is the highest memory configurations with
up to 12 TB for a single instance. They are well
suited for memory-intensive workloads such as
large in-memory databases like SAP HANA
and in-memory data analytics workloads.

12. Bring Accessibility into Design
Forms

13. Forms
• Maintain proper spacing and grouping
Full Name
Location
Comment
Full Name
Location
Comment

14. Labels
• Consistently visible labels are helpful for the short term memory issue
Full Name
Location
Comment
Full Name
Location
Comment

15. Labels
• Top aligned label is concluded as the safest approach after research
Full Name
DoB
Full Name
DoB
Full Name
DoB

16. Helper text
• Guide users on the input text/ value wherever possible/ required
Enter your serial number
How to find serial number?
Enter your 10 digit mobile number
OTP will be sent to this number
+91

17. Error messaging
• Color should not be the only variant for the visual feedback
• Make use of effective icons + a proper explanatory helper text
Email
Email
YogeshDaphane YogeshDaphane Please enter a valid email
i.e. sample@email.com
Name
Name
Yogesh Daphane Yogesh Daphane

18. Selected fields
• Form should be completely accessible using keyboard without mouse
• Currently selected field should be highlighted properly
• Colors should not be the only visual feedback
Currently selected field
Currently selected field
Enter your value Enter your value

19. CTAs
• Use a specific term as a label instead the generic ones i.e. Save
• Let users know why they should fill up the form
Name
Email
Register for free
YogeshDaphane@gmail.com
Yogesh Daphane
Name
Email
Submit
Yogesh Daphane
YogeshDaphane@gmail.com

20. • The field size should reflect the amount of text that is expected to be entered eg. pin number
field would be shorter than address line
• Try to combine the fields wherever possible eg. use calendar control instead DD-MM-YYYY
• Form should be completely accessible via keyboard only without mouse
• Assure users that ‘your data is safe with us’, show social proofs
• Minimum tappable area should be 48px
• Acknowledge users properly after form submission
Good to know

21. Bring Accessibility into Design
Imagery

22. Imagery
• Imagery should be representative of a diverse group of humans
Imagery credit: Google
Image credit: RocketSpace

23. Imagery
• SVG images are lightweight, useful for vector assets
• Helpful for the localization & SEO
Image credit: Google search

24. • Easily scannable layouts
• Keep important sections free from any distraction
• Maintain sufficient contrast
• Colors should not be the only visual mean
• Interactive elements should be easy to identify
• Clear and consistent navigation option
• Form elements should clearly associated labels
• Proper grouping with appropriate breathing space
• Test your design with different viewport sizes
• Include image and media alternatives
• Provide controls for carousels, sliders, video
Key takeaways

25. Thank you
Research by:
Yogesh Daphane

26. References
WCAG design guidelines
https://www.w3.org/WAI/tips/designing/
WebAIM Contract checker
https://webaim.org/resources/contrastchecker/
Text is not the enemy: How illiterates' use their mobile phones
https://www.researchgate.net/publication/266595198_Text_is_not_the_enemy_How_illiterates'_use_their_mobile_phones
Everything You Need to Know About Designing Accessible Forms
https://rangle.io/blog/everything-you-need-to-know-about-designing-accessible-forms/
Alternatives to Placeholder Text
https://medium.com/nextux/alternatives-to-placeholder-text-13f430abc56f

27. Designing for accessibility is not that hard
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
NBU
https://nextbillionusers.google/our-research/
58 Form Design Best Practices & Form UX Examples
https://www.ventureharbour.com/form-design-best-practices/
Designing for Global Accessibility – by Google
https://design.google/library/designing-global-accessibility-part-1/
https://design.google/library/designing-global-accessibility-part-2/
https://design.google/library/designing-global-accessibility-part-iii/
7 Things Every Designer Needs to Know about Accessibility
https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b

28. CDC report
https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html
Why Diversity and Inclusion Driving Innovation is a Matter of Life and Death
https://www.rocketspace.com/corporate-innovation/why-diversity-and-inclusion-driving-innovation-is-a-matter-of-life-and-death