SlideShare a Scribd company logo
1 of 46
Download to read offline
Accessible Design with HTML5
      Developing Web for Accessibility




                                  Raj Lal
                          Senior Engineer
GOAL: Accessibility with HTML5


        1. What


     2. Why


      3. How
1. What is Web Accessibility ?



                  Making
     Content & Feature of your Web page
        Easily available to Everyone




1
Content & Feature




    Communication   Interaction
             Text   Login
             Link   Contact
          Images    Search
           Media    Registration
        Animation
1
Easily Available


    Easy to Find, Understand and Use by:




    Browsers     Assistive    Search    Devices
               Technologies   Engines


1
By Everyone


    •   Disabled, Temporary disabled
    •   Not so tech savvy users
    •   Senior Citizens, Parents
    •   Advanced Users, Mobile Users
    •   Low literacy level
    •   Users in extenuating circumstances



1
By Everyone




1
Why Accessibility ?


           1. What


        2. Why


         3. How
     1. WHAT
2
The Business Case




       Seniors   Section 508   SEO = Traffic



2
Seniors


    • Seniors folks Population is 117 Million with
      annual spending power of 2 Trillion dollars

    • 1/4 consumer is baby boomer (born 1946-1964)

    • 57% working-age adults benefit Assistive Tech


      1. WHAT
2
                                                        • Book: Marketing to leading edge boomers and seniors ,
                           * Recent study: http://msdn.microsoft.com/en-us/library/windows/desktop/gg712257.aspx
Section 508




                     Support
                  Disabled Users


2
Section 508


    Hearing       Mobility



Cognitive         Visual


2
SEO

    • Legal & General Group (L&G) Doubled number
      of visitors http://www.legalandgeneral.com
      •   Within 24 hours search engine traffic saw a 25% increase, eventually
          growing to 50%.

      •   Significant improvement in Google rankings for all target keywords

      •   Site visitors receiving quotations doubled within 3 months

    • CNET - 30% increase in traffic from Google
      • after CNET started providing transcripts
      1. WHAT
2


                                                           http://www.w3.org/WAI/bcase/resources.html
How to HTML5 for Accessibility


       1. What


    2. Why


     3. How
 1. WHAT
How to HTML5 for Accessibility




Progressive       ARIA           Pour       HTML5
 Enhance       Accessibility   Principle   Semantics


     1. WHAT
3
Progressive Enhancement



                              HTML CSS
                              JavaScript
                HTML CSS
     HTML



     1. WHAT
3
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


     1. WHAT
3
ARIA Accessibility APIs


    ARIA = Accessible Rich Internet Applications

    Part of HTML5 Specification




      1. WHAT
3
ARIA Accessibility APIs

    • ARIA helps Assistive Technology(AT)
    • ARIA Make Web content Accessible to AT
    • ARIA uses HTML and CSS Tags
    • Most of ARIA is embedded in JS libraries



      1. WHAT
3
How ARIA Works
    VoiceOver
    Windows Eye
                               Roles   States Properties
     Assistive
    Technology

                                       ARIA
                   Platform                                HTML
                  Accessibility
                     APIs
      1. WHATOSX Accessibility Protocol
          Mac
          Linux IAccessible2
3
          Windows MSAA
ARIA Accessibility APIs

    • Uses a set of
      -   Roles
      -   States and
      -   Properties




     1. WHAT
3
ARIA Roles




    • Landmark Roles – Where Am I
    • Structural Roles – What’s This
    • Interface Widget Roles
      1. WHAT
3
ARIA Roles


       Role type   Role name       Role name
       Landmark    application     form
       roles       banner          main
                   complementary   navigation
                   contentinfo     search



     1. WHAT
3
ARIA Roles

       Role type    Role name      Role name
       Structural   article        listitem
       roles        columnheader   math
                    definition     note
                    directory      presentation
                    document       region
                    group          row
                    heading        rowheader
     1. WHAT        img            separator
3
                    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
     1. WHAT         link                treeitem
                     log                 composite
3
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
     1. WHAT        scrollbar          tablist
                    slider             Tree / treegrid
3
ARIA States




    • Dynamic Properties
    • Global States
    • Widget States
     1. WHAT
3
ARIA States

      Attribute type Global          Widget
      ARIA states    aria-busy       listitem
                     aria-disabled   math
                     aria-grabbed    note
                     aria-hidden
                                     presentation
                     aria-invalid
                                     region
                                     row
                                     rowheader
     1. WHAT                         separator
3
                                     toolbar
ARIA Properties

      Attribute    Global            Widget
      ARIA         aria-atomic       aria-autocomplete
      Properties   aria-controls     aria-haspopup
                   aria-             aria-label
                   describedby       aria-level
                   aria-dropeffect   aria-multiline
                   aria-flowto       aria-multiselectable
                   aria-haspopup
     1. WHAT       aria-label
3
                   aria-labelledby
ARIA Properties

       Attribute type    Global          Widget
       ARIA Properties   aria-live       aria-orientation
                         aria-owns       aria-readonly
                         aria-relevant   aria-required
                                         aria-sort
                                         aria-valuemax
                                         aria-valuemin
                                         aria-valuenow
     1. WHAT                             aria-valuetext
3
W3C POUR Principle




Perceivable    Operable   Understand   Robust
                              able
     1. WHAT
3
Perceivable

    • Text alternative to all non-text content

    • Alternative for media using subtitles

    • Transcribed text and Sign language




       1. WHAT
3
Operable

• Function accessible from keyboard alone

• No auto refresh, allow time based contents

• Proper use of Headings & Anchors

• Joysticks, Voice recognition or audio feedback


     1. WHAT
3
Understandable

    • High color contrast 4.5:1

    • Use Sans serif fonts & allow resize

    • Avoid auto-play of media, animation

    • Avoid auto refresh, or flashy graphics

    • Multiple visual cues, icons, audio for feedback
     1. WHAT
3
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
     1. WHAT
3
HTML5 Semantics


    Semantics are 30 new HTML elements which
        describe the content of the page




     1. WHAT
3
Accessible HTML5 Website



                      Home



               Form          Content


     1. WHAT
3
Accessible Home Page



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


                      Accessible HTML5
     1. WHAT
          HTML5
3
Accessible Form




     1. WHAT
3
Accessible 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
   1. WHAT
3
Accessible 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

       1. WHAT
3
Accessible Content


    • Accessible Image
    • Accessible Text and Links




      1. WHAT
3
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

       1. WHAT
3
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”
    1. WHAT
  3
Reference


    WAI ARIA: http://www.w3.org/WAI/intro/aria

    WCAG: http://www.w3.org/TR/WCAG/

    POUR PRINCIPLE: http://webaim.org/articles/pour/




     1. WHAT
3
Thank You
   Raj Lal




Twitter @ iRajLal

More Related Content

Similar to Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal

Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Raj Lal
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Raj Lal
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIAIWMW
 
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
 
Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1Jaime Brown
 
HTML5 and Timed Media Playback
HTML5 and Timed Media PlaybackHTML5 and Timed Media Playback
HTML5 and Timed Media PlaybackSidra Abbasi
 
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
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissyyiming he
 
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
 
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIAAccess iQ
 
Presentation API Walkthrough
Presentation API WalkthroughPresentation API Walkthrough
Presentation API WalkthroughIIIF_io
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Webgreenideas
 
The API Facade Pattern: Overview - Episode 1
The API Facade Pattern: Overview - Episode 1The API Facade Pattern: Overview - Episode 1
The API Facade Pattern: Overview - Episode 1Apigee | Google Cloud
 
Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web AccessibilityHagai Asaban
 
HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012Steven Faulkner
 
Ext JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and componentsExt JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and componentsPatrick Sheridan
 
HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...
HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...
HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...Michael Stack
 
Toolkit for the Digital Accessibility Space
Toolkit for the Digital Accessibility SpaceToolkit for the Digital Accessibility Space
Toolkit for the Digital Accessibility Space3Play Media
 

Similar to Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal (20)

Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
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
 
Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1Accessibility (WCAG) Draft 1
Accessibility (WCAG) Draft 1
 
HTML5 and Timed Media Playback
HTML5 and Timed Media PlaybackHTML5 and Timed Media Playback
HTML5 and Timed Media Playback
 
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
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissy
 
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
 
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
 
Presentation API Walkthrough
Presentation API WalkthroughPresentation API Walkthrough
Presentation API Walkthrough
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
 
The API Facade Pattern: Overview - Episode 1
The API Facade Pattern: Overview - Episode 1The API Facade Pattern: Overview - Episode 1
The API Facade Pattern: Overview - Episode 1
 
Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo Status ESUG 2014
Pharo Status ESUG 2014
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012
 
Ext JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and componentsExt JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and components
 
HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...
HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...
HBaseConEast2016: How yarn timeline service v.2 unlocks 360 degree platform i...
 
Toolkit for the Digital Accessibility Space
Toolkit for the Digital Accessibility SpaceToolkit for the Digital Accessibility Space
Toolkit for the Digital Accessibility Space
 
Raptor 2
Raptor 2Raptor 2
Raptor 2
 

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
 
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
 
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...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
 
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 @...
 
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 ...
 

Recently uploaded

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 

Recently uploaded (20)

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal

  • 1. Accessible Design with HTML5 Developing Web for Accessibility Raj Lal Senior Engineer
  • 2. GOAL: Accessibility with HTML5 1. What 2. Why 3. How
  • 3. 1. What is Web Accessibility ? Making Content & Feature of your Web page Easily available to Everyone 1
  • 4. Content & Feature Communication Interaction Text Login Link Contact Images Search Media Registration Animation 1
  • 5. Easily Available Easy to Find, Understand and Use by: Browsers Assistive Search Devices Technologies Engines 1
  • 6. By Everyone • Disabled, Temporary disabled • Not so tech savvy users • Senior Citizens, Parents • Advanced Users, Mobile Users • Low literacy level • Users in extenuating circumstances 1
  • 8. Why Accessibility ? 1. What 2. Why 3. How 1. WHAT 2
  • 9. The Business Case Seniors Section 508 SEO = Traffic 2
  • 10. Seniors • Seniors folks Population is 117 Million with annual spending power of 2 Trillion dollars • 1/4 consumer is baby boomer (born 1946-1964) • 57% working-age adults benefit Assistive Tech 1. WHAT 2 • Book: Marketing to leading edge boomers and seniors , * Recent study: http://msdn.microsoft.com/en-us/library/windows/desktop/gg712257.aspx
  • 11. Section 508 Support Disabled Users 2
  • 12. Section 508 Hearing Mobility Cognitive Visual 2
  • 13. SEO • Legal & General Group (L&G) Doubled number of visitors http://www.legalandgeneral.com • Within 24 hours search engine traffic saw a 25% increase, eventually growing to 50%. • Significant improvement in Google rankings for all target keywords • Site visitors receiving quotations doubled within 3 months • CNET - 30% increase in traffic from Google • after CNET started providing transcripts 1. WHAT 2 http://www.w3.org/WAI/bcase/resources.html
  • 14. How to HTML5 for Accessibility 1. What 2. Why 3. How 1. WHAT
  • 15. How to HTML5 for Accessibility Progressive ARIA Pour HTML5 Enhance Accessibility Principle Semantics 1. WHAT 3
  • 16. Progressive Enhancement HTML CSS JavaScript HTML CSS HTML 1. WHAT 3
  • 17. 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 1. WHAT 3
  • 18. ARIA Accessibility APIs ARIA = Accessible Rich Internet Applications Part of HTML5 Specification 1. WHAT 3
  • 19. ARIA Accessibility APIs • ARIA helps Assistive Technology(AT) • ARIA Make Web content Accessible to AT • ARIA uses HTML and CSS Tags • Most of ARIA is embedded in JS libraries 1. WHAT 3
  • 20. How ARIA Works VoiceOver Windows Eye Roles States Properties Assistive Technology ARIA Platform HTML Accessibility APIs 1. WHATOSX Accessibility Protocol Mac Linux IAccessible2 3 Windows MSAA
  • 21. ARIA Accessibility APIs • Uses a set of - Roles - States and - Properties 1. WHAT 3
  • 22. ARIA Roles • Landmark Roles – Where Am I • Structural Roles – What’s This • Interface Widget Roles 1. WHAT 3
  • 23. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search 1. WHAT 3
  • 24. ARIA Roles Role type Role name Role name Structural article listitem roles columnheader math definition note directory presentation document region group row heading rowheader 1. WHAT img separator 3 list toolbar
  • 25. 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 1. WHAT link treeitem log composite 3
  • 26. 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 1. WHAT scrollbar tablist slider Tree / treegrid 3
  • 27. ARIA States • Dynamic Properties • Global States • Widget States 1. WHAT 3
  • 28. ARIA States Attribute type Global Widget ARIA states aria-busy listitem aria-disabled math aria-grabbed note aria-hidden presentation aria-invalid region row rowheader 1. WHAT separator 3 toolbar
  • 29. ARIA Properties Attribute Global Widget ARIA aria-atomic aria-autocomplete Properties aria-controls aria-haspopup aria- aria-label describedby aria-level aria-dropeffect aria-multiline aria-flowto aria-multiselectable aria-haspopup 1. WHAT aria-label 3 aria-labelledby
  • 30. ARIA Properties Attribute type Global Widget ARIA Properties aria-live aria-orientation aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow 1. WHAT aria-valuetext 3
  • 31. W3C POUR Principle Perceivable Operable Understand Robust able 1. WHAT 3
  • 32. Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign language 1. WHAT 3
  • 33. Operable • Function accessible from keyboard alone • No auto refresh, allow time based contents • Proper use of Headings & Anchors • Joysticks, Voice recognition or audio feedback 1. WHAT 3
  • 34. Understandable • High color contrast 4.5:1 • Use Sans serif fonts & allow resize • Avoid auto-play of media, animation • Avoid auto refresh, or flashy graphics • Multiple visual cues, icons, audio for feedback 1. WHAT 3
  • 35. 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 1. WHAT 3
  • 36. HTML5 Semantics Semantics are 30 new HTML elements which describe the content of the page 1. WHAT 3
  • 37. Accessible HTML5 Website Home Form Content 1. WHAT 3
  • 38. Accessible Home Page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … Accessible HTML5 1. WHAT HTML5 3
  • 39. Accessible Form 1. WHAT 3
  • 40. Accessible 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 1. WHAT 3
  • 41. Accessible 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 1. WHAT 3
  • 42. Accessible Content • Accessible Image • Accessible Text and Links 1. WHAT 3
  • 43. 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 1. WHAT 3
  • 44. 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” 1. WHAT 3
  • 45. Reference WAI ARIA: http://www.w3.org/WAI/intro/aria WCAG: http://www.w3.org/TR/WCAG/ POUR PRINCIPLE: http://webaim.org/articles/pour/ 1. WHAT 3
  • 46. Thank You Raj Lal Twitter @ iRajLal

Editor's Notes

  1. Multiple Browsers: Old &amp; NewMultiple Devices: Mobile, Tablet, TV, PCAssistive Technologies: Audio Browsers, Text only Browsers, Screen Readers, MagnifiersSearch Engines spiders
  2. Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  3. Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  4. Boomer and Senior population 117 Million with annual spending power of more than 2 trillion