accessible design - etouches · pdf fileaccessible design raj lal nokia inc. nokia internal...
TRANSCRIPT
![Page 1: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/1.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible
Design
Raj Lal
Nokia Inc.
![Page 2: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/2.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Agenda
About
Target Users
Color & Text
How Access.
Web Works
Website
![Page 3: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/3.jpg)
Nokia Internal Use Only Nokia Internal Use Only
About Accessibility
![Page 4: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/4.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessibility is about making things
Easy to Use by Everyone
![Page 5: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/5.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible = Clear
Accessible = Usable
Accessible = Unobtrusive
Accessible = Multiple Ways to Interact
About
![Page 6: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/6.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Who are the Users ?
![Page 7: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/7.jpg)
Nokia Internal Use Only Nokia Internal Use Only
User with special needs
Hearing
Cognitive
Mobility
Visual
![Page 8: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/8.jpg)
Nokia Internal Use Only Nokia Internal Use Only
![Page 9: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/9.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Not so Tech Savvy users
• Parents
• Seniors Citizens
• Low literacy level
• Using Old Computers/ Browsers
• Limited Bandwidth
![Page 10: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/10.jpg)
Nokia Internal Use Only Nokia Internal Use Only
![Page 11: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/11.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Tech Savvy users
• Prefer Keyboard only
• Temporary Disabled
• Mobile User, Tablets, e-Readers
• In extenuating circumstances
- Limited attention, sound, light
![Page 12: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/12.jpg)
Nokia Internal Use Only Nokia Internal Use Only
![Page 13: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/13.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Disabled
Not so Tech-Savvy
Tech Savvy Users
Users
![Page 14: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/14.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Users = All of Us
• 20% of user 80% of Time
• 80% of the user 20% of the Time
![Page 15: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/15.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible Color & Text
![Page 16: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/16.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Color
Dark
Light
Orange
Yellow Green
Blue-Green
Red
Purple Violet
Blue
![Page 17: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/17.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 18: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/18.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Visual Accessibility
Accessible Not Accessible
![Page 19: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/19.jpg)
Nokia Internal Use Only Nokia Internal Use Only
3 Rules for Visual Accessibility
![Page 20: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/20.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 21: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/21.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 22: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/22.jpg)
Nokia Internal Use Only Nokia Internal Use Only
How Accessible Web Works ?
![Page 23: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/23.jpg)
Nokia Internal Use Only Nokia Internal Use Only
3 Elements of Accessible Web
• Assistive Technology(AT)
• ARIA & Accessibility API
• W3C’s POUR Principle
![Page 24: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/24.jpg)
Nokia Internal Use Only Nokia Internal Use Only
1. Assistive Technology
![Page 25: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/25.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Assistive Technology Users
• Visually Impaired
• Blind
• Cognitive, Learning Disability
• Deaf
• Hearing Impaired
• Mobility, Physically handicapped
![Page 26: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/26.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
Assistive Technology
![Page 27: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/27.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
Assistive Technology SW
![Page 28: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/28.jpg)
Nokia Internal Use Only Nokia Internal Use Only
2. ARIA & Accessibility APIs
![Page 29: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/29.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 30: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/30.jpg)
Nokia Internal Use Only Nokia Internal Use Only
How ARIA Works
Assistive Technology
Platform Accessibility
APIs
States Roles Properties
HTML
ARIA
VoiceOver Windows Eye
Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA
![Page 31: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/31.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 32: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/32.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Roles
• Landmark Roles – Where Am I
• Structural Roles – What’s This
• Interface Widget Roles
![Page 33: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/33.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Roles
Role type Role name Role name
Landmark
roles
application
banner
complementary
contentinfo
form
main
navigation
search
![Page 34: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/34.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Roles
Role type Role name Role name
Structural
roles
article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowheader
separator
toolbar
![Page 35: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/35.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Roles
Role type Role name Role name
Interface
Widget Roles
standalone widget
alert
alertdialog
button
checkbox
dialog
gridcell
link
log
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem
composite
![Page 36: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/36.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Roles
Role type Role name Role name
Interface
Widget Roles
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
radio
scrollbar
slider
widget
combobox
grid
listbox
menu
menubar
radiogroup
tablist
Tree / treegrid
![Page 37: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/37.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA States
• Dynamic Properties
• Global States
• Widget States
![Page 38: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/38.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA State
Attribute type Global Widget
ARIA states aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid
listitem
math
note
presentation
region
row
rowheader
separator
toolbar
![Page 39: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/39.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Properties
• Relatively Static Properties
![Page 40: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/40.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Properties
Attribute type Global Widget
ARIA
Properties
aria-atomic
aria-controls
aria-describedby
aria-dropeffect
aria-flowto
aria-haspopup
aria-label
aria-labelledby
aria-
autocomplete
aria-haspopup
aria-label
aria-level
aria-multiline
aria-
multiselectable
![Page 41: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/41.jpg)
Nokia Internal Use Only Nokia Internal Use Only
ARIA Properties
Attribute type Global Widget
ARIA
Properties
aria-live
aria-owns
aria-relevant
aria-orientation
aria-readonly
aria-required
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
![Page 42: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/42.jpg)
Nokia Internal Use Only Nokia Internal Use Only
3. W3C’s POUR Principle
![Page 43: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/43.jpg)
Nokia Internal Use Only Nokia Internal Use Only
The POUR Principal
Perceivable
Operable
Understandable
Robust
![Page 44: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/44.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Perceivable
• Text alternative to all non-text content • Alternative for media using subtitles
• Transcribed text and Sign language
![Page 45: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/45.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Operable
• Function accessible from keyboard alone
• No auto refresh, allow time based contents
• Proper use of Headings & Anchors
• Joysticks, Voice recognition or audio feedback
![Page 46: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/46.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 47: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/47.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 48: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/48.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Developing an Accessible
Website using HTML5
![Page 49: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/49.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible Website
• Progressive Enhancement with ARIA
• Developing an Accessible Website
- Homepage
- About Page
- Contact Form
![Page 50: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/50.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Progressive Enhancement
Good Design Is Unobtrusive
- Dieter Rams
![Page 51: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/51.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Progressive Enhancement
HTML
HTML CSS
HTML CSS JavaScript
![Page 52: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/52.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 53: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/53.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible Website with HTML5
Home
Contact About
![Page 54: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/54.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible HTML5 Home page
<header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> …
HTML5 Accessible HTML5
![Page 55: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/55.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible HTML5 Contact Form
![Page 56: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/56.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible HTML5 Form
• 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
HTML5
![Page 57: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/57.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible HTML5 Form
• 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
ARIA
![Page 58: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/58.jpg)
Nokia Internal Use Only Nokia Internal Use Only
Accessible About Page
• Accessible Image
• Accessible Text and Links
• Accessible Media
![Page 59: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/59.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 60: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/60.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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”
![Page 61: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/61.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 62: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/62.jpg)
Nokia Internal Use Only Nokia Internal Use Only
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
![Page 63: Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal Use Only Agenda About Target Users Color & Text How ... • All presentation elements in](https://reader031.vdocument.in/reader031/viewer/2022022006/5abd1e857f8b9a5d718b4c4b/html5/thumbnails/63.jpg)
Nokia Internal Use Only Nokia Internal Use Only
thank you
Raj Lal
Nokia Inc.
@ iRajLal