Visual Disabilities
- 1. Types, Characteristics, Barriers, Assistive Tech, and UX Design Visual Disabilities A11Y AND INCLUSIVE DESIGN SERIES @ALENAHUANG
- 2. This is an introduction to visual disabilities. Here we will learn about... 1. What are visual disabilities? 2. Types and characteristics 3. Barriers for people with visual disabilities 4. Assistive Technologies 5. UX Design Considerations Let’s get started! What will this guide cover?
- 3. Visual disabilities range from... • vision loss • loss of visual acuity (sharpness and clarity) • sensitivity to specific colors It could be some or complete loss of vision in either or both eyes. What are Visual Disabilities?
- 5. Globally, at least 2.2 billion people have a vision impairment or blindness. Examples of characteristics: • Completely blind • Cannot perceive light vs. dark • Can perceive general shapes of large objects, but cannot recognize people or read text by sight Blindness TYPES OF VISUAL DISABILITIES
- 6. At least 300 million people around the world have color blindness, which impairs a person’s ability to distinguish certain colors. There are different types including... • Red-green color blindness (most common) • Blue-yellow color blindness • Complete color blindness Colorblindness TYPES OF VISUAL DISABILITIES
- 7. 246 million people, or 3.5% of the world population have uncorrectable vision loss. Low vision cannot be corrected with glasses, contacts, or surgery. It isn’t complete blindness, but may include... • Poor night vision • Blurry sight • Blind spots in vision Low Vision TYPES OF VISUAL DISABILITIES
- 9. Books or menus that are not made available in alternate formats (digital files, braille, etc.) BARRIER EXAMPLE #1
- 10. Images, videos, or other elements that do have text alternatives on websites/apps BARRIER EXAMPLE #2
- 11. Text and images with insufficient color contrast between foreground and background BARRIER EXAMPLE #3
- 12. Examples of Assistive Tech Visual Disabilities
- 13. There are various assistive technologies for those with visual disabilities including... • Canes, service animals, navigational aids • Tactile controls and models • Braille signage • Screen readers • Magnifiers software Next, we will dive deeper into assistive technologies in the digital space. Assistive Technologies (AT)
- 14. For those who cannot see or have difficultly to see digital interfaces, screen readers will read an audio track that gives context for essential visual information. They read out text and HTML so that people understand the structure and content of the site. Examples of screen reader software: • NVDA • VoiceOver • JAWS Screen Readers ASSISTIVE TECHNOLOGIES IN THE DIGITAL SPACE
- 15. There are various apps that are designed to... • Convert scanned images of text into digital text readable by screen readers • Scan labels or QR codes to read product information aloud • Announce names and description of maps and environments • Enhance the contrast of digital text by changing color and spacing Other Software ASSISTIVE TECHNOLOGIES IN THE DIGITAL SPACE
- 17. • Do not rely on color alone to share meaning or important information. Utilize other indicators like icons, underlines, etc. to convey meaning. • Sufficient color contrast is also essential for design. There are various color contrast checker software out there, so you can test out the colors on your designs! Color UX DESIGN CONSIDERATIONS
- 18. • For images that provide important information to users, include alternative text that describes the image. • For text, choose a font that is easy to read and consider the font size to make sure it is large enough for people to read. Images and Text UX DESIGN CONSIDERATIONS
- 19. • Place related elements and information together so that information can be easily found if magnified • Design for a responsive layout so that the experience can be used with various browser sizes and assistive technologies. Layout UX DESIGN CONSIDERATIONS
- 20. Tip: Try out a screen reader yourself! Find any website and navigate around with a screen reader software. Experiencing how a screen reader works will allow you to have a better understanding how other people use it. This way, you can learn to structure your designs to be compatible with screen readers. Screen Reader Compatibility UX DESIGN CONSIDERATIONS