• Share
  • Email
  • Embed
  • Like
  • Private Content
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 

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

on

  • 11,274 views

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 ...

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.

Statistics

Views

Total Views
11,274
Views on SlideShare
11,260
Embed Views
14

Actions

Likes
34
Downloads
339
Comments
1

9 Embeds 14

http://aaron-gustafson.com 4
http://paper.li 3
http://wspl.net 1
http://static.slidesharecdn.com 1
http://soup.sindre.at 1
http://www.slideshare.net 1
http://us-w1.rockmelt.com 1
http://192.168.6.52 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 & 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Cha-cha-cha- changes... 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 hr found meaning The hr element Represents a paragraph-level thematic break. 19
    • HTML5 offers many new op tions for building documents 20
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article 22
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article section 23
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article section > article 24
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article 25
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article article 26
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article article > section 27
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer 29
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer header 30
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer 31
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer footer 32
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article 33
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article > header 34
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article 35
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article > footer 36
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav 38
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav nav 39
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav 40
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav nav 41
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside 43
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside aside 44
    • 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
    • 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
    • Docu ment o utlines in HTML5 47
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • elem ents New to c ons ider 57
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Multimedia audio video canvas (plus object & embed) 58
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time The time element Represents a date and/or time. 60
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time 61
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time time 62
    • 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
    • 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
    • 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
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content 67
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content 68
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content mark 69
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content mark 70
    • HTML5 sup ARIA out ofports the box 71
    • 72
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 74
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <header role="banner"> 75
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <nav role="navigation"> 76
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <form role="search"> 77
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <section role="main"> 78
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 79
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <footer role="contentinfo"> 80
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <nav role="navigation"> 81
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 82
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <aside role="complementary"> 83
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles application contentinfo navigation banner form search complementary main 84
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Structural roles <article role="article"> 86
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles <span role="button">OK</span> 87
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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: 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: dates & times Safari Opera <input type="date" name="dob"/> 99
    • 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
    • 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
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types <input type="email" ... /> <input type="url" ... /> 103
    • 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
    • HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: color color A UI control for selecting a color. #EC4D0E 105
    • 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
    • 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
    • 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
    • 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
    • Whic h pat h will you take? 110
    • 5 Semantics HTML Accessibility &Forms Aaron Gustafson
    • 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