SlideShare a Scribd company logo
HTML 5 Accessibility



Rich Schwerdtfeger
CTO Accessibility IBM Software
Steve Faulkner
Technical Director, The Paciello Group
Marco Zehe
Mozilla Corporation
HTML5 Accessibility – Building on the Basic Web Plumbing

 A Work in Progress
    •   Details still being developed and agreed on
    •   Browser implementations incomplete
    •   Assistive Technology implementations far from complete
    •   www.HTML5accessibility.com


 We are at First Last Call Status

 ALL accessibility features added have been hard fought




          2
HTML5 Accessibility – browser implementation summary




 Windows Browsers Summary - Firefox has the best HTML5 Accessibility
  Support Score
    •   Chrome, Internet Explorer, Opera and Safari are all training far behind


 Mac Browsers Summary - Safari has the best HTML5 Accessibility
  Support Score
    •   Chrome, Opera and Firefox are all training far behind


 Details: www.HTML5accessibility.com




          3
What is W3C ARIA (Accessible Rich Internet Applications)?

 A way for authors to apply rich accessibility semantics in Web 2.0 content to
  support OS platform accessibility

 A way to reproduce the keyboard functionality of desktop applications on a
  web page

 A vehicle to provide full interoperability with assistive technologies for Rich
  Internet Applications through the browser

 The evolving declarative accessibility API for the Web


                     WAI-ARIA is part of HTML 5
WAI-ARIA – Why and How it Works
                                                      20% of the work needed for rich desktop
                                                      A Cross platform accessibility API
                                                      Full Keyboard navigation like desktop
                                                      Ubiquitous adoption
                                                      Designed to support WCAG 2 and the
                                                       U.S. 508 Refresh
                                                      All major browsers providing support




                                                     <div role=“menu” aria-haspopp=“true”>
                                                       <div role = “menuitem” aria-selected=“true”
                                                         tabindex=“-1”>
                                                       A smarter planet
                                                       </div>…
   Browser converts ARIA to accessibility services   </div>


                                                       Menu Item A Smarter Planet!
               Assistive Technlogy                     One of 13 menu items
WAI-ARIA

 WAI-ARIA is integrated into HTML 5

 Author conformance defined in HTML5
    •   i.e. rules for use of ARIA in HTML5


 A new HTML to Platform Accessibility API Implementation Guide
    •   Another work in progress
    •   Provide guidance for user agent (browser) of how to implement the accessibility of HTML features.
    •   Promotes harmonization of implementation across browsers.
    •   Improved interoperability users and web developers win!




          6
MultiMedia = Multi-Modal (<video> & <audio>

Accessibility Issues with the Media elements
  User Requirements

 Blindness
 Low vision
 Atypical color perception
 Deafness
 Hard of hearing
 Deaf-blind
 Dexterity/mobility impairment
 Cognitive & neurological
  disabilities

                                  http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Requirements




         7
MultiMedia = Multi-Modal (<video> & <audio>)

Accessibility Issues with the Media elements
  Alternative Content Technologies

 Captioning
 Enhanced captions/subtitles
 Transcripts
 Sign translation
 Described video
 Extended video descriptions
 Text video description
 Clear audio
 Content navigation by content structure

                                 http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Requirements




        8
MultiMedia = Multi-Modal (<video> & <audio>)

Caption/Subtitle/Descriptive Video/ Sign Language
 Synchronization Formats
 Web Video Time Text (.vtt) http://dev.w3.org/html5/webvtt/

 Timed Text MarkUp Language (.xml.dfxp) http://www.w3.org/TR/ttaf1-dfxp/
    • Society of Television and Motion Pictures Engineers TimedText (SMPTE-TT)

 Neither format has been declared a default

 Only IE 10 supports TTML and WebVTT for both wrt. Captions/Subtitles

 Web VTT is a specification in flux - not finalized to date

 SMTPE-TT is a profile of TTML


         9
MultiMedia = Multi-Modal (<video> & <audio>)

The <track> element
       <track kind="captions" src="myvid.vtt" srclang="en"/>
       <track kind="subtitle" src="myvid_sp.xml.dfxp" srclang="sp"/>

           Keyword                                                    Brief description

                            Transcription or translation of the dialogue, suitable for when the sound is available but not
       subtitles            understood (e.g. because the user does not understand the language of the media resource's
                            soundtrack). Displayed over the video.
                            Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant
       captions             audio information, suitable for when the soundtrack is unavailable (e.g. because it is muted or
                            because the user is deaf). Displayed over the video; labeled as appropriate for the hard-of-hearing.
                            Textual descriptions of the video component of the media resource, intended for audio synthesis
       descriptions when the visual component is unavailable (e.g. because the user is interacting with the application
                            without a screen while driving, or because the user is blind). Synthesized as separate audio track.
                            Chapter titles, intended to be used for navigating the media resource. Displayed as an interactive list
       chapters
                            in the user agent's interface.

       metadata             Tracks intended for use from script. Not displayed by the user agent.



                                                            http://www.w3.org/WAI/PF/HTML/wiki/Media_TextAssociations
                                                                http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI



      10
MultiMedia = Multi-Modal (<video> & <audio>)

Alt Media (Sign Language, described video)
 A Media Controller API is emerging at the W3C that would allow for
  supporting multiple media files, allowing for sign language translation,
  extended audio-description support, etc.
 While not yet completed, this is seen as one of the last major hurdles to be
  overcome within the Working Group

Textual Alternatives
 Still to be resolved is how to provide textual alternatives (short and long) to
  the imagery associated to video elements, prior to the launch of the video




        11
MultiMedia = Multi-Modal (<video> & <audio>)

Adding a video with HTML5
           <video
             poster="myvid.jpg" (*)
             tabindex="0"
             preload="auto"
             height="240" width="320"
             controls>
           <source src="myvideo.mp4" type="video/mp4"/>
           <source src="myvideo.webm" type="video/webm"/>
           <source src="myvideo.ogv" type="video/ogg"/>
           <track kind="captions" src="myvideo.vtt" srclang="en"/>
           <track kind="subtitle" src="myvideo_sp.vtt" srclang="sp"/>
           <p>Final fallback content</p>
           </video>


      12
Canvas Accessibility Conceptualization (use of fallback content)

   <canvas>         Fallback Content (canvas subtree)      Accessible Objects in Canvas



                   <label id="labelA" for="showA">            Accessible for showA
                     <input id="showA” type="checkbox”/>
                      Show As                              Role          checkbox
                   </label>
                   <label id="labelB" for="showB">         State         unchecked
                     <input id="showB” type="checkbox”/>
                      Show Bs                              Name          ShowAs
                   </label>                                                               AT
                                                           Actions       click
                                                             Accessible for showB
                                                           Role         checkbox
                                                           State        unchecked
                                                           Name         ShowBs
                                                           Actions      click


     Canvas fallback element bounds      Browser


       13
Canvas 2D API extensions to support screen magnification

 New drawSystemFocusRing and drawCustomFocusRing functions to drive
  magnification and render focus according to system settings

 Canvas is not the best technology for rich text. HTML working group vacated
  decision on caret and selection API. Currently, accessibility being used as a
  tool to prevent its use. New caret and selection API proposal resubmitted in
  lieu of LibreOffice and Mozilla PDF Reader work

 New Text Metrics text baseline in Canvas 2D API to facilitate focus ring
  drawing

 New hit testing APIs being proposed (setElementPath, addHitRegion) to
  bind a path to fallback content supplying the magnifier location information

 New scrollPathIntoView function – inadequate as can’t be used to drive a
  magnifier without element accessibility semantics



        14
Text Alternatives: Expect things to change

 Contentious area of HTML accessibility
    •   Many HTML 4 accessibility features introduced late in the process – not well thought out
    •   longdesc seldom used and underspecified
    •   Text alternatives applied to a limited number of elements
    •   Interoperability with assistive technologies was not considered

 Changes are extensive
    •   New figure and figcaption elements
    •   longdesc and table summary are gone
    •   alt attribute not required in all cases
    •   Title attribute can be a conforming substitute for alt attribute
    •   Extensive author conformance requirements baked into HTML5


 Switching to WAI-ARIA for alternative text and descriptions
    •   Consistent mechanism to provide labels for all elements
    •   Consistent mechanism to provide descriptions for all elements
    •   ARIA 1.1 to fill gaps in HTML 5 accessibility




         15
Many New Standard Controls

 New Input Types                               Validation
   •   Range (slider)                                •   Required
   •   Text boxes: text, search, telephone,          •   Min, max, and step
       url, email, password                          •   Pattern for regular expressions
   •   Dates and Time                                •   Custom validation constraints
   •   Number: validation
   •   Color picker                             Behavior
   •   And the usual: checkbox, radio,               •   Autocomplete, list, and multiple,
       buttons, image buttons, file upload               datalist
                                                     •   Placeholder
 More Form Elements                                 •   Autofocus
   •   Output
   •   Progress                                 Interactive Elements
   •   Meter                                         •   Menus and Commands
                                                     •   Details and Summary
                     Accessibility impact
                          •   Consistently mapped to Accessibility APIs
                          •   Web apps act more like desktop apps with AT
                          •   Less need for custom UI in web apps

       16
ARIA 1.1 – Goals and issues Issues

 Fill HTML 5 gaps not addressed by ARIA 1.0
    •   An attribute to replace longdesc
    •   An attribute for a poster description
    •   New disclosure and figure roles
    •   A switch role (a subclass of chechbox)
    •   Apply aria-haspopup to more roles
    •   Inconsistencies in role overriding
    •   A semantic zoom role
    •   A caret role for cloud-based editors and SVG


 Fix minor ARIA 1.0 fixes

 Must be easy to implement




         17
HTML 5 and Mobile Web Accessibility

 Assistive Technology Features will become mainstream in mobile, Yet, …

 Mobile browser are in varying states of readiness of supporting accessible
  Web content
    •   Incomplete WAI-ARIA support
    •   Some browsers only target select disabilties
    •   HTML 5 support incomplete


 Accessibility test tools are limited to desktop

 Many mobile applications are hybrids with native application components

 Key Mobile Gap in platform is dependent on new W3C IndieUI spec.




         18
Browser/Assistive Technology Support

 Heavy lifting to start in 2012

 Will operate off the first HTML Mapping Guide

 Huge undertaking by AT vendors

 Expect mobile to lag desktop




        19
Take Aways

  HTML 5 accessibility is a work in progress
  HTML 5 accessibility will change from HTML 4
  Organizations must re-educate their development community and
   accessibility staff on the latest accessibility technology for the Web
  Do not expect full AT and tools support until 2012/13
Accessibility Test Tools

 Open Ajax Alliance to start on HTML 5 accessibility rules 2nd half 2012

 Test tools require browser plugins for dynamic content




        21

More Related Content

Viewers also liked

HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
Shaymaa
 
Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5
Kevin Bruce
 
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Yael Sahar
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
Adam Lu
 
HTML5 for Mobile - When and Why
HTML5 for Mobile - When and WhyHTML5 for Mobile - When and Why
HTML5 for Mobile - When and Why
DMI
 
HTML5 Quick Start
HTML5 Quick StartHTML5 Quick Start
HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and Connectivity
Peter Lubbers
 
Advantages and Disadvantages of Mobile phone
Advantages and Disadvantages of Mobile phoneAdvantages and Disadvantages of Mobile phone
Advantages and Disadvantages of Mobile phone
Muhammad Ali
 

Viewers also liked (8)

HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
 
Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5
 
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5 for Mobile - When and Why
HTML5 for Mobile - When and WhyHTML5 for Mobile - When and Why
HTML5 for Mobile - When and Why
 
HTML5 Quick Start
HTML5 Quick StartHTML5 Quick Start
HTML5 Quick Start
 
HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and Connectivity
 
Advantages and Disadvantages of Mobile phone
Advantages and Disadvantages of Mobile phoneAdvantages and Disadvantages of Mobile phone
Advantages and Disadvantages of Mobile phone
 

Similar to HTML5 Accessibility CSUN 2012

Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
Panagiotis Grigoropoulos
 
Word camp nextweb
Word camp nextwebWord camp nextweb
HTML5 Comprehensive Guide
HTML5 Comprehensive GuideHTML5 Comprehensive Guide
HTML5 Comprehensive Guide
Alexei Skachykhin
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
Sascha Corti
 
HTML5 Video Accessibility: Updates, Features, & Guidelines
HTML5 Video Accessibility: Updates, Features, & GuidelinesHTML5 Video Accessibility: Updates, Features, & Guidelines
HTML5 Video Accessibility: Updates, Features, & Guidelines
3Play Media
 
Enabling an Accessible Web 2.0
Enabling an Accessible Web 2.0Enabling an Accessible Web 2.0
Enabling an Accessible Web 2.0
bgibson
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
soft-shake.ch
 
Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...
Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...
Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...
John Foliot
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
Mahbubur Rahman
 
IBM WebSphere Portal 6.1 Preview - What's New
IBM WebSphere Portal 6.1 Preview - What's NewIBM WebSphere Portal 6.1 Preview - What's New
IBM WebSphere Portal 6.1 Preview - What's New
Dvir Reznik
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5
Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5
Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5
SoftEngine
 
HTML5/CSS3 and Future Web in Mobile and IPTV
HTML5/CSS3 and Future Web in Mobile and IPTVHTML5/CSS3 and Future Web in Mobile and IPTV
HTML5/CSS3 and Future Web in Mobile and IPTV
Manyoung Cho
 
Making Learning Products Accessible
Making Learning Products AccessibleMaking Learning Products Accessible
Making Learning Products Accessible
Magic Software
 
air
airair
air
locifer
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 

Similar to HTML5 Accessibility CSUN 2012 (20)

Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
HTML5 Comprehensive Guide
HTML5 Comprehensive GuideHTML5 Comprehensive Guide
HTML5 Comprehensive Guide
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
HTML5 Video Accessibility: Updates, Features, & Guidelines
HTML5 Video Accessibility: Updates, Features, & GuidelinesHTML5 Video Accessibility: Updates, Features, & Guidelines
HTML5 Video Accessibility: Updates, Features, & Guidelines
 
Enabling an Accessible Web 2.0
Enabling an Accessible Web 2.0Enabling an Accessible Web 2.0
Enabling an Accessible Web 2.0
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 
Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...
Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...
Getting ahead of the curve - Scalable, Accessible, Enterprise-class Video on ...
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 
IBM WebSphere Portal 6.1 Preview - What's New
IBM WebSphere Portal 6.1 Preview - What's NewIBM WebSphere Portal 6.1 Preview - What's New
IBM WebSphere Portal 6.1 Preview - What's New
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5
Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5
Silverlight 4 & Windows Phone 7 at Zup Zip Black Coffee#5
 
HTML5/CSS3 and Future Web in Mobile and IPTV
HTML5/CSS3 and Future Web in Mobile and IPTVHTML5/CSS3 and Future Web in Mobile and IPTV
HTML5/CSS3 and Future Web in Mobile and IPTV
 
Making Learning Products Accessible
Making Learning Products AccessibleMaking Learning Products Accessible
Making Learning Products Accessible
 
air
airair
air
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 

More from Steven Faulkner

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
Accessible web applications
Accessible web applications Accessible web applications
Accessible web applications
Steven Faulkner
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
Steven Faulkner
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
Steven Faulkner
 
HTML 5 Accessibility
HTML 5 AccessibilityHTML 5 Accessibility
HTML 5 Accessibility
Steven Faulkner
 
WAI-ARIA Singing its Praises
WAI-ARIA Singing its PraisesWAI-ARIA Singing its Praises
WAI-ARIA Singing its Praises
Steven Faulkner
 

More from Steven Faulkner (6)

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Accessible web applications
Accessible web applications Accessible web applications
Accessible web applications
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
 
HTML 5 Accessibility
HTML 5 AccessibilityHTML 5 Accessibility
HTML 5 Accessibility
 
WAI-ARIA Singing its Praises
WAI-ARIA Singing its PraisesWAI-ARIA Singing its Praises
WAI-ARIA Singing its Praises
 

Recently uploaded

JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 

Recently uploaded (20)

JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 

HTML5 Accessibility CSUN 2012

  • 1. HTML 5 Accessibility Rich Schwerdtfeger CTO Accessibility IBM Software Steve Faulkner Technical Director, The Paciello Group Marco Zehe Mozilla Corporation
  • 2. HTML5 Accessibility – Building on the Basic Web Plumbing  A Work in Progress • Details still being developed and agreed on • Browser implementations incomplete • Assistive Technology implementations far from complete • www.HTML5accessibility.com  We are at First Last Call Status  ALL accessibility features added have been hard fought 2
  • 3. HTML5 Accessibility – browser implementation summary  Windows Browsers Summary - Firefox has the best HTML5 Accessibility Support Score • Chrome, Internet Explorer, Opera and Safari are all training far behind  Mac Browsers Summary - Safari has the best HTML5 Accessibility Support Score • Chrome, Opera and Firefox are all training far behind  Details: www.HTML5accessibility.com 3
  • 4. What is W3C ARIA (Accessible Rich Internet Applications)?  A way for authors to apply rich accessibility semantics in Web 2.0 content to support OS platform accessibility  A way to reproduce the keyboard functionality of desktop applications on a web page  A vehicle to provide full interoperability with assistive technologies for Rich Internet Applications through the browser  The evolving declarative accessibility API for the Web WAI-ARIA is part of HTML 5
  • 5. WAI-ARIA – Why and How it Works  20% of the work needed for rich desktop  A Cross platform accessibility API  Full Keyboard navigation like desktop  Ubiquitous adoption  Designed to support WCAG 2 and the U.S. 508 Refresh  All major browsers providing support <div role=“menu” aria-haspopp=“true”> <div role = “menuitem” aria-selected=“true” tabindex=“-1”> A smarter planet </div>… Browser converts ARIA to accessibility services </div> Menu Item A Smarter Planet! Assistive Technlogy One of 13 menu items
  • 6. WAI-ARIA  WAI-ARIA is integrated into HTML 5  Author conformance defined in HTML5 • i.e. rules for use of ARIA in HTML5  A new HTML to Platform Accessibility API Implementation Guide • Another work in progress • Provide guidance for user agent (browser) of how to implement the accessibility of HTML features. • Promotes harmonization of implementation across browsers. • Improved interoperability users and web developers win! 6
  • 7. MultiMedia = Multi-Modal (<video> & <audio> Accessibility Issues with the Media elements User Requirements  Blindness  Low vision  Atypical color perception  Deafness  Hard of hearing  Deaf-blind  Dexterity/mobility impairment  Cognitive & neurological disabilities http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Requirements 7
  • 8. MultiMedia = Multi-Modal (<video> & <audio>) Accessibility Issues with the Media elements Alternative Content Technologies  Captioning  Enhanced captions/subtitles  Transcripts  Sign translation  Described video  Extended video descriptions  Text video description  Clear audio  Content navigation by content structure http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Requirements 8
  • 9. MultiMedia = Multi-Modal (<video> & <audio>) Caption/Subtitle/Descriptive Video/ Sign Language Synchronization Formats  Web Video Time Text (.vtt) http://dev.w3.org/html5/webvtt/  Timed Text MarkUp Language (.xml.dfxp) http://www.w3.org/TR/ttaf1-dfxp/ • Society of Television and Motion Pictures Engineers TimedText (SMPTE-TT)  Neither format has been declared a default  Only IE 10 supports TTML and WebVTT for both wrt. Captions/Subtitles  Web VTT is a specification in flux - not finalized to date  SMTPE-TT is a profile of TTML 9
  • 10. MultiMedia = Multi-Modal (<video> & <audio>) The <track> element <track kind="captions" src="myvid.vtt" srclang="en"/> <track kind="subtitle" src="myvid_sp.xml.dfxp" srclang="sp"/> Keyword Brief description Transcription or translation of the dialogue, suitable for when the sound is available but not subtitles understood (e.g. because the user does not understand the language of the media resource's soundtrack). Displayed over the video. Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant captions audio information, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). Displayed over the video; labeled as appropriate for the hard-of-hearing. Textual descriptions of the video component of the media resource, intended for audio synthesis descriptions when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). Synthesized as separate audio track. Chapter titles, intended to be used for navigating the media resource. Displayed as an interactive list chapters in the user agent's interface. metadata Tracks intended for use from script. Not displayed by the user agent. http://www.w3.org/WAI/PF/HTML/wiki/Media_TextAssociations http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI 10
  • 11. MultiMedia = Multi-Modal (<video> & <audio>) Alt Media (Sign Language, described video)  A Media Controller API is emerging at the W3C that would allow for supporting multiple media files, allowing for sign language translation, extended audio-description support, etc.  While not yet completed, this is seen as one of the last major hurdles to be overcome within the Working Group Textual Alternatives  Still to be resolved is how to provide textual alternatives (short and long) to the imagery associated to video elements, prior to the launch of the video 11
  • 12. MultiMedia = Multi-Modal (<video> & <audio>) Adding a video with HTML5 <video poster="myvid.jpg" (*) tabindex="0" preload="auto" height="240" width="320" controls> <source src="myvideo.mp4" type="video/mp4"/> <source src="myvideo.webm" type="video/webm"/> <source src="myvideo.ogv" type="video/ogg"/> <track kind="captions" src="myvideo.vtt" srclang="en"/> <track kind="subtitle" src="myvideo_sp.vtt" srclang="sp"/> <p>Final fallback content</p> </video> 12
  • 13. Canvas Accessibility Conceptualization (use of fallback content) <canvas> Fallback Content (canvas subtree) Accessible Objects in Canvas <label id="labelA" for="showA"> Accessible for showA <input id="showA” type="checkbox”/> Show As Role checkbox </label> <label id="labelB" for="showB"> State unchecked <input id="showB” type="checkbox”/> Show Bs Name ShowAs </label> AT Actions click Accessible for showB Role checkbox State unchecked Name ShowBs Actions click Canvas fallback element bounds Browser 13
  • 14. Canvas 2D API extensions to support screen magnification  New drawSystemFocusRing and drawCustomFocusRing functions to drive magnification and render focus according to system settings  Canvas is not the best technology for rich text. HTML working group vacated decision on caret and selection API. Currently, accessibility being used as a tool to prevent its use. New caret and selection API proposal resubmitted in lieu of LibreOffice and Mozilla PDF Reader work  New Text Metrics text baseline in Canvas 2D API to facilitate focus ring drawing  New hit testing APIs being proposed (setElementPath, addHitRegion) to bind a path to fallback content supplying the magnifier location information  New scrollPathIntoView function – inadequate as can’t be used to drive a magnifier without element accessibility semantics 14
  • 15. Text Alternatives: Expect things to change  Contentious area of HTML accessibility • Many HTML 4 accessibility features introduced late in the process – not well thought out • longdesc seldom used and underspecified • Text alternatives applied to a limited number of elements • Interoperability with assistive technologies was not considered  Changes are extensive • New figure and figcaption elements • longdesc and table summary are gone • alt attribute not required in all cases • Title attribute can be a conforming substitute for alt attribute • Extensive author conformance requirements baked into HTML5  Switching to WAI-ARIA for alternative text and descriptions • Consistent mechanism to provide labels for all elements • Consistent mechanism to provide descriptions for all elements • ARIA 1.1 to fill gaps in HTML 5 accessibility 15
  • 16. Many New Standard Controls  New Input Types  Validation • Range (slider) • Required • Text boxes: text, search, telephone, • Min, max, and step url, email, password • Pattern for regular expressions • Dates and Time • Custom validation constraints • Number: validation • Color picker  Behavior • And the usual: checkbox, radio, • Autocomplete, list, and multiple, buttons, image buttons, file upload datalist • Placeholder  More Form Elements • Autofocus • Output • Progress  Interactive Elements • Meter • Menus and Commands • Details and Summary Accessibility impact • Consistently mapped to Accessibility APIs • Web apps act more like desktop apps with AT • Less need for custom UI in web apps 16
  • 17. ARIA 1.1 – Goals and issues Issues  Fill HTML 5 gaps not addressed by ARIA 1.0 • An attribute to replace longdesc • An attribute for a poster description • New disclosure and figure roles • A switch role (a subclass of chechbox) • Apply aria-haspopup to more roles • Inconsistencies in role overriding • A semantic zoom role • A caret role for cloud-based editors and SVG  Fix minor ARIA 1.0 fixes  Must be easy to implement 17
  • 18. HTML 5 and Mobile Web Accessibility  Assistive Technology Features will become mainstream in mobile, Yet, …  Mobile browser are in varying states of readiness of supporting accessible Web content • Incomplete WAI-ARIA support • Some browsers only target select disabilties • HTML 5 support incomplete  Accessibility test tools are limited to desktop  Many mobile applications are hybrids with native application components  Key Mobile Gap in platform is dependent on new W3C IndieUI spec. 18
  • 19. Browser/Assistive Technology Support  Heavy lifting to start in 2012  Will operate off the first HTML Mapping Guide  Huge undertaking by AT vendors  Expect mobile to lag desktop 19
  • 20. Take Aways  HTML 5 accessibility is a work in progress  HTML 5 accessibility will change from HTML 4  Organizations must re-educate their development community and accessibility staff on the latest accessibility technology for the Web  Do not expect full AT and tools support until 2012/13
  • 21. Accessibility Test Tools  Open Ajax Alliance to start on HTML 5 accessibility rules 2nd half 2012  Test tools require browser plugins for dynamic content 21