designing accessibility - accessu 2018 › accessu › 2018 › ... · designing accessibility make...
TRANSCRIPT
![Page 1: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/1.jpg)
Designing Accessibility Make your designs beautiful and accessible to all.
Robert Jolly @iamjolly
#AccessU2018
![Page 2: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/2.jpg)
Design and Accessibility Concepts to consider
![Page 3: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/3.jpg)
![Page 4: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/4.jpg)
A designer solves problems within a set of constraints. Mike Monteiro - Designer, Author
![Page 5: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/5.jpg)
What is Accessibility?
Web accessibility means that people with disabilities can use the Web. W3C WAI
![Page 6: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/6.jpg)
Accessibility is… making things work for everyone regardless of their abilities.
![Page 7: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/7.jpg)
But who, really?
More than one billion people on the planet have a disability. WHO + World Bank Report on Disability 2011
![Page 8: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/8.jpg)
People have disabilities in the areas of:
• Vision • Hearing • Motor (Physical) • Cognitive
![Page 9: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/9.jpg)
Visual disabilities • Blindness
• 39 milllion • Low vision
• 246 million • Color blindness
• 8-10% of men • Only 0.5% of women
![Page 10: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/10.jpg)
Hearing disabilities • Deafness • Hearing Loss
360 million people worldwide have disabling hearing loss. (WHO, 2015)
• Ages 45 to 54 = 2% • Ages 55 to 64 = 8.5% • Ages 65 to 74 = 25% • Ages 75 and older = 50%
![Page 11: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/11.jpg)
Motor (physical) disabilities • Arthritis, fibromyalgia, & rheumatism • Muscular dystrophy • Amputation and deformity • Tremors and spasms • Paralysis / spinal cord injury • Repetitive stress injury
![Page 12: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/12.jpg)
Cognitive disabilities • Learning disabilities / Dyslexia • Autism • ADHD • Acquired brain injuries • Neurodegenerative diseases • Age-related dementia
![Page 13: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/13.jpg)
Situational disabilities • Broken mouse • Fractured wrists • Using mobile devices • Sun glare on screens • Feeling tired or unwell • Noisy environments
![Page 14: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/14.jpg)
And many, many, many more…
Vestibular disorders Learning difficulties Hearing Photoepileptic seizures Acquired brain injuries Noise-induced hearing lossAnomalous trichromacy Getting older
Situational disabilities Muscle slowness DyscalculiaStroke Achromatopsia Dysgraphia Photosensitive epilepsy Tritanomaly
Illiteracy Visual impairments Poor hearingLoss of fine muscle control Parkinson’s disease Cataracts Chemo brain Cerebral palsy
Glaucoma Lazy-EyesCognitive BlindnessProtanopia Cystic fibrosis Muscular dystrophy Vertigo Astigmatism Amputation Deuteranomaly Dichromacy Directionally challenged
Gamer’s thumb Neurodegenerative diseases DeafnessLanguage barriersTritanopia Dementia Age-related macular degeneration Tremors Post-concussion syndrome Developmental disabilities DyslexiaColor blindness Sleep deprivation Attention deficit disorder
Protanomaly Monochromacy Multiple sclerosis Deuteranopia Hard of hearing Difficulty concentrating Autism Motor Diabetic retinopathy AphasiaVisual Reading disorders Low vision
![Page 15: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/15.jpg)
Some tools people use
Our audiences are more diverse than we realize.
![Page 16: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/16.jpg)
![Page 17: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/17.jpg)
![Page 18: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/18.jpg)
![Page 19: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/19.jpg)
![Page 20: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/20.jpg)
Devices
![Page 21: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/21.jpg)
•••
![Page 22: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/22.jpg)
~>))
es
~~--~~-
Reader
![Page 23: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/23.jpg)
mhttp://WVWJ.woothemes.com/woocommerce/ mi WooCommerce .. . X
Themes Plugins Support Blog Contact login Sign Up Q- lHEMES
![Page 24: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/24.jpg)
~ http://www.woothemes.corn/woocommerce/ ~ .P • ~ C
![Page 25: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/25.jpg)
Accessibility Principles
P erceivable perable nderstandable obust
O
U
R
![Page 26: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/26.jpg)
Perceivable Ensure people can see/read/hear what you’ve designed.
![Page 27: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/27.jpg)
Operable Ensure people can use what you’ve designed, with ease.
![Page 28: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/28.jpg)
Understandable Design interfaces that are consistent and reduce confusion.
![Page 29: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/29.jpg)
Robust Use design that is flexible for a variety of devices and contexts.
![Page 30: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/30.jpg)
Design Process Let’s map that out, together.
![Page 31: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/31.jpg)
![Page 32: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/32.jpg)
Accessibility Design Tasks Let’s go!
![Page 33: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/33.jpg)
Contrast and color
Which of these is easier to read?
SPLISH SPLASH
![Page 34: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/34.jpg)
Starting design with an accessible color palette
Online tool: ColorSafe.co
![Page 35: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/35.jpg)
Checking for color contrast during design
Application: Colour Contrast Analyser
![Page 36: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/36.jpg)
Design in browser? We got that!
What’s the contrast ratio for “Webcam” in light blue?
Tool: Chrome Accessibility Developer Tools
![Page 37: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/37.jpg)
ID and interactions
• Ensure focus outlines are designed • On/Off states are clear • No “mystery meat” buttons/nav!
![Page 38: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/38.jpg)
Navigation
• Design skip links
![Page 39: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/39.jpg)
Forms, Errors, and Messaging
• Labels and required inputs • Error summaries • On-screen notices
![Page 40: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/40.jpg)
Headings and Spacing
• Design all the headings! • Proximity
![Page 41: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/41.jpg)
CHICAGO IL
LAS VEGAS NV BOOK LOS ANGELES CA
LOS CABOS MEXICO BOOK PALM SPRINGS CA
PORTLAND OR BOOK SAN DIEGO CA
SAN FRANCISCO CA BOOK SEATTLE WA
MAUI HI BOOK
![Page 42: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/42.jpg)
Flexibility
• Mobile first? • Responsive web design? • Content choreography
![Page 43: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/43.jpg)
Image alternatives
• Alt text • Decoration vs content vs function • Captions and transcripts
![Page 44: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/44.jpg)
Moving content
• SVG animation • Parallax effects • Videos
![Page 45: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/45.jpg)
Step through some examples Explore patterns to consider (in the browser)
![Page 46: Designing Accessibility - AccessU 2018 › accessu › 2018 › ... · Designing Accessibility Make your designs beautiful and accessible to all. Robert Jolly . @iamjolly . #AccessU2018](https://reader036.vdocument.in/reader036/viewer/2022081402/5f10314e7e708231d447e6d8/html5/thumbnails/46.jpg)
THANK YOU!