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

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 “ﬁgure” 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) “ﬁgure” 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 ﬁnal?) 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 “ﬁne print” (e.g. disclaimers, caveats, etc.). 16

HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 cite got clariﬁed 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>  </section> The article element Represents a section of content that forms an independent part of a document or site. <article>  </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>  </header> The footer element Represents the footer of a section. <footer>  </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>  <aside>  </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>  </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 speciﬁcation... <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 speciﬁcation... <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 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

HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 All the site’s a play... The role attribute Deﬁnes the part an element is playing (assuming it’s different than the semantics would otherwise imply). <section id="main" role="main">  </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 <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 <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 deﬁnes 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 ﬂickr 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

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

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

by Aaron Gustafson

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 12

Statistics

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