SlideShare a Scribd company logo
1 of 63
Download to read offline
Accessible
Design
Raj Lal
Nokia Inc.
Agenda




About   Target   Color &    How      Website
        Users     Text     Access.
                            Web
                           Works
About Accessibility
Accessibility is about making things
    Easy to Use by Everyone
About

Accessible = Clear
Accessible = Usable
Accessible = Unobtrusive
Accessible = Multiple Ways to Interact
Who are the Users ?
User with special needs

Hearing                   Mobility



Cognitive                 Visual
Not so Tech Savvy users

 • Parents
 • Seniors Citizens
 • Low literacy level
 • Using Old Computers/ Browsers
 • Limited Bandwidth
Tech Savvy users
 • Prefer Keyboard only
 • Temporary Disabled
 • Mobile User, Tablets, e-Readers
 • In extenuating circumstances
   - Limited attention, sound, light
Users

        Tech
        Savvy     Disabled
        Users


             Not so
           Tech-Savvy
Users = All of Us

 • 20% of user 80% of Time
 • 80% of the user 20% of the Time
Accessible Color & Text
Color                                   Light
              Green    Yellow

 Blue-Green                      Orange



       Blue                       Red


              Violet    Purple
Dark
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
Visual Accessibility



Accessible              Not
                        Accessible
3 Rules for Visual Accessibility
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
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
How Accessible Web Works ?
3 Elements of Accessible Web

 • Assistive Technology(AT)
 • ARIA & Accessibility API
 • W3C’s POUR Principle
1. Assistive Technology
Assistive Technology Users
 • Visually Impaired
 • Blind
 • Cognitive, Learning Disability
 • Deaf
 • Hearing Impaired
 • Mobility, Physically handicapped
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
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
2. ARIA & Accessibility APIs
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
How ARIA Works
VoiceOver
Windows Eye
                          Roles    States Properties
 Assistive
Technology

                                   ARIA
               Platform                                HTML
              Accessibility
                 APIs
      Mac OSX Accessibility Protocol
      Linux IAccessible2
      Windows MSAA
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
ARIA Roles



• Landmark Roles – Where Am I
• Structural Roles – What’s This
• Interface Widget Roles
ARIA Roles
Role type   Role name       Role name

Landmark    application     form
roles       banner          main
            complementary   navigation
            contentinfo     search
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
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
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
ARIA States




 • Dynamic Properties
 • Global States
 • Widget States
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
ARIA Properties




 • Relatively Static Properties
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
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
3. W3C’s POUR Principle
The POUR Principal




Perceivable   Operable   Understanda   Robust
                              ble
Perceivable
 • Text alternative to all non-text content

 • Alternative for media using subtitles

 • Transcribed text and Sign language
Operable
 • Function accessible from keyboard alone

 • No auto refresh, allow time based contents

 • Proper use of Headings & Anchors

 • Joysticks, Voice recognition or audio feedback
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
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
Developing an Accessible
 Website using HTML5
Accessible Website
 • Progressive Enhancement with ARIA
 • Developing an Accessible Website
   - Homepage
   - About Page
   - Contact Form
Progressive Enhancement


Good Design Is Unobtrusive
- Dieter Rams
Progressive Enhancement


                     HTML CSS
                     JavaScript
          HTML CSS
 HTML
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
Accessible Website with HTML5


                 Home



       Contact          About
Accessible HTML5 Home page


              <header role="banner">
              <nav role="navigation">
              <section role=“main”>
              <footer role=“contentinfo”>
              …




    HTML5      Accessible HTML5
Accessible HTML5 Contact Form
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
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
Accessible About Page

• Accessible Image
• Accessible Text and Links
• Accessible Media
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
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”
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
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
thank you

Raj Lal
@ iRajLal

Nokia Inc.

More Related Content

Viewers also liked

Accessible design: which everyone do you mean? CSUN 2015
Accessible design: which everyone do you mean? CSUN 2015Accessible design: which everyone do you mean? CSUN 2015
Accessible design: which everyone do you mean? CSUN 2015Derek Featherstone
 
Design for Everyone: 7x10^9 Reasons We Need to Stop Designing for Ourselves
Design for Everyone: 7x10^9 Reasons We Need to Stop Designing for OurselvesDesign for Everyone: 7x10^9 Reasons We Need to Stop Designing for Ourselves
Design for Everyone: 7x10^9 Reasons We Need to Stop Designing for OurselvesMegan Kierstead
 
Social Culture - Universal Design
Social Culture - Universal DesignSocial Culture - Universal Design
Social Culture - Universal DesignTieng Wei
 
Toilet for physically challenged
Toilet for physically challengedToilet for physically challenged
Toilet for physically challengedRohit Surekh
 
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and AccessibilityRed Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and AccessibilityDesign for Context
 
Accessible Games | blind ready, social and educational activities
Accessible Games | blind ready, social and educational activitiesAccessible Games | blind ready, social and educational activities
Accessible Games | blind ready, social and educational activitiesNazzareno Giannelli
 
Universal design business_symposium_tokyo_01rc
Universal design business_symposium_tokyo_01rcUniversal design business_symposium_tokyo_01rc
Universal design business_symposium_tokyo_01rcfrog
 
Universal architectural design
Universal architectural designUniversal architectural design
Universal architectural designNishita Mohta
 
Centre for visually impaired
Centre for visually impairedCentre for visually impaired
Centre for visually impairedAnkit Kapoor
 
Universal Design: The Seven Principles
Universal Design: The Seven PrinciplesUniversal Design: The Seven Principles
Universal Design: The Seven PrinciplesScott Rains
 
Universal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah PruettUniversal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah PruettScott Rains
 
Designing for the Visually Impaired
Designing for the Visually ImpairedDesigning for the Visually Impaired
Designing for the Visually Impairedwow!systems
 
Accessible Design: Breaking Barriers between Disability and Digital Interface...
Accessible Design: Breaking Barriers between Disability and Digital Interface...Accessible Design: Breaking Barriers between Disability and Digital Interface...
Accessible Design: Breaking Barriers between Disability and Digital Interface...Intuit Inc.
 
Visually impaired as a design challenge
Visually impaired as a design challenge Visually impaired as a design challenge
Visually impaired as a design challenge Husam AlMuzainy
 
Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Romain Fonnier
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android appsRichard Byrne
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMichel Lent Schwartzman
 
The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...Alberta Soranzo
 
Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012servicesmobiles.fr
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Petit Web
 

Viewers also liked (20)

Accessible design: which everyone do you mean? CSUN 2015
Accessible design: which everyone do you mean? CSUN 2015Accessible design: which everyone do you mean? CSUN 2015
Accessible design: which everyone do you mean? CSUN 2015
 
Design for Everyone: 7x10^9 Reasons We Need to Stop Designing for Ourselves
Design for Everyone: 7x10^9 Reasons We Need to Stop Designing for OurselvesDesign for Everyone: 7x10^9 Reasons We Need to Stop Designing for Ourselves
Design for Everyone: 7x10^9 Reasons We Need to Stop Designing for Ourselves
 
Social Culture - Universal Design
Social Culture - Universal DesignSocial Culture - Universal Design
Social Culture - Universal Design
 
Toilet for physically challenged
Toilet for physically challengedToilet for physically challenged
Toilet for physically challenged
 
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and AccessibilityRed Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
 
Accessible Games | blind ready, social and educational activities
Accessible Games | blind ready, social and educational activitiesAccessible Games | blind ready, social and educational activities
Accessible Games | blind ready, social and educational activities
 
Universal design business_symposium_tokyo_01rc
Universal design business_symposium_tokyo_01rcUniversal design business_symposium_tokyo_01rc
Universal design business_symposium_tokyo_01rc
 
Universal architectural design
Universal architectural designUniversal architectural design
Universal architectural design
 
Centre for visually impaired
Centre for visually impairedCentre for visually impaired
Centre for visually impaired
 
Universal Design: The Seven Principles
Universal Design: The Seven PrinciplesUniversal Design: The Seven Principles
Universal Design: The Seven Principles
 
Universal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah PruettUniversal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
 
Designing for the Visually Impaired
Designing for the Visually ImpairedDesigning for the Visually Impaired
Designing for the Visually Impaired
 
Accessible Design: Breaking Barriers between Disability and Digital Interface...
Accessible Design: Breaking Barriers between Disability and Digital Interface...Accessible Design: Breaking Barriers between Disability and Digital Interface...
Accessible Design: Breaking Barriers between Disability and Digital Interface...
 
Visually impaired as a design challenge
Visually impaired as a design challenge Visually impaired as a design challenge
Visually impaired as a design challenge
 
Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android apps
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practice
 
The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...
 
Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
 

Similar to Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Raj Lal
 
Web accessibility 101: Intersectional Inclusion in the Digital World
Web accessibility 101: Intersectional Inclusion in the Digital WorldWeb accessibility 101: Intersectional Inclusion in the Digital World
Web accessibility 101: Intersectional Inclusion in the Digital WorldLeonardo Graterol
 
CSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen ReadersCSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen ReadersEduardo Meza-Etienne
 
Real JavaScript Ninjas should know how to role with WAI-ARIA
Real JavaScript Ninjas should know how to role with WAI-ARIAReal JavaScript Ninjas should know how to role with WAI-ARIA
Real JavaScript Ninjas should know how to role with WAI-ARIADylan Barrell
 
Implementing and Evaluating Web Accessibility
Implementing and Evaluating Web AccessibilityImplementing and Evaluating Web Accessibility
Implementing and Evaluating Web Accessibility3Play Media
 
ATbar - Accessibility Toolbar
ATbar - Accessibility Toolbar ATbar - Accessibility Toolbar
ATbar - Accessibility Toolbar E.A. Draffan
 
Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1Jaime Brown
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Carrie Anton
 
Website Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy WorkshopsWebsite Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy WorkshopsCharles Edmunds
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Webgreenideas
 
Resistance is futile: Start writing accessible websites now!
Resistance is futile: Start writing accessible websites now!Resistance is futile: Start writing accessible websites now!
Resistance is futile: Start writing accessible websites now!Vegard Haugstvedt
 
Intro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalksIntro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalksKoombea
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissyyiming he
 
Large Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphP. Taylor Goetz
 
Large Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphDataWorks Summit
 
Mike Taulty MIX10 Silverlight 4 Accelerated Fundamentals
Mike Taulty MIX10 Silverlight 4 Accelerated FundamentalsMike Taulty MIX10 Silverlight 4 Accelerated Fundamentals
Mike Taulty MIX10 Silverlight 4 Accelerated Fundamentalsukdpe
 

Similar to Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal (20)

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
Web accessibility 101: Intersectional Inclusion in the Digital World
Web accessibility 101: Intersectional Inclusion in the Digital WorldWeb accessibility 101: Intersectional Inclusion in the Digital World
Web accessibility 101: Intersectional Inclusion in the Digital World
 
CSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen ReadersCSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen Readers
 
Accessibility pitch-deck
Accessibility pitch-deckAccessibility pitch-deck
Accessibility pitch-deck
 
Real JavaScript Ninjas should know how to role with WAI-ARIA
Real JavaScript Ninjas should know how to role with WAI-ARIAReal JavaScript Ninjas should know how to role with WAI-ARIA
Real JavaScript Ninjas should know how to role with WAI-ARIA
 
Implementing and Evaluating Web Accessibility
Implementing and Evaluating Web AccessibilityImplementing and Evaluating Web Accessibility
Implementing and Evaluating Web Accessibility
 
ATbar - Accessibility Toolbar
ATbar - Accessibility Toolbar ATbar - Accessibility Toolbar
ATbar - Accessibility Toolbar
 
Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
Website Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy WorkshopsWebsite Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy Workshops
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
 
Resistance is futile: Start writing accessible websites now!
Resistance is futile: Start writing accessible websites now!Resistance is futile: Start writing accessible websites now!
Resistance is futile: Start writing accessible websites now!
 
98 poe 2
98 poe 298 poe 2
98 poe 2
 
Intro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalksIntro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalks
 
Understanding wcag 2.0
Understanding wcag 2.0Understanding wcag 2.0
Understanding wcag 2.0
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissy
 
Large Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraph
 
Large Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraph
 
Mike Taulty MIX10 Silverlight 4 Accelerated Fundamentals
Mike Taulty MIX10 Silverlight 4 Accelerated FundamentalsMike Taulty MIX10 Silverlight 4 Accelerated Fundamentals
Mike Taulty MIX10 Silverlight 4 Accelerated Fundamentals
 

More from Raj Lal

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Raj Lal
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceRaj Lal
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization Raj Lal
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimizationRaj Lal
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...Raj Lal
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanRaj Lal
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Raj Lal
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalRaj Lal
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Raj Lal
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLalRaj Lal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLalRaj Lal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalRaj Lal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalRaj Lal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalRaj Lal
 
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalAngry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalRaj Lal
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Raj Lal
 
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Raj Lal
 
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...Raj Lal
 

More from Raj Lal (20)

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experience
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimization
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fisherman
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLal
 
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalAngry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
 
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
 
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
 

Recently uploaded

QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 

Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal

  • 2. Agenda About Target Color & How Website Users Text Access. Web Works
  • 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.
  • 9. Not so Tech Savvy users • Parents • Seniors Citizens • Low literacy level • Using Old Computers/ Browsers • Limited Bandwidth
  • 10.
  • 11. Tech Savvy users • Prefer Keyboard only • Temporary Disabled • Mobile User, Tablets, e-Readers • In extenuating circumstances - Limited attention, sound, light
  • 12.
  • 13. Users Tech Savvy Disabled Users Not so Tech-Savvy
  • 14. Users = All of Us • 20% of user 80% of Time • 80% of the user 20% of the Time
  • 16. Color Light Green Yellow Blue-Green Orange Blue Red Violet Purple Dark
  • 17. 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
  • 19. 3 Rules for Visual Accessibility
  • 20. 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
  • 21. 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
  • 23. 3 Elements of Accessible Web • Assistive Technology(AT) • ARIA & Accessibility API • W3C’s POUR Principle
  • 25. Assistive Technology Users • Visually Impaired • Blind • Cognitive, Learning Disability • Deaf • Hearing Impaired • Mobility, Physically handicapped
  • 26. 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
  • 27. 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
  • 28. 2. ARIA & Accessibility APIs
  • 29. 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
  • 30. How ARIA Works VoiceOver Windows Eye Roles States Properties Assistive Technology ARIA Platform HTML Accessibility APIs Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA
  • 31. 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
  • 32. ARIA Roles • Landmark Roles – Where Am I • Structural Roles – What’s This • Interface Widget Roles
  • 33. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. ARIA States • Dynamic Properties • Global States • Widget States
  • 38. 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
  • 39. ARIA Properties • Relatively Static Properties
  • 40. 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
  • 41. 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
  • 42. 3. W3C’s POUR Principle
  • 43. The POUR Principal Perceivable Operable Understanda Robust ble
  • 44. Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign language
  • 45. Operable • Function accessible from keyboard alone • No auto refresh, allow time based contents • Proper use of Headings & Anchors • Joysticks, Voice recognition or audio feedback
  • 46. 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
  • 47. 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
  • 48. Developing an Accessible Website using HTML5
  • 49. Accessible Website • Progressive Enhancement with ARIA • Developing an Accessible Website - Homepage - About Page - Contact Form
  • 50. Progressive Enhancement Good Design Is Unobtrusive - Dieter Rams
  • 51. Progressive Enhancement HTML CSS JavaScript HTML CSS HTML
  • 52. 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
  • 53. Accessible Website with HTML5 Home Contact About
  • 54. Accessible HTML5 Home page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … HTML5 Accessible HTML5
  • 56. 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
  • 57. 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
  • 58. Accessible About Page • Accessible Image • Accessible Text and Links • Accessible Media
  • 59. 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
  • 60. 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”
  • 61. 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
  • 62. 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
  • 63. thank you Raj Lal @ iRajLal Nokia Inc.

Editor's Notes

  1. About AccessibilityWhy is it important &amp; Who is our customerAccessible Color and TextAccessible Web and W3C’s POURHow Assistive devices WorksAccessible Website with HTML5
  2. 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
  3. 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
  4. 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
  5. And their importance in accessibility
  6. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  7. And their importance in accessibility
  8. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  9. And their importance in accessibility
  10. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  11. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  12. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  13. And their importance in accessibility
  14. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. And their importance in accessibility
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. And their importance in accessibility
  34. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  35. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  36. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  37. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  38. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  39. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  40. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  41. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  42. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  43. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  44. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  45. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  46. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  47. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.