SXSW Day 5
Interfaces, Accessibility & Superheroes
One out of seven of the world’s populate has some form of disability
In the US 15 and over 21.3% have a disability, People over 65 49.8%
Regulations and Guidelines
1990 ADA
1998 Section 508
1999 WCAG 1.0
2008 - WCAG 2.0
2010 - All video needs captions
Superhero Checklist
Overcome adversity
fight for good
adhere to principles guidelines and laws
use existing infrastructure in new ways
use innovative technology
look great in a cape
Four principles of P.O.U.R.
Perceivable - Providing alternative text on images, captions or transcripts for video and audio, good color contrast, avoid marques or movement
Operable - providing access to navigations and controls through alternative means e.g. tab Don’t make buttons too tiny
Understandable - Content is clearly and logically presented. Wording should be simple and concise.
Robust - semantic markups, validated code, responsive design
Basic Elements of Accessible Design
Can my audience understand it
how can the platform help my users understand?
does the platform suggest particular usability patterns
How difficult is it to learn? (learned behavior vs established patterns)
Legibility
- Hierarchy - Order Size and Action. Example would be a traffic light
- Iconography - Simplicity is key. make sure to always name things that make sense and also always to use alt text on the image. If you use sprite sheets make sure to always include title or alt text on the element. Empty elements with a sprite sheet causes problems for screen readers
- Color and Contrast - Hue chromaticity saturation value contrast. Color blindness affects approximately 8% of males and .5% of females. Never use yellow with white type or yellow type with while background. Munsell color system
- Typography - Font, size, weight, uniformity, contrast. Spacing between lines is very important. Left aligned text is ideal, center align is hard to find the next line, and right align should be avoided by all costs. Geometry of font is important geometric typography is usually easier to read. If you squint and can not decern the letters it should be avoided.
- Sound - use in conjunction with visual cues, differentiated between alerts, integrating sound as responsive feedback.
- Touch and Haptics - Haptic feedback to indicate state of error or completion. Touch to invoke action.
Exercise with turning on voice over
Our phone gap application does not work at all when it is turned on. Mobile website did a bit better but need to title the input text boxes.
Common built-in features
- increase text size
- text to speech
- pinch and zoom
Assistive Technologies and services
- screen readers
- screen magnifiers
- alternative keyboards
- braille output
Advanced interactions
shake your device for help since it might be a sign of frustration from a user.
Ways to improve the application you tested voice over
- Add alt and title text to clickable elements.
- Increase font-size or at least make it adjustable
- Figure out what needs to be done to make the application accessible.
Thinking outside the box
Breaking the Mold with Meaningful Design
Define a problem that the consumer has to deal with and work through each and every step that solves that problem completely.
Good design is when you have the bar minimum to solve the problem. Don’t add features just for the sake of it to make it more robust.
When hiring people ask people what they want to learn. How would you take a thing and make it better.
Only ship when something is ready never rush.
You need to iterate constantly.
Good design needs constraints