Hello friends! This post is primarily for GHC folks attending the workshop on Accessible Design: Breaking Barriers between Disability and Digital Interfaces.You can use this post as reference during or after the workshop. I’ve compiled a bunch of resources, guidelines, tools, additional reading, and videos to check out. Feel free to ping me directly if you want to chat more!
LAWS AND REGULATIONS
Much information technology we know and see today requires legal compliance. Many regulations, laws, and guidelines have been implemented over the years to enforce accessibility.
The Americans with Disabilities Act (ADA) prohibited discrimination against people with disabilities. This act was implemented before the Internet was commonplace for people to communicate/ get information.
Section 508 is an amendment to the Rehabilitation Act of 1973, which requires all electronic information presented by federal or government agencies to be accessible to people with disabilities.
The World Wide Web Consortium (W3C) published WCAG 1.0, which are the web content guidelines for creating accessible websites. WCAG 2.0 is the latest and updated version.
The 21stCentury Communications and Video Accessibility Act (CCVA) requires all videos used for communicating on the web and on mobile devices and all video programming to communicate emergency information to include captioning.
Outside of the U.S., Canada has government Web Standards (previously known as Common Look and Feel Standards). Australia, Ireland, and UK has laws against disability discrimination. The British Standards Institute issued a Code of Practice for Web Accessibility in 2010. Japan has their web content guidelines under the Japanese Industrial Standards.
PLATFORM GUIDELINES
If you’re designing or developing for mobile platforms, it’s worth taking a look at each platform’s accessibility guidelines to get a grasp on rules, existing built-in features, and other resources.
iOS Accessibility Guidelines
iOS Human Interface Guidelines
Android Accessibility Guidelines
Windows Accessibility Guidelines
IHENI’s Curated List of Mobile Accessibility Resources
PRINCIPLES OF ACCESSIBLE DESIGN
These guiding principles defined by the W3C can help us measure the usability of existing content and thus produce new or improved content so that it can be accessed by everyone. Ask yourself these questions as you are designing interfaces.
PERCEIVABLE
Can the user hear or see the information? Can he do so through the browser or through assistive technologies?
OPERABLE
Are any of the UI elements interactive? Can the user interact with all controls? If it’s touch, can he navigate to them easily? If on desktop, can he interact with the elements using a mouse, keyboard, or alternative assistive technology?
UNDERSTANDABLE
Is the information presented easy to understand? Or does it cause more confusion or ambiguity? Does the user understand how to use the app or website? Or is the onboarding/ learning process too long or too tough to handle?
ROBUST
Can the interface and content be easily interpreted by customized interfaces? By different devices? Or by different operating systems or browsers?
TOOLS AND SIMULATORS
There are many accessibility tools available to test or validate your code or designs. Simulators are also helpful to understand visual implications when creating new designs. Here is a list to get you started.
W3 HTML/CSS Validator
Deque’s Website Accessibility Checklist
WebAIM Color Contrast Checker
Firefox Accessibility Evaluation Toolbar
Readability Test Tool
Color Oracle
Soft-proofing for colorblindness in Adobe Photoshop CS6
Color Contrast Analyser
Luminosity Color Contrast Ratio Analyser
See Chrome Extension
WebAIM Low Vision Simulation
Eye-Sim
Chromatic Vision Simulator
VisionSim App (iOS only)
BEYOND THE SCREEN
In a world of a constant, fast, and fierce technological change, how can we leverage emerging technologies to create accessible products and services? Let’s take a look at how some companies have removed barriers beyond the digital screen to improve people’s lives.
HAPTICS
Haptics is any form of interaction involving touch. Haptic feedback or kinesthetic communication recreates the sense of touch by applying forces, vibrations, or motions.
TouchFire Keyboard is an augmentation of the iPad’s keyboard by providing a raised tactile surface for users to feel and touch.
The Bradley is a watch that you can feel and touch to tell the time.
Apple Watch allows users to receive physical cues for notifications using a gentle tap or vibration. Users can adjust the intensity and can also allow audio cues as well.
NAVIGATION
Wayfindr uses bluetooth beacons and bone conduction headphones to guide users through the subway system. View the Wayfindr video
Blind Maps is a physical piece that can be attached to the mobile device which offers constantly updated haptic pins basing off of Google Maps navigation.
Automotive and technology companies like Google, Mercedes, BMW, and Tesla are all working on self-driving cars, which will be available to the public sooner than we think. Autonomous vehicles benefits everyone needing to drive or use transportation, disabled or not.
VOICE AND AUDIO
Apple’s Siri, Microsoft’s Cortana, and Amazon’s Echo are some examples of voice-activated devices/technology available today to assist users with limited sight or mobility.
Born with achromatopsia (complete color blindness) Neil Harbisson, founder of the Cyborg Foundation, developed a device that translates colors into sounds called the Eyeborg using cybernetics and audio cues. View the video about Neil and the Eyeborg
SCIENCE AND HEALTH
Recently approved by the FDA, the Bionic Eye: Argus II is a pair of glasses (used in conjunction with surgically implanted electrodes in the eyes) that translates images to light so users may see movement.
ADDITIONAL READING
Here’s some additional articles I found helpful when iterating on projects and sharing out design rationale. We should all aim to reduce customer pain by creating better legibility and readability. Pay attention to type case, color contrast, use of white space, link colors or animations.
Legibility and Readability
Color Contrast for Better Readability
WCAG 2.0: A/AA/AAA Compliance
Post Edit:
Thank you so much attending!! Your participation, enthusiasm, and passion for learning more about and practicing accessible design totally made my day.
DOWNLOAD SLIDES HERE
Stay in touch!