Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development....
Transcript of Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development....
![Page 1: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/1.jpg)
College of Natural Science
Web Accessibility6/8/2017
![Page 2: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/2.jpg)
College of Natural Science
Who’s involved?
UsabilityUI DesignUX Design
AccessibilityEveryone
FunctionalityDevelopment
![Page 3: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/3.jpg)
College of Natural Science
4 types of accessibility concerns1. Visual2. Hearing3. Motor4. Cognitive
![Page 4: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/4.jpg)
College of Natural Science
VisualIncludes: Color blindness, hard of seeing, blindSoftware: magnification and text size, screen reading, contrast, color selection, haptic/auditory feedbackHardware: tactile buttons, auto-answer/hang-up, haptic feedback
![Page 5: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/5.jpg)
College of Natural Science
Visual
8.1 million (8.2%)Have a vision related impairment
Source: http://www.interactiveaccessibility.com/accessibility-statistics
![Page 6: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/6.jpg)
College of Natural Science
HearingIncludes: Hard of hearing, deafSoftware: haptic feedback, captioningHardware: compatibility with hearing aids/devices, convert stereo to mono sound, auto-answer/hang-up, haptic feedback
![Page 7: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/7.jpg)
College of Natural Science
Hearing
7.6 Million (3.1%)Have a hearing related impairment
Source: http://www.interactiveaccessibility.com/accessibility-statistics
![Page 8: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/8.jpg)
College of Natural Science
MotorIncludes: Limited movement in limbs and musclesSoftware: button size, touch screen vs. tactile buttons, voice recognition, custom gestures, predictive text/autocorrectHardware: size of device, response to prosthetics
![Page 9: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/9.jpg)
College of Natural Science
Motor
19.9 Million (8.2%)Have a motor related impairment
Source: http://www.interactiveaccessibility.com/accessibility-statistics
![Page 10: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/10.jpg)
College of Natural Science
CognitiveIncludes: inability to keep attention and focus or gets easily distractedSoftware: limit access to parts of screen/interfaceHardware: size of device, response to prosthetics
![Page 11: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/11.jpg)
College of Natural Science
Cognitive
15.2 Million (6.3%)Have a cognitive related impairment
Source: http://www.interactiveaccessibility.com/accessibility-statistics
![Page 12: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/12.jpg)
College of Natural Science
Disability statistics
56.7 Million (18.7%)Of the US population has some form of disability
Source: http://www.interactiveaccessibility.com/accessibility-statistics
![Page 13: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/13.jpg)
College of Natural Science
Why make things accessible?Accessibility doesn’t just mean making things easier for people with disabilities, it means making all things easier to use for everyone.
“ We can reframe accessibility in terms of what we provide, not what other people lack.” - Anne Gibson (Information Architect)Source: https://alistapart.com/article/reframing-accessibility-for-the-web
![Page 14: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/14.jpg)
College of Natural Science
WCAG
![Page 15: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/15.jpg)
College of Natural Science
What is WCAG?Web Content Accessibility Guidelines3 Levels of conformance▪ Level A - minimum▪ Level AA - level we are trying to achieve▪ Level AAA - highest
![Page 16: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/16.jpg)
College of Natural Science
WCAG ResourcesWCAG 2.0 guidelines:https://www.w3.org/TR/WCAG20/
WCAG 2.0 checklist:https://www.wuhcag.com/wcag-checklist/
![Page 17: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/17.jpg)
College of Natural Science
ARIA
![Page 18: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/18.jpg)
College of Natural Science
What is ARIA?Accessible Rich Internet ApplicationsA specification from the W3C’s Web Accessibility Initiative. Provides a way to add the missing semantics needed by assistive technologies such as screen readers.
![Page 19: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/19.jpg)
College of Natural Science
ARIA TypesRoles: Describe elements that otherwise aren’t accessible, such as carousels, tabs and dialog boxes.
States: Describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected or hidden.
Properties: Describe characteristics of these elements, such as if they are draggable, have a required element or have a popup associated with them.
![Page 20: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/20.jpg)
College of Natural Science
ARIA ResourcesFull list of ARIA states and properties:https://www.w3.org/TR/wai-aria/states_and_properties
Full list of ARIA roles:http://www.w3.org/TR/wai-aria/roles
![Page 21: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/21.jpg)
College of Natural Science
ARIA Example
![Page 22: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/22.jpg)
College of Natural Science
5 rules of Aria
![Page 23: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/23.jpg)
College of Natural Science
Rule 1If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
![Page 24: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/24.jpg)
College of Natural Science
Rule 1: Example
![Page 25: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/25.jpg)
College of Natural Science
Rule 2Do not change native semantics, unless you REALLY have to. For example, building a button.
![Page 26: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/26.jpg)
College of Natural Science
Rule 2: Example
![Page 27: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/27.jpg)
College of Natural Science
Rule 3All interactive ARIA controls must be usable with a keyboard. For example, navigating all of the slides of a carousel.
![Page 28: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/28.jpg)
College of Natural Science
Rule 4When hiding an element, make sure that ‘aria-hidden=”true”’ is used. Simply using ‘display:none’ or moving the element off the screen using CSS still makes it accessible to screen readers.
![Page 29: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/29.jpg)
College of Natural Science
Rule 5All interactive elements must have an accessible name.
![Page 30: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/30.jpg)
College of Natural Science
Rule 5: Example
![Page 31: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/31.jpg)
College of Natural Science
Vision Demo
![Page 32: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/32.jpg)
College of Natural Science
Vision DemoObjective: Simulate tunnel vision to show how layout can affect the navigation of a web page.
![Page 33: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/33.jpg)
College of Natural Science
Vision DemoFirst Name
Last Name
Are you a student? Yes No
Yes NoAre you sure?
Quit NextPrevious
![Page 34: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/34.jpg)
College of Natural Science
Vision DemoFirst Name
Last Name
YesNo
YesNo
Are you sure?
QuitNextPrevious
Are you a student?
![Page 35: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/35.jpg)
College of Natural Science
Accessibility Tools
![Page 36: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/36.jpg)
College of Natural Science
Accessibility Tools▪ Contrast checker - http://webaim.org/resources/contrastchecker/ ▪ WAVE - http://wave.webaim.org/ ▪ JAWS Screen Reader -
http://www.freedomscientific.com/Products/Blindness/JAWS Platform Specific:
▪ OSX - https://www.apple.com/voiceover/info/guide/_1124.html ▪ Windows -
https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started
![Page 37: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/37.jpg)
College of Natural Science
Accessibility Tools▪ MSU Accessibility Guidelines -
http://webaccess.msu.edu/Policy_and_Guidelines/web-accessibility-policy.html
▪ MSU Web Access - http://webaccess.msu.edu/ ▪ Contains guides/tutorials on
![Page 38: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/38.jpg)
College of Natural Science
Mobile Assistive Technology
![Page 39: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/39.jpg)
College of Natural Science
Mobile Assistive TechnologyiOS & Android: screen reader, screen magnifier, large text, haptic feedback, themes/high contrast, switch control, guided access, assistive touch
Windows: screen reader, screen magnifier, large text, haptic feedback, themes/high contrast
![Page 40: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/40.jpg)
College of Natural Science
Mobile Assistive Technology Definitions:Screen Reader: a text-to-speech interpretation of what is being displayed on screenScreen Magnifier: A tool to enlarge screen contentLarge Text: The ability to increase font sizes on the screenHaptic Feedback: Tactile feedback technology which recreates the sense of touch by applying forces, vibrations or motions to the userThemes/High Contrast: The ability to switch between color overlays to help increase contrast of a display or counter color-blindness
![Page 41: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/41.jpg)
College of Natural Science
Mobile Assistive Technology Definitions (continued):Switch Control: Allows users with limited mobility to control an interface by emulating more complex gestures with simple onesGuided Access: Restricts access to a single application or function on a deviceAssistive Touch: Mimics hardware interactions and touch interaction on the interface
![Page 42: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/42.jpg)
College of Natural Science
Mobile Assistive TechnologiOS: Settings -> General -> Accessibility -> Voiceover
Android: Settings -> Accessibility -> Talkback
![Page 43: Web Accessibility Accessibility.pdfUX Design Accessibility Everyone Functionality Development. College of Natural Science 4 types of accessibility concerns 1. Visual 2. Hearing 3.](https://reader034.fdocuments.us/reader034/viewer/2022042708/5f37e85f7fcc7e43d32e7447/html5/thumbnails/43.jpg)
College of Natural Science
Demo