-
1.
Accessible
Design
Raj Lal
Nokia Inc.
-
2.
Agenda
About Target Color & How Website
Users Text Access.
Web
Works
-
3.
About Accessibility
-
4.
Accessibility is about making things
Easy to Use by Everyone
-
5.
About
Accessible = Clear
Accessible = Usable
Accessible = Unobtrusive
Accessible = Multiple Ways to Interact
-
6.
Who are the Users ?
-
7.
User with special needs
Hearing Mobility
Cognitive Visual
-
8.
Not so Tech Savvy users
• Parents
• Seniors Citizens
• Low literacy level
• Using Old Computers/ Browsers
• Limited Bandwidth
-
9.
Tech Savvy users
• Prefer Keyboard only
• Temporary Disabled
• Mobile User, Tablets, e-Readers
• In extenuating circumstances
- Limited attention, sound, light
-
10.
Users
Tech
Savvy Disabled
Users
Not so
Tech-Savvy
-
11.
Users = All of Us
• 20% of user 80% of Time
• 80% of the user 20% of the Time
-
12.
Accessible Color & Text
-
13.
Color Light
Green Yellow
Blue-Green Orange
Blue Red
Violet Purple
Dark
-
14.
3 Rules for Visual Accessibility
1. Exaggerate lightness differences between
foreground and background colors
2. Choose dark colors with hues from the
bottom half against light colors from top
3. Avoid contrasting hues from adjacent parts of
the hue circle
-
15.
Visual Accessibility
Accessible Not
Accessible
-
16.
3 Rules for Visual Accessibility
-
17.
8 Guidelines for Accessible Text
• Highest Possible Contrast for main content
• Use Color contrasts for Title or highlighted text
• Use large types, minimum 16 points
• Minimum 25% Spacing between lines
-
18.
8 Guidelines for Accessible Text
• Use Regular Serif/San Serif fonts
• Cursive, decorative fonts, italic case, use sparingly
• Use San Serif fonts for small text
• Avoid close letter spacing
-
19.
How Accessible Web Works ?
-
20.
3 Elements of Accessible Web
• Assistive Technology(AT)
• ARIA & Accessibility API
• W3C’s POUR Principle
-
21.
1. Assistive Technology
-
22.
Assistive Technology Users
• Visually Impaired
• Blind
• Cognitive, Learning Disability
• Deaf
• Hearing Impaired
• Mobility, Physically handicapped
-
23.
Assistive Technology
Hardware User
Large Monitors Visual, Cognitive, Mobility
Large Print Keyboards Visual, Cognitive, Mobility
Anti-glare filter Visual, Cognitive, Mobility
Braille Keyboards Blind
Refreshable Braille display Blind
Color/ Brightness keys Visual, Cognitive
Trackballs / D-Pads Mobility
Headphones Cognitive, Hearing
-
24.
Assistive Technology SW
Software User
Text Enlarging sw Visual, Cognitive
Text/Audio Browser Visual, Blind
Screen Readers Visual, Blind, Cognitive
Braille sw Translator Blind
Speech Recognition Visual, Blind, Cognitive, Mobility
Virtual Keyboards Mobility
Captioning Text Cognitive, Hearing, Deaf
Show Sound Cognitive, Hearing, Deaf
-
25.
2. ARIA & Accessibility APIs
-
26.
Accessible Rich Internet Applications
• ARIA helps Assistive Technology(AT)
• ARIA Make Web content Accessible to AT
• ARIA uses HTML and CSS Tags
• ARIA is a W3C Initiative & part of HTML5
• Most of ARIA is embedded in JS libraries
-
27.
How ARIA Works
VoiceOver
Windows Eye
Roles States Properties
Assistive
Technology
ARIA
Platform HTML
Accessibility
APIs
Mac OSX Accessibility Protocol
Linux IAccessible2
Windows MSAA
-
28.
ARIA
• Uses a set of Roles, States, and Properties
• Roles, States & Properties assigned to HTML
• Exposes web page to Accessibility APIs
• AT uses Accessibility APIs to access Webpage
-
29.
ARIA Roles
• Landmark Roles – Where Am I
• Structural Roles – What’s This
• Interface Widget Roles
-
30.
ARIA Roles
Role type Role name Role name
Landmark application form
roles banner main
complementary navigation
contentinfo search
-
31.
ARIA Roles
Role type Role name Role name
Structural article listitem
roles columnheader math
definition note
directory presentation
document region
group row
heading rowheader
img separator
list toolbar
-
32.
ARIA Roles
Role type Role name Role name
Interface standalone widget spinbutton
Widget Roles alert status
alertdialog tab
button tabpanel
checkbox textbox
dialog timer
gridcell tooltip
link treeitem
log composite
-
33.
ARIA Roles
Role type Role name Role name
Interface marquee widget
Widget Roles menuitem combobox
menuitemcheckbox grid
menuitemradio listbox
option menu
progressbar menubar
radio radiogroup
scrollbar tablist
slider Tree / treegrid
-
34.
ARIA States
• Dynamic Properties
• Global States
• Widget States
-
35.
ARIA State
Attribute type Global Widget
ARIA states aria-busy listitem
aria-disabled math
aria-grabbed note
aria-hidden
presentation
aria-invalid
region
row
rowheader
separator
toolbar
-
36.
ARIA Properties
• Relatively Static Properties
-
37.
ARIA Properties
Attribute type Global Widget
ARIA aria-atomic aria-
Properties aria-controls autocomplete
aria-describedby aria-haspopup
aria-dropeffect aria-label
aria-flowto aria-level
aria-haspopup aria-multiline
aria-label aria-
aria-labelledby multiselectable
-
38.
ARIA Properties
Attribute type Global Widget
ARIA aria-live aria-orientation
Properties aria-owns aria-readonly
aria-relevant aria-required
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
-
39.
3. W3C’s POUR Principle
-
40.
The POUR Principal
Perceivable Operable Understanda Robust
ble
-
41.
Perceivable
• Text alternative to all non-text content
• Alternative for media using subtitles
• Transcribed text and Sign language
-
42.
Operable
• Function accessible from keyboard alone
• No auto refresh, allow time based contents
• Proper use of Headings & Anchors
• Joysticks, Voice recognition or audio feedback
-
43.
Understandable
• High color contrast 4.5:1
• Use San serif fonts & allow resize
• Avoid auto-play of media, animation
• Avoid auto refresh, or flashy graphics
• Multiple visual cues, icons, audio for feedback
-
44.
Robust
• Broken HTML tag can cause difficulty with AT
• Follow HTML standard specifications
• Syntactically correct HTML & validate page
• Proper “lang” attributes in the markup
• Use “abbr” tag with proper usage
-
45.
Developing an Accessible
Website using HTML5
-
46.
Accessible Website
• Progressive Enhancement with ARIA
• Developing an Accessible Website
- Homepage
- About Page
- Contact Form
-
47.
Progressive Enhancement
Good Design Is Unobtrusive
- Dieter Rams
-
48.
Progressive Enhancement
HTML CSS
JavaScript
HTML CSS
HTML
-
49.
Progressive Enhancement
• Design in a Progressive enhancement way
• All content available by HTML alone
• Use semantically structured HTML
• All presentation elements in the style sheet
• Load JavaScript after the page is loaded
-
50.
Accessible Website with HTML5
Home
Contact About
-
51.
Accessible HTML5 Home page
<header role="banner">
<nav role="navigation">
<section role=“main”>
<footer role=“contentinfo”>
…
HTML5 Accessible HTML5
-
52.
Accessible HTML5 Contact Form
-
53.
Accessible HTML5 Form
HTML5
• Use label tag for describing form elements
• Associate labels with controls using for attribute
• Create a logical tab order with tabindex
• Use placeholder, type=email, url, text
• Use fieldset and legend to group form elements
-
54.
Accessible HTML5 Form
ARIA
• Use role=main and keep one form in one page
• Use aria-required for required fields
• Use aria-live=assertive in the form for validation
• Use aria-describedby for adding help to fields
-
55.
Accessible About Page
• Accessible Image
• Accessible Text and Links
• Accessible Media
-
56.
Accessible Image
Use alt attribute for alternative text for the image
Use title attribute for tooltip
Use role=presentation to ignore the image
Use blank alt for decorative images
Use meaningful name for src=meaningful.png
-
57.
Accessible Text and Links
• Font size should always be relative , never fixed
• Links should be underlined and of different color
• Use Anchor links, easily navigable by screen readers
• Meaningful link text , avoid using “click here” or “more”
• Color in CSS with foreground & background color
• Simple and Machine readable words like “Home page”
-
58.
Accessible Media
• Media player features navigable by keyboard
• Closed captions with timed text files
• Switchable sign translation video
• Transcripts, caption and sign language
• SVG animation is more accessible than Canvas
-
59.
Reference
• W3C ARIA
http://dev.w3.org/html5/markup/aria/aria.html
• Accessible Design
http://www.lighthouse.org/accessibility/design
• Dieter Rams 10 good design Principals
http://en.wikipedia.org/wiki/Dieter_Rams
-
60.
thank you
Raj Lal
@ iRajLal
Nokia Inc.
About AccessibilityWhy is it important & Who is our customerAccessible Color and TextAccessible Web and W3C’s POURHow Assistive devices WorksAccessible Website with HTML5
HEARING: not being able to hear audio, video or any other kind of sound COGNITIVE: problem with the content itself MOBILITY: means inability to use mouse or keyboard. VISUAL: unable to see the content or distinguish color
HEARING: not being able to hear audio, video or any other kind of sound COGNITIVE: means inability to use mouse or keyboardMOBILITY: means inability to use mouse or keyboard. VISUAL: unable to see the content or distinguish color
HEARING: not being able to hear audio, video or any other kind of sound COGNITIVE: means inability to use mouse or keyboardMOBILITY: means inability to use mouse or keyboard. VISUAL: unable to see the content or distinguish color
And their importance in accessibility
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
And their importance in accessibility
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
And their importance in accessibility
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
And their importance in accessibility
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
ARIA state is a dynamic property of an HTML element which represents data associated with the object but do not affect the essential nature of the element. There are two types of ARIA states, Global and Widget state
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
And their importance in accessibility
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
And their importance in accessibility
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.