SlideShare une entreprise Scribd logo
1  sur  112
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCMayflower GmbH
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New FeaturesAta Ebrahimi
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtmlsagaroceanic11
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5onkar_bhosle
 

Tendances (20)

An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtml
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 
Html 5
Html 5Html 5
Html 5
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 

En vedette

Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...
Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...
Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...Meagan Louie
 
Semantics: Seven types of meaning
Semantics: Seven types of meaningSemantics: Seven types of meaning
Semantics: Seven types of meaningMiftadia Laula
 
Revised pp-focus-group-training-nl-cr
Revised pp-focus-group-training-nl-crRevised pp-focus-group-training-nl-cr
Revised pp-focus-group-training-nl-crartbeyondsight
 
Sighted guide technique
Sighted guide techniqueSighted guide technique
Sighted guide techniqueartbeyondsight
 
Semantics and Computational Semantics
Semantics and Computational SemanticsSemantics and Computational Semantics
Semantics and Computational SemanticsMarina Santini
 
'Meaning is its use' - Towards the use of distributional semantics for conten...
'Meaning is its use' - Towards the use of distributional semantics for conten...'Meaning is its use' - Towards the use of distributional semantics for conten...
'Meaning is its use' - Towards the use of distributional semantics for conten...Cataldo Musto
 
Disability Awareness Training Slideshow
Disability Awareness Training SlideshowDisability Awareness Training Slideshow
Disability Awareness Training Slideshowartbeyondsight
 
Reference, sense and referring expression
Reference, sense and referring expressionReference, sense and referring expression
Reference, sense and referring expressionFira Nursya`bani
 
Unit 3 - Reference and Sense
Unit 3 -  Reference and SenseUnit 3 -  Reference and Sense
Unit 3 - Reference and SenseAshwag Al Hamid
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...Olivier Nourry
 

En vedette (18)

SEMANTICS
SEMANTICS SEMANTICS
SEMANTICS
 
Semantics
SemanticsSemantics
Semantics
 
Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...
Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...
Introduction to Language and Linguistics 004: The Lexicon, Morphology and Sem...
 
Semantics
SemanticsSemantics
Semantics
 
Semantics: Meanings of Language
Semantics: Meanings of LanguageSemantics: Meanings of Language
Semantics: Meanings of Language
 
Semantics: Seven types of meaning
Semantics: Seven types of meaningSemantics: Seven types of meaning
Semantics: Seven types of meaning
 
Revised pp-focus-group-training-nl-cr
Revised pp-focus-group-training-nl-crRevised pp-focus-group-training-nl-cr
Revised pp-focus-group-training-nl-cr
 
Sighted guide technique
Sighted guide techniqueSighted guide technique
Sighted guide technique
 
Semantics and Computational Semantics
Semantics and Computational SemanticsSemantics and Computational Semantics
Semantics and Computational Semantics
 
'Meaning is its use' - Towards the use of distributional semantics for conten...
'Meaning is its use' - Towards the use of distributional semantics for conten...'Meaning is its use' - Towards the use of distributional semantics for conten...
'Meaning is its use' - Towards the use of distributional semantics for conten...
 
Plant layout
Plant layoutPlant layout
Plant layout
 
Disability Awareness Training Slideshow
Disability Awareness Training SlideshowDisability Awareness Training Slideshow
Disability Awareness Training Slideshow
 
Semantic roles and semantic features
Semantic roles and semantic featuresSemantic roles and semantic features
Semantic roles and semantic features
 
Semantics
SemanticsSemantics
Semantics
 
Reference, sense and referring expression
Reference, sense and referring expressionReference, sense and referring expression
Reference, sense and referring expression
 
Unit 3 - Reference and Sense
Unit 3 -  Reference and SenseUnit 3 -  Reference and Sense
Unit 3 - Reference and Sense
 
Semantics
SemanticsSemantics
Semantics
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
 

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

HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]Aaron Gustafson
 
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...Grégory Engels
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3Darren Wood
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalBeginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalMediacurrent
 
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...Beat Signer
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5Ravi Raj
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Paxcel Technologies
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive SummaryGilad Khen
 
Top 10 Web and HTML5 Predictions for 2013
Top 10 Web and HTML5 Predictions for 2013Top 10 Web and HTML5 Predictions for 2013
Top 10 Web and HTML5 Predictions for 2013Jonathan Jeon
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19btopro
 

Similaire à HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference] (20)

HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]
 
HTML5 Report Card
HTML5 Report CardHTML5 Report Card
HTML5 Report Card
 
HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 Semantics
 
Actsheet10
Actsheet10Actsheet10
Actsheet10
 
Technology Research
Technology ResearchTechnology Research
Technology Research
 
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Actsheet10-slideshow
Actsheet10-slideshowActsheet10-slideshow
Actsheet10-slideshow
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalBeginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
 
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
Top 10 Web and HTML5 Predictions for 2013
Top 10 Web and HTML5 Predictions for 2013Top 10 Web and HTML5 Predictions for 2013
Top 10 Web and HTML5 Predictions for 2013
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
 

Plus de Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

Plus de Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Dernier

Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 

Dernier (20)

Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 

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

  • 1. 5 Semantics HTML Accessibility &Forms Aaron Gustafson
  • 3. Paves the c owpaths we’ve carved on the web 3
  • 4. The pr ocess is ong oing, ho wever, so w atch yo ur step 4
  • 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. 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. 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. 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. 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. 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. 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. 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. Cha-cha-cha- changes... 13
  • 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. 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. 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. 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. 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 hr found meaning The hr element Represents a paragraph-level thematic break. 19
  • 20. HTML5 offers many new op tions for building documents 20
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article 22
  • 23. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article section 23
  • 24. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article section > article 24
  • 25. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article 25
  • 26. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article article 26
  • 27. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: section & article article > section 27
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer 29
  • 30. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer header 30
  • 31. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer 31
  • 32. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer footer 32
  • 33. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article 33
  • 34. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article > header 34
  • 35. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article 35
  • 36. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: header & footer article > footer 36
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav 38
  • 39. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav nav 39
  • 40. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav 40
  • 41. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: nav nav 41
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside 43
  • 44. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Organization: aside aside 44
  • 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. 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. Docu ment o utlines in HTML5 47
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. elem ents New to c ons ider 57
  • 58. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Multimedia audio video canvas (plus object & embed) 58
  • 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. 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time 61
  • 62. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Nailing down a time time 62
  • 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. 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. 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. 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content 67
  • 68. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content 68
  • 69. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content mark 69
  • 70. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Highlighting content mark 70
  • 71. HTML5 sup ARIA out ofports the box 71
  • 72. 72
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 74
  • 75. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <header role="banner"> 75
  • 76. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <nav role="navigation"> 76
  • 77. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <form role="search"> 77
  • 78. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <section role="main"> 78
  • 79. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 79
  • 80. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <footer role="contentinfo"> 80
  • 81. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <nav role="navigation"> 81
  • 82. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles 82
  • 83. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles <aside role="complementary"> 83
  • 84. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Landmark roles application contentinfo navigation banner form search complementary main 84
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Structural roles <article role="article"> 86
  • 87. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 Widget roles <span role="button">OK</span> 87
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. you can Wit h HT ML5 e fo rms mo re u sabl b uild 97
  • 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types: dates & times Safari Opera <input type="date" name="dob"/> 99
  • 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. 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. 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. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010 New input types <input type="email" ... /> <input type="url" ... /> 103
  • 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. 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. 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. 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. 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. 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. Whic h pat h will you take? 110
  • 111. 5 Semantics HTML Accessibility &Forms Aaron Gustafson
  • 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