SlideShare une entreprise Scribd logo
1  sur  48
Télécharger pour lire hors ligne
HTML5 and a11y
Sitting in a tree
Bruce Lawson
Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
30 new elements
Top 20 class names
   1. footer                                       11. button
   2. menu                                          12. main
   3. style1                                       13. style3
4. msonormal                                        14. small
    5. text                                          15. nav
  6. content                                        16. clear
    7. title                                       17. search
   8. style2                                       18. style4
  9. header                                         19. logo
10. copyright                                       20. body
     http://devfiles.myopera.com/articles/572/classlist-url.htm
Top 20 id names
    1. footer                                        11. search
   2. content                                         12. nav
    3. header                                      13. wrapper
      4. logo                                         14. top
  5. container                                      15. table2
     6. main                                        16. layer2
    7. table1                                      17. sidebar
     8. menu                                       18. image1
    9. layer1                                       19. banner
10. autonumber1                                   20. navigation
      http://devfiles.myopera.com/articles/572/idlist-url.htm
<content> ?
HTML5 forms
      standardise commonly-used
rich form elements – without JavaScript
built-in validation
           (of course you should still validate on the server)

                 <input type=email>
             <input type=url required>
         <input type=range min=10 max=100>
 <input type=date min=2010-01-01 max=2010-12-31>
<input pattern="[0-9][A-Z]{3}" placeholder="9AAA">

     http://people.opera.com/brucel/demo/html5-forms-demo.html
<video> and <audio>
Anne van Kesteren annevk at opera.com
Wed Feb 28 05:47:56 PST 2007

Hi,
Opera has some internal expiremental builds with an implementation of a <video> element. The element
exposes a simple API (for the moment) much like the Audio() object:
  play()
  pause()
  Stop()

The idea is that it works like <object> except that it has special <video> semantics much like <img> has
image semantics. In markup you could prolly use it as follows:

 <figure>
  <video src=news-snippet.ogg>
   ...
  </video>
  <legend>HTML5 in BBC News</legend>
 </figure>

I attached a proposal for the element and as you can see there are still some open issues. The element and
its API are of course open for debate. We're not enforcing this upon the world ;-)

Cheers,
          http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
<object width="425" height="344">
  <param name="movie"
value="http://www.example.com/v/9sEI1AUFJKw&hl=en
&fs=1&"></param>
  <param name="allowFullScreen"
value="true"></param>
  <param name="allowscriptaccess"
value="always"></param>
  <embed
src="http://www.example.com/v/9sEI1AUFJKw&hl=en&f
s=1&" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed>
</object>
<video src=pudding.webm
  controls
  autoplay
  poster=poster.jpg
  width=320 height=240>
    <a href=video.webm>Download movie</a>
</video>
<audio src=jedward.ogg
  controls
  autoplay>
     <a href=jedward.ogg>Download horrid pap</a>
</audio>
<video src=pudding.webm loop>
<audio   src=jedward.ogg   preload>
<audio   src=jedward.ogg   preload=auto>
<audio   src=jedward.ogg   preload=none>
<audio   src=jedward.ogg   preload=metadata>
powerful (simple) API
controlling <video> with JavaScript
var v = document.getElementByTagName('video')
[0];

v.play();
v.pause();
v.volume = … ;
v.currentTime = … ;
…
events fired by <video>
var v = document.getElementById('player');

v.addEventListener('loadeddata', function() { … }, true)
v.addEventListener('play', function() { … }, true)
v.addEventListener('pause', function() { … }, true)
v.addEventListener('timeupdate', function() { … }, true)
v.addEventListener('ended', function() { … }, true)
…
video as native object...why is it important?

●
    keyboard accessibility built-in
●
    “play nice” with rest of the page
●
    Simple API for controls
video formats

               webM            Ogg/ Theora    mp4/ h264

Opera            yes               yes

Chrome           yes               yes           Nope
                                             (Chrome.soon)
Firefox      Yes (FF4)             yes

Safari                                            yes

IE9       Yes (if installed)                      yes
audio formats

          mp3      Ogg/ Vobis   wav

Opera                 yes       yes

Chrome     yes        yes

Firefox               yes       yes

Safari     yes                  yes

IE9       yes                   no
Giving everybody video

<video controls autoplay poster=… width=… height=…>
  <source src=pudding.mp4 type=video/mp4>
  <source src=pudding.webm type=video/webm>
  <source src=pudding.ogv type=video/ogg>
  <!-- fallback content -->
</video>
<video controls poster="…" width="…" height="…">
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.webm" type="video/webm" />
   <source src="movie.ogv" type="video/ogg" />

   <object width="…" height="…" type="application/x-
shockwave-flash" data="player.swf">
      <param name="movie" value="player.swf" />
      <param name="flashvars" value=" … file=movie.mp4" />
      <!-- fallback content -->
   </object>

</video>




       still include fallback for old browsers
            http://camendesign.com/code/video_for_everybody
Help
●
    archive.org converts and hosts creative-commons
    licensed media
●   vid.ly has a free conversion/ hosting service (max 1GB
    source file) see vid.ly/5u4h3e
●   Miro video converter is a drag and drop GUI skin on
    FFMPEG
Full-screen video
●
  Currently, WebkitEnterFullscreen();
●
  May 11, WebKit announced it's implementing Gecko API
  https://wiki.mozilla.org/Gecko:FullScreenAPI
●
  Opera likes this approach, too
<video> accessibility
WebM release does not support subtitles




WHATWG / W3C RFC will release guidance on subtitles and other
overlays in HTML5 <video> in the near future. WebM intends to follow
that guidance.




 http://code.google.com/p/webm/issues/detail?id=11
 Egg image Kacper "Kangel" Aniołek http://commons.wikimedia.org/wiki/File:Egg.jpg
<track> element

<video controls poster=… width=… height=…>
    <source src=movie.webm type=video/webm>
    <track src=subtitles-en.vtt kind=subtitles srclang=en>
    <track src=subtitles-de.vtt kind=subtitles srclang=de>
    <!-- fallback content -->
</video>


http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
webVTT

WEBVTT FILE

1
01:23:45,678 --> 01:23:46,789
Hello world!

2
01:23:48,910 --> 01:23:49,101
Hello
World!
WebVTT formatting

 Supports positioning of text
   Supports <b> and <i>
Colouring individual speakers
    Support vertical text
        Supports RTL
 Supports ruby annotations
<track> polyfill
http://www.delphiki.com/html5/playr/
Synchronising media elements
                               @mediagroup
www.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising-multiple-
                                  media-elements
getUserMedia API
(previously known as "HTML5 <device>")
my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
WebRTC is a free, open project that enables web browsers
   with Real-Time Communications (RTC) capabilities via
simple Javascript APIs. The WebRTC components have been
           optimized to best serve this purpose.

  The WebRTC initiative is a project supported by Google,
                   Mozilla and Opera.

                       http://sites.google.com/site/webrtc/
http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing-
                     and-peer-to-peer-communication.html
All rights reserved corner

 Thanks Takara Tomy for permission to use Gigapudding
                video. Buy the pudding.
  HTML5 nazi-killing Bruce on unicorn picture by Marina
             Lawson. Buy her Dad's book.
Thanks Brittany Shaw for permission to use her Biscuit and
              Chica photo. Buy a rabbit pie.


       All others by me or (I believe) public domain.
brucel@opera.com
     @brucel

Contenu connexe

Tendances

HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
Patrick Lauke
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
Robert Nyman
 

Tendances (20)

HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache TuscanyS314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
 
So you want to build a Facebook app
So you want to build a Facebook appSo you want to build a Facebook app
So you want to build a Facebook app
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
 
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsPyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web apps
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 

Similaire à HTML5 and Accessibility sitting in a tree

Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Patrick Lauke
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Patrick Lauke
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
Patrick Lauke
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Robert Nyman
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
Patrick Lauke
 
Web Directions @media 2010
Web Directions @media 2010Web Directions @media 2010
Web Directions @media 2010
Patrick Lauke
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 

Similaire à HTML5 and Accessibility sitting in a tree (20)

Disruptive code
Disruptive codeDisruptive code
Disruptive code
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
 
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support
 
Web Directions @media 2010
Web Directions @media 2010Web Directions @media 2010
Web Directions @media 2010
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 

Plus de brucelawson

Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japan
brucelawson
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meet
brucelawson
 

Plus de brucelawson (15)

Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
 
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
W3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standards
 
Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japan
 
HTML5 and CSS 3
HTML5 and CSS 3HTML5 and CSS 3
HTML5 and CSS 3
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meet
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan PolandBruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentation
 
Practical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentPractical Tips for Mobile Widget development
Practical Tips for Mobile Widget development
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?
 

Dernier

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Dernier (20)

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

HTML5 and Accessibility sitting in a tree

  • 1. HTML5 and a11y Sitting in a tree Bruce Lawson
  • 2.
  • 3.
  • 4. Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
  • 6.
  • 7. Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  • 8. Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  • 9.
  • 10.
  • 12. HTML5 forms standardise commonly-used rich form elements – without JavaScript
  • 13. built-in validation (of course you should still validate on the server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31> <input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html
  • 14.
  • 15.
  • 17. Anne van Kesteren annevk at opera.com Wed Feb 28 05:47:56 PST 2007 Hi, Opera has some internal expiremental builds with an implementation of a <video> element. The element exposes a simple API (for the moment) much like the Audio() object: play() pause() Stop() The idea is that it works like <object> except that it has special <video> semantics much like <img> has image semantics. In markup you could prolly use it as follows: <figure> <video src=news-snippet.ogg> ... </video> <legend>HTML5 in BBC News</legend> </figure> I attached a proposal for the element and as you can see there are still some open issues. The element and its API are of course open for debate. We're not enforcing this upon the world ;-) Cheers, http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
  • 18. <object width="425" height="344"> <param name="movie" value="http://www.example.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.example.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
  • 19. <video src=pudding.webm controls autoplay poster=poster.jpg width=320 height=240> <a href=video.webm>Download movie</a> </video>
  • 20. <audio src=jedward.ogg controls autoplay> <a href=jedward.ogg>Download horrid pap</a> </audio>
  • 22. <audio src=jedward.ogg preload> <audio src=jedward.ogg preload=auto> <audio src=jedward.ogg preload=none> <audio src=jedward.ogg preload=metadata>
  • 23.
  • 25. controlling <video> with JavaScript var v = document.getElementByTagName('video') [0]; v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
  • 26. events fired by <video> var v = document.getElementById('player'); v.addEventListener('loadeddata', function() { … }, true) v.addEventListener('play', function() { … }, true) v.addEventListener('pause', function() { … }, true) v.addEventListener('timeupdate', function() { … }, true) v.addEventListener('ended', function() { … }, true) …
  • 27. video as native object...why is it important? ● keyboard accessibility built-in ● “play nice” with rest of the page ● Simple API for controls
  • 28.
  • 29. video formats webM Ogg/ Theora mp4/ h264 Opera yes yes Chrome yes yes Nope (Chrome.soon) Firefox Yes (FF4) yes Safari yes IE9 Yes (if installed) yes
  • 30. audio formats mp3 Ogg/ Vobis wav Opera yes yes Chrome yes yes Firefox yes yes Safari yes yes IE9 yes no
  • 31. Giving everybody video <video controls autoplay poster=… width=… height=…> <source src=pudding.mp4 type=video/mp4> <source src=pudding.webm type=video/webm> <source src=pudding.ogv type=video/ogg> <!-- fallback content --> </video>
  • 32. <video controls poster="…" width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <object width="…" height="…" type="application/x- shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" … file=movie.mp4" /> <!-- fallback content --> </object> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  • 33. Help ● archive.org converts and hosts creative-commons licensed media ● vid.ly has a free conversion/ hosting service (max 1GB source file) see vid.ly/5u4h3e ● Miro video converter is a drag and drop GUI skin on FFMPEG
  • 34. Full-screen video ● Currently, WebkitEnterFullscreen(); ● May 11, WebKit announced it's implementing Gecko API https://wiki.mozilla.org/Gecko:FullScreenAPI ● Opera likes this approach, too
  • 36.
  • 37. WebM release does not support subtitles WHATWG / W3C RFC will release guidance on subtitles and other overlays in HTML5 <video> in the near future. WebM intends to follow that guidance. http://code.google.com/p/webm/issues/detail?id=11 Egg image Kacper "Kangel" Aniołek http://commons.wikimedia.org/wiki/File:Egg.jpg
  • 38. <track> element <video controls poster=… width=… height=…> <source src=movie.webm type=video/webm> <track src=subtitles-en.vtt kind=subtitles srclang=en> <track src=subtitles-de.vtt kind=subtitles srclang=de> <!-- fallback content --> </video> http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
  • 39. webVTT WEBVTT FILE 1 01:23:45,678 --> 01:23:46,789 Hello world! 2 01:23:48,910 --> 01:23:49,101 Hello World!
  • 40. WebVTT formatting Supports positioning of text Supports <b> and <i> Colouring individual speakers Support vertical text Supports RTL Supports ruby annotations
  • 42. Synchronising media elements @mediagroup www.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising-multiple- media-elements
  • 43. getUserMedia API (previously known as "HTML5 <device>")
  • 45. WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. The WebRTC initiative is a project supported by Google, Mozilla and Opera. http://sites.google.com/site/webrtc/ http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing- and-peer-to-peer-communication.html
  • 46.
  • 47. All rights reserved corner Thanks Takara Tomy for permission to use Gigapudding video. Buy the pudding. HTML5 nazi-killing Bruce on unicorn picture by Marina Lawson. Buy her Dad's book. Thanks Brittany Shaw for permission to use her Biscuit and Chica photo. Buy a rabbit pie. All others by me or (I believe) public domain.
  • 48. brucel@opera.com @brucel