5      Semantics
HTML

       Accessibility
       &Forms
       Aaron Gustafson
H TML5
p rovides
more c  ontrol




                 2
Paves the
c owpaths we’ve
carved on the web   3
The pr ocess is
ong oing, ho wever,
so w atch yo ur step
                       4
HTML5: Semantics, Accessibility & Forms!                                HTML5 Online Conference — 1 November 2010




Then...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Then & now




<div class="figure...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Then & now




<figure>
  <img sr...
HTML5: Semantics, Accessibility & Forms!                                          HTML5 Online Conference — 1 November 201...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Then & now




<figure>
  <img sr...
HTML5: Semantics, Accessibility & Forms!               HTML5 Online Conference — 1 November 2010




Oldies but goodies
  ...
HTML5: Semantics, Accessibility & Forms!                    HTML5 Online Conference — 1 November 2010




New & revisited
...
HTML5: Semantics, Accessibility & Forms!                    HTML5 Online Conference — 1 November 2010




Our focus today
...
Cha-cha-cha-
            changes...
                         13
HTML5: Semantics, Accessibility & Forms!                 HTML5 Online Conference — 1 November 2010




b and i are back
Th...
HTML5: Semantics, Accessibility & Forms!            HTML5 Online Conference — 1 November 2010




em and strong got adjust...
HTML5: Semantics, Accessibility & Forms!                     HTML5 Online Conference — 1 November 2010




small turned to...
HTML5: Semantics, Accessibility & Forms!                      HTML5 Online Conference — 1 November 2010




cite got clari...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




menu got resurrected
The menu ele...
HTML5: Semantics, Accessibility & Forms!    HTML5 Online Conference — 1 November 2010




hr found meaning
The hr element
...
HTML5   offers many
new op tions for
building documents    20
HTML5: Semantics, Accessibility & Forms!                    HTML5 Online Conference — 1 November 2010




Organization: se...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: section & article

...
HTML5: Semantics, Accessibility & Forms!             HTML5 Online Conference — 1 November 2010




Organization: section &...
HTML5: Semantics, Accessibility & Forms!                       HTML5 Online Conference — 1 November 2010




Organization:...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: section & article

...
HTML5: Semantics, Accessibility & Forms!             HTML5 Online Conference — 1 November 2010




Organization: section &...
HTML5: Semantics, Accessibility & Forms!                       HTML5 Online Conference — 1 November 2010




Organization:...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: header & footer
The...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: header & footer



...
HTML5: Semantics, Accessibility & Forms!            HTML5 Online Conference — 1 November 2010




Organization: header & f...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: header & footer



...
HTML5: Semantics, Accessibility & Forms!            HTML5 Online Conference — 1 November 2010




Organization: header & f...
HTML5: Semantics, Accessibility & Forms!             HTML5 Online Conference — 1 November 2010




Organization: header & ...
HTML5: Semantics, Accessibility & Forms!                      HTML5 Online Conference — 1 November 2010




Organization: ...
HTML5: Semantics, Accessibility & Forms!             HTML5 Online Conference — 1 November 2010




Organization: header & ...
HTML5: Semantics, Accessibility & Forms!                      HTML5 Online Conference — 1 November 2010




Organization: ...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: nav
The nav element...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: nav




           ...
HTML5: Semantics, Accessibility & Forms!         HTML5 Online Conference — 1 November 2010




Organization: nav




     ...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: nav




           ...
HTML5: Semantics, Accessibility & Forms!         HTML5 Online Conference — 1 November 2010




Organization: nav




     ...
HTML5: Semantics, Accessibility & Forms!                 HTML5 Online Conference — 1 November 2010




Organization: aside...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Organization: aside




         ...
HTML5: Semantics, Accessibility & Forms!           HTML5 Online Conference — 1 November 2010




Organization: aside




 ...
HTML5: Semantics, Accessibility & Forms!                                                                  HTML5 Online Con...
HTML5: Semantics, Accessibility & Forms!                 HTML5 Online Conference — 1 November 2010




Organization: figur...
Docu ment o utlines
in HTML5         47
HTML5: Semantics, Accessibility & Forms!                                              HTML5 Online Conference — 1 November...
HTML5: Semantics, Accessibility & Forms!                                              HTML5 Online Conference — 1 November...
HTML5: Semantics, Accessibility & Forms!                                              HTML5 Online Conference — 1 November...
HTML5: Semantics, Accessibility & Forms!                                              HTML5 Online Conference — 1 November...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Section management
Sectioning ele...
HTML5: Semantics, Accessibility & Forms!                               HTML5 Online Conference — 1 November 2010




Outli...
HTML5: Semantics, Accessibility & Forms!                               HTML5 Online Conference — 1 November 2010




Enter...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Section management
Sectioning roo...
HTML5: Semantics, Accessibility & Forms!                                 HTML5 Online Conference — 1 November 2010




Roo...
elem  ents
New
to c ons ider




                   57
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Multimedia
audio
video
canvas
(pl...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Multimedia
audio
video
canvas
(pl...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Nailing down a time
The time elem...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Nailing down a time




         ...
HTML5: Semantics, Accessibility & Forms!          HTML5 Online Conference — 1 November 2010




Nailing down a time




  ...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Nailing down a time
The time elem...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Nailing down a time
The time elem...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Nailing down a time
The time elem...
HTML5: Semantics, Accessibility & Forms!               HTML5 Online Conference — 1 November 2010




Highlighting content
...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Highlighting content




        ...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Highlighting content




        ...
HTML5: Semantics, Accessibility & Forms!          HTML5 Online Conference — 1 November 2010




Highlighting content




 ...
HTML5: Semantics, Accessibility & Forms!          HTML5 Online Conference — 1 November 2010




Highlighting content




 ...
HTML5 sup
ARIA out ofports
            the box
                      71
72
HTML5: Semantics, Accessibility & Forms!                  HTML5 Online Conference — 1 November 2010




All the site’s a p...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Landmark roles




              ...
HTML5: Semantics, Accessibility & Forms!                            HTML5 Online Conference — 1 November 2010




Landmark...
HTML5: Semantics, Accessibility & Forms!                             HTML5 Online Conference — 1 November 2010




Landmar...
HTML5: Semantics, Accessibility & Forms!                          HTML5 Online Conference — 1 November 2010




Landmark r...
HTML5: Semantics, Accessibility & Forms!                           HTML5 Online Conference — 1 November 2010




Landmark ...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Landmark roles




              ...
HTML5: Semantics, Accessibility & Forms!                        HTML5 Online Conference — 1 November 2010




Landmark rol...
HTML5: Semantics, Accessibility & Forms!                             HTML5 Online Conference — 1 November 2010




Landmar...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Landmark roles




              ...
HTML5: Semantics, Accessibility & Forms!                       HTML5 Online Conference — 1 November 2010




Landmark role...
HTML5: Semantics, Accessibility & Forms!                  HTML5 Online Conference — 1 November 2010




Landmark roles
app...
HTML5: Semantics, Accessibility & Forms!               HTML5 Online Conference — 1 November 2010




Structural roles
arti...
HTML5: Semantics, Accessibility & Forms!                              HTML5 Online Conference — 1 November 2010




Struct...
HTML5: Semantics, Accessibility & Forms!   HTML5 Online Conference — 1 November 2010




Widget roles
<span role="button">...
HTML5: Semantics, Accessibility & Forms!        HTML5 Online Conference — 1 November 2010




Widget roles
<span role="but...
HTML5: Semantics, Accessibility & Forms!        HTML5 Online Conference — 1 November 2010




Widget roles
<span role="but...
HTML5: Semantics, Accessibility & Forms!        HTML5 Online Conference — 1 November 2010




Widget roles
<span role="but...
HTML5: Semantics, Accessibility & Forms!                       HTML5 Online Conference — 1 November 2010




Widget roles
...
HTML5: Semantics, Accessibility & Forms!              HTML5 Online Conference — 1 November 2010




Widget properties
aria...
HTML5: Semantics, Accessibility & Forms!                  HTML5 Online Conference — 1 November 2010




Widget states

   ...
HTML5: Semantics, Accessibility & Forms!                  HTML5 Online Conference — 1 November 2010




Widget states

   ...
HTML5: Semantics, Accessibility & Forms!                  HTML5 Online Conference — 1 November 2010




Widget states

   ...
HTML5: Semantics, Accessibility & Forms!           HTML5 Online Conference — 1 November 2010




Widget states
aria-busy
a...
you  can
Wit h  HT ML5       e fo rms
       mo re u sabl
b uild                    97
HTML5: Semantics, Accessibility & Forms!                   HTML5 Online Conference — 1 November 2010




New input types: ...
HTML5: Semantics, Accessibility & Forms!                      HTML5 Online Conference — 1 November 2010




New input type...
HTML5: Semantics, Accessibility & Forms!       HTML5 Online Conference — 1 November 2010




New input types: numbers
numb...
HTML5: Semantics, Accessibility & Forms!                   HTML5 Online Conference — 1 November 2010




New input types: ...
HTML5: Semantics, Accessibility & Forms!     HTML5 Online Conference — 1 November 2010




New input types
email
A UI cont...
HTML5: Semantics, Accessibility & Forms!             HTML5 Online Conference — 1 November 2010




New input types




<in...
HTML5: Semantics, Accessibility & Forms!                    HTML5 Online Conference — 1 November 2010




New input types:...
HTML5: Semantics, Accessibility & Forms!    HTML5 Online Conference — 1 November 2010




New input types: color
color
A U...
HTML5: Semantics, Accessibility & Forms!                  HTML5 Online Conference — 1 November 2010




UI controls
autoco...
HTML5: Semantics, Accessibility & Forms!                 HTML5 Online Conference — 1 November 2010




Value controls
min ...
HTML5: Semantics, Accessibility & Forms!                 HTML5 Online Conference — 1 November 2010




Value controls
patt...
HTML5: Semantics, Accessibility & Forms!               HTML5 Online Conference — 1 November 2010




Value controls
list
A...
Whic h pat h will
you take?
                    110
5      Semantics
HTML

       Accessibility
       &Forms
       Aaron Gustafson
HTML5: Semantics, Accessibility & Forms!                                            HTML5 Online Conference — 1 November 2...
Upcoming SlideShare
Loading in...5
×

HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

16,560

Published on

We'll cover all of the new tags, such as article and section and how best to implement them, along with ARIA attributes to enhance the accessibility of your pages. Webforms introduce new field types and built-in validation, saving you time due to not having to implement your own JavaScript validation.

Published in: Technology, Design
1 Comment
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,560
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
379
Comments
1
Likes
35
Embeds 0
No embeds

No notes for slide

HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

  1. 1. 5 Semantics HTML Accessibility &Forms Aaron Gustafson
  2. 2. H TML5 p rovides more c ontrol 2
  3. 3. Paves the c owpaths we’ve carved on the web 3
  4. 4. The pr ocess is ong oing, ho wever, so w atch yo ur step 4
  5. 5. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Then & now <fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption> </fig> The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html 5
  6. 6. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Then & now <div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Photo of Albert Einstein</p> </div> The original “figure” microformat. 6
  7. 7. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Then & now <figure> <img src="photo.jpeg" alt=""/> <legend>Photo of Albert Einstein</legend> </figure> The original HTML5 figure. 7
  8. 8. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Then & now <div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Photo of Albert Einstein</p> </div> The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure 8
  9. 9. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Then & now <figure> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption> </figure> The current (dare I say final?) HTML5 figure. 9
  10. 10. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Oldies but goodies html meta head link style title base body dl dt dd bdo script noscript map dfn b object param p div ul ol li cite iframe address area img br a small pre code abbr kbd var q samp hr menu textarea ins del sub sup span strong select option optgroup label input form fieldset legend button i em blockquote h1 h2 h3 h4 h5 h6 table caption col colgroup thead tbody tfoot tr th td 10
  11. 11. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New & revisited html meta head link style title base body dl dt dd section article bdo script noscript map dfn b aside details summary object param p div ul ol li cite canvas audio video iframe address area img br a small nav figure figcaption pre code abbr kbd var q samp hr menu header footer command textarea ins del sub sup span strong time source datalist select option optgroup label input output ruby progress form fieldset legend button i em mark hgroup meter blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp thead tbody tfoot tr th td 11
  12. 12. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Our focus today html meta head link style title base body dl dt dd section article bdo script noscript map dfn b aside details summary object param p div ul ol li cite canvas audio video iframe address area img br a small nav figure figcaption pre code abbr kbd var q samp hr menu header footer command textarea ins del sub sup span strong time source datalist select option optgroup label input output ruby progress form fieldset legend button i em mark hgroup meter blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp thead tbody tfoot tr th td 12
  13. 13. Cha-cha-cha- changes... 13
  14. 14. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 b and i are back The b element Represents a span of text offset from its surrounding content, but of no extra importance. <p>This presentation is about <b>HTML5</b>.</p> The i element Represents a span of text in an alternate voice or mood. <p>The <code>b</code> and <code>i</code> elements have been legitimized in HTML5. <i>Go figure.</i></p> 14
  15. 15. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 em and strong got adjusted The em element Represents a span of text text with emphatic stress. <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> The strong element Represents a span of text of great importance. <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> 15
  16. 16. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 small turned to the dark side The small element Represents so-called “fine print” (e.g. disclaimers, caveats, etc.). 16
  17. 17. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 cite got clarified The cite element The title of a cited work (e.g. a book, magazine, or journal). <p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p> 17
  18. 18. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 menu got resurrected The menu element Represents a list of commands. <menu> <li><a id="bold">Bold</a></li> <li><a id="italic">Italic</a></li> <li><a id="underline">Underline</a></li> </menu> or <menu> <command icon="/i/icons/b.png" label="Bold"/> <command icon="/i/icons/i.png" label="Italic"/> <command icon="/i/icons/u.png" label="Underline"/> </menu> 18
  19. 19. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 hr found meaning The hr element Represents a paragraph-level thematic break. 19
  20. 20. HTML5 offers many new op tions for building documents 20
  21. 21. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article The section element Represents a section of a document, typically with a title or heading. <section> <!-- pretty much anything can go here --> </section> The article element Represents a section of content that forms an independent part of a document or site. <article> <!-- pretty much anything can go here --> </article> 21
  22. 22. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article 22
  23. 23. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article section 23
  24. 24. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article section > article 24
  25. 25. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article 25
  26. 26. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article article 26
  27. 27. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article article > section 27
  28. 28. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer The header element Represents the header of a section. <header> <!-- titles, etc. go here --> </header> The footer element Represents the footer of a section. <footer> <!-- meta/supplementary information goes here --> </footer> 28
  29. 29. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer 29
  30. 30. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer header 30
  31. 31. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer 31
  32. 32. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer footer 32
  33. 33. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article 33
  34. 34. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article > header 34
  35. 35. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article 35
  36. 36. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article > footer 36
  37. 37. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav The nav element Demarcates a group of navigational links. <nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p> </nav> 37
  38. 38. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav 38
  39. 39. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav nav 39
  40. 40. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav 40
  41. 41. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav nav 41
  42. 42. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside The aside element Demarcates content that is tangentially related to the primary content. <article> <!-- main content --> <aside> <!-- something related --> </aside> </article> 42
  43. 43. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside 43
  44. 44. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside aside 44
  45. 45. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: details The details element A UI control for hiding optional content. Must contain a summary element, followed by other content. <details> <summary>This is the visible description</summary> <p>This content would be hidden by default.</p> </details> It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org). 45
  46. 46. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: figure The figure element A unit of content (typically referenced by the primary content) that is self-contained. May contain a figcaption element and other content. <figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption> </figure> <figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption> <!-- a bunch of data --> </table> </figure> 46
  47. 47. Docu ment o utlines in HTML5 47
  48. 48. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Implicit sectioning <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h2> Markup <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 48
  49. 49. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Explicit sectioning <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... section <h2> Markup <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 49
  50. 50. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Explicit sectioning <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h1> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... section <h1> Markup <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 50
  51. 51. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Explicit sectioning <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h4> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... section <h6> Markup <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 51
  52. 52. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Section management Sectioning elements Create explicit sections in an outline. ๏ section (obviously) ๏ article ๏ aside ๏ footer ๏ header ๏ nav 52
  53. 53. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Outline limitations <h1> Title <h2> Subtitle <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 1.1 Subtitle 53
  54. 54. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Enter the hgroup hgroup <h1> Title <h2> Subtitle <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 54
  55. 55. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Section management Sectioning roots Establish a new outline. ๏ body (obviously) ๏ blockquote ๏ details ๏ fieldset ๏ figure ๏ td 55
  56. 56. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Rooted sections <h1> Title <p> Text content continues... <p> Text content continues... <h2> Section heading <p> Text content continues... <blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 1.1 Section heading 56
  57. 57. elem ents New to c ons ider 57
  58. 58. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Multimedia audio video canvas (plus object & embed) 58
  59. 59. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Multimedia audio video canvas (plus object & embed) Stick around to hear Molly speak on these. 59
  60. 60. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time The time element Represents a date and/or time. 60
  61. 61. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time 61
  62. 62. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time time 62
  63. 63. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time The time element Represents a date and/or time. <time>October 25, 2010 8:11 PM</time> 63
  64. 64. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time The time element Represents a date and/or time. <time>October 25, 2010 8:11 PM</time> <time datetime="2010-11-26T01:11:00-05:00"> October 25, 2010 8:11 PM</time> 64
  65. 65. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time The time element Represents a date and/or time. <time>October 25, 2010 8:11 PM</time> <time datetime="2010-11-26T01:11:00-05:00"> October 25, 2010 8:11 PM</time> <time datetime="2010-11-26T01:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time> 65
  66. 66. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content The mark element Represents a a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. <ol id="search-results"> <li> <h3><a href="...">Web Upgrade <mark>HTML5</mark> May Weaken Privacy</a></h3> <p>The new language, <mark>HTML5</mark>, could give marketers access to many more details about users' online activities.</p> </li> </ol> 66
  67. 67. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content 67
  68. 68. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content 68
  69. 69. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content mark 69
  70. 70. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content mark 70
  71. 71. HTML5 sup ARIA out ofports the box 71
  72. 72. 72
  73. 73. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 All the site’s a play... The role attribute Defines the part an element is playing (assuming it’s different than the semantics would otherwise imply). <section id="main" role="main"> <!-- The primary content for the page would go here --> </section> 73
  74. 74. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 74
  75. 75. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <header role="banner"> 75
  76. 76. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <nav role="navigation"> 76
  77. 77. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <form role="search"> 77
  78. 78. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <section role="main"> 78
  79. 79. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 79
  80. 80. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <footer role="contentinfo"> 80
  81. 81. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <nav role="navigation"> 81
  82. 82. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 82
  83. 83. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <aside role="complementary"> 83
  84. 84. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles application contentinfo navigation banner form search complementary main 84
  85. 85. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Structural roles article heading presentation columnheader img region definition list row directory listitem rowheader document math separator group note 85
  86. 86. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Structural roles <article role="article"> 86
  87. 87. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles <span role="button">OK</span> 87
  88. 88. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles <span role="button">OK</span> (of course <button>OK</button> would be better) 88
  89. 89. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles <span role="button">OK</span> (of course <button>OK</button> would be better) <div role="alert"> <p>Something went wrong.</p> </div> 89
  90. 90. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles <span role="button">OK</span> (of course <button>OK</button> would be better) <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div> 90
  91. 91. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles alert marquee slider alertdialog menuitem spinbutton button menuitemcheckbox status checkbox menuitemradio tab combobox option tabpanel dialog progressbar textbox gridcell radio timer link radiogroup tooltip log scrollbar treeitem Widget Container Roles grid menubar tree listbox tablist treegrid menu toolbar 91
  92. 92. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget properties aria-activedescendant aria-multiline aria-atomic aria-multiselectable aria-autocomplete aria-orientation aria-controls aria-owns aria-describedby aria-posinset aria-dropeffect aria-readonly aria-flowto aria-relevant aria-haspopup aria-required aria-label aria-setsize aria-labelledby aria-sort aria-level aria-valuemax aria-live aria-valuemin 92
  93. 93. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget states B B (off) (on) <span> <img src="bold-off.png" alt="bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span> 93
  94. 94. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget states B B (off) (on) <span> <img src="bold-off.png" alt="not bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span> 94
  95. 95. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget states B B (off) (on) <span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /> </span> <span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /> </span> 95
  96. 96. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget states aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow (the W3C defines this as a “property”) aria-valuetext (ditto) 96
  97. 97. you can Wit h HT ML5 e fo rms mo re u sabl b uild 97
  98. 98. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: dates & times datetime A UI control for selecting a date & time that includes timezone information. datetime-local A UI control for selecting a date & time that does not include timezone information. date A UI control for selecting a date with access to all date components (day, month and year). month A UI control for selecting a date that provides access to month and year only. time A UI control for selecting a time that does not include timezone information. week A UI control for selecting a date that provides access to week and year only. 98
  99. 99. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: dates & times Safari Opera <input type="date" name="dob"/> 99
  100. 100. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: numbers number A UI control for selecting a number. range A UI control for selecting an imprecise number. 100
  101. 101. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: numbers <input type="number" name="foo"/> <input type="range" min="1" max="11" name="foo"/> 101
  102. 102. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types email A UI control for entering an email. url A UI control for entering a URL. tel A UI control for entering a telephone number. 102
  103. 103. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types <input type="email" ... /> <input type="url" ... /> 103
  104. 104. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: search search A UI control for plain text editing of one or more search terms. my search terms x 104
  105. 105. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: color color A UI control for selecting a color. #EC4D0E 105
  106. 106. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 UI controls autocomplete Tells the User Agent whether or not the value should be stored. autofocus Tells the User Agent to bring focus to the form control on page load. form An id reference to the form to which a given control belongs. required Indicated the form control must be provided a value. placeholder Offers users a short hint about the required value. 106
  107. 107. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Value controls min & max Lower and upper boundary for an element value (dates, time, and numbers only). step The granularity of values allowed (dates, time, and numbers only). <input type="range" min="1" max="11" step="0.5" .../> 107
  108. 108. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Value controls pattern A regular expression pattern that the User Agent should validate the input against. <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../> 108
  109. 109. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Value controls list An id reference to a datalist element containing acceptable values. <input type="text" list="countries" name="country"/> <datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --> </datalist> 109
  110. 110. Whic h pat h will you take? 110
  111. 111. 5 Semantics HTML Accessibility &Forms Aaron Gustafson
  112. 112. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi “IMG_6200” by pcutler “Construction material” by raisin bun “TOC” by D'Arcy Norman “Dual Samsung Monitors” by steve-uk 112
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×