This document provides guidance on designing accessible and user-friendly forms. It discusses best practices such as: - Using labels to associate each form control with its corresponding field - Specifying the type of input that is most appropriate for the data being collected - Allowing values to be auto-filled to reduce errors and ease the user experience - Clearly indicating which fields are required to submit the form - Providing helpful validation and error messages when invalid data is entered The document explores various HTML form elements and attributes that can be leveraged to improve accessibility and usability of forms on the web. Special consideration is given to supporting auto-fill functionality and native validation handling across browsers.

1. Designing the
Conversation
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

2. IPowerful Phrases

3. I’m$<em>really</em>$happy$to$see$you.
Emphasis

4. Please$fill$out$the$form$below$to$contact$us.$
<strong>All$fields$are$required.</strong>
Strong Importance

5. I’m really happy to see you.
Please fill out the form below to contact us. All fields are required.

6. It's$a$terrible$movie$and$it$made$$200$million.$
<i>Go$figure!</i>$
She$is$admired$for$her$energy$and$<i$lang="fr">joie$de$
vivre</i>.
Alternate Voice or Mood

7. For$12$years$and$running,$over$100,000$companies$have$adopted$
the$<b>Basecamp</b>$way$of$working.$Not$just$tried,$but$signed$
up,$said$“ahQha!”,$and$never$looked$back.$There’s$nothing$else$
like$<b>Basecamp</b>.
Stylistically Offset

8. I$wrote$the$book$<cite>Adaptive$Web$Design</cite>.$If$you$like$
this$talk,$you’ll$find$inQdepth$information$about$semantics$(and$
a$whole$lot$more)$in$there.
Published Works

9. A$ramp$embedded$in$staircase$of$Robson$Square$in$Vancouver,$
<abbr$ariaQlabel="British$Columbia">BC</abbr>.
Abbreviations & Acronyms

10. Press$<kbd>Tab</kbd>$to$move$from$link$to$link$within$a$
document.$
The$<code>kbd</code>$element$is$used$to$indicate$keyboard$key$
names.
Keyboard & Code

11. There$is$<span>nothing$particularly$interesting</span>$in$this$
sentence.
Generic Phrasing

12. IIMindful Links

13. A$ramp$embedded$in$staircase$of$<a$href="https://
en.wikipedia.org/wiki/Robson_Square">Robson$Square</a>$in$
Vancouver,$<abbr$ariaQlabel="British$Columbia">BC</abbr>.
Connecting Content

14. <a$href="…"><b$class="hidden">You$can$</b>finish$reading<b$
class="hidden">$<cite>The$Web$Should$Just$Work$for$Everyone</
cite>$in$less$than$10$minutes</b></a>
Connecting Content

15. To$illustrate$the$concept$of$layering$styles,$perhaps$it’s$best$
to$start$at$the$beginning:$with$no$style$applied.
<a$href="#figureQ3Q3">Figure$3.3</a>$shows$the$lodging$article$
in$Safari$with$only$the$default$browser$styles$applied.$
…$
<figure$id="figureQ3Q3">$
$$…$
</figure>
Connecting Content

16. <a$rel="bookmark"$href="…"><b$class="hidden">You$can$</b>finish$
reading<b$class="hidden">$<cite>The$Web$Should$Just$Work$for$
Everyone</cite>$in$less$than$10$minutes</b></a>
Creating Context

17. <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$
$$</b>Español</a>
Creating Context

18. <a$href="giant.mp4"$type="video/mp4">Download$this$movie</a>
Creating Context

19. <a$href="giant.mp4"$type="video/mp4"$download>Download$this
$$movie</a>
Triggering Actions

20. <a$href="mailto:aaron@easyQdesigns.net">Send$me$an$email</a>$
<a$href="tel:18009346489">Call$Comcast$Customer$Service</a>
Connecting Tools

21. IIIEffective
Organization

23. <h1>This$is$the$title$of$the$page</h1>$
…$
<h2>This$titles$a$section</h2>$
…$
<h3>This$titles$a$subsection</h3>$
…$
etc.
Headings

24. <p>This$twist$is$what$<a$href="https://en.wikipedia.org/wiki/
John_Harsanyi">John$Harsanyi</a>—an$early$game$theorist—refers$
to$as$the$<a$href="https://en.wikipedia.org/wiki/
Veil_of_ignorance">“Veil$of$Ignorance”</a>$and$what$Rawls$found,$
time$and$time$again,$was$that$individuals$participating$in$the$
experiment$would$gravitate$toward$creating$the$most$egalitarian$
societies.</p>
Moving Focus

25. <p$tabindex="0">Please$fill$out$the$form$below$completely.$
<strong>All$fields$are$required.</strong></p>
Moving Focus

26. Accessible
Rich Internet
Applications

27. <div$id="nav"$role="navigation">$
$$<ul>$
$$$$<li>$
$$$$$$<a$href="/about/"><b$class="hidden">A$Bit$</b>About<b$
class="hidden">$Me</b></a>$
$$$$</li>$
$ $ $ …$
$$</ul>$
</div>
Navigation Region

28. ๏banner
๏navigation
๏search
๏main
๏complementary
๏contentinfo
ARIA Landmark Roles

30. <header$class="banner"$role="banner"$id="top">
$$<h1$class="banner_logo"><a$href="/"$rel="home">
$$$$24$ways$<span>to$impress$your$friends</span></a></h1>$
</header>

31. <main$role="main">$
$$…$
</main>

32. <nav$class="navigation"$role="navigation"$id="menu">
$$<h1$class="hidden">Browse$24$ways</h1>
$$<ul$class="nav$navQtopics">$
$$$$<li$class="nav_item"><a$href="/topics/business/"
$$$$$$dataQicon="&#x2655;">Business</a></li>$
$$$$…$
$$</ul>
$$…$
</nav>

33. <footer$class="contentinfo"$role="contentinfo">$
$$<p$class="contentinfo_copyright">$
$$$$<small>&#169;$2005Q2016$24$ways$and$our$authors.
$$$$<a$href="/about/#colophon">Colophon</a></small>$
$$</p>$
$$<p$class="contentinfo_social">$
$$$$<a$href="http://feeds.feedburner.com/24ways"
$$$$$$rel="alternate">Grab$our$RSS$feed</a>$
$$$$<a$href="https://twitter.com/24ways"$rel="me">Follow$us
$$$$$$on$Twitter</a>$
$$$$<a$href="/newsletter">Subscribe$to$our$newsletter</a>$
$$</p>$
</footer>

34. ๏banner - first header element not inside a sectioning element
๏navigation - nav
๏search
๏main - main
๏complementary - aside
๏contentinfo - first footer element not inside a sectioning element
HTML Landmarks

35. <div>$
$$This$is$simply$a$generic$division$of$content.$
</div>

36. ๏p - a paragraph
๏ol - a list of items whose order matters
๏ul - an list of items whose order doesn’t matter
๏li - an item in a list
๏dl - a list of terms and their associated definitions
๏dt - terms to be defined within a definition list
๏dd - descriptions of terms in a definition list
๏figure - referenced content (images, tables, etc.)
๏figcaption - caption for a figure
Alterna-divs

37. ๏article - a piece of content that can stand on its own
๏section - a section of a document or article
๏header - preamble content for a document, article, or section
๏footer - supplementary information for a document, article, or section
๏main - the primary content of a document
๏nav - navigational content
๏aside - complementary content
Alterna-divs

38. IVFriendly Forms

41. How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other

42. How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other

43. How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
◉ Other it’s embarrassing

44. Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad

45. Talk to your users
like they talk
to one another

46. Make it clear users
need to respond

47. “What’s your first name?”

48. “Without your first name, I won’t
know how to address you.
Could you please provide it?”

49. “Reserve your spot”

50. What’s$your$first$name?$
<input$name="first_name">

51. <label>What’s$your$first$name?</label>$
<input$name="first_name">

52. <label$for="first_name">What’s$your$first$name?</label>$
<input$id="first_name"$name="first_name">

53. <label>$
$$What’s$your$first$name?$
$$<input$name="first_name">$
</label>

54. <label$for="first_name">$
$$What’s$your$first$name?$
$$<input$id="first_name"$name="first_name">$
</label>

55. <label$for="first_name">What’s$your$first$name?</label>$
<input$id="first_name"$name="first_name">

56. Use the right
field type

57. <label$for="first_name">What’s$Your$First$Name?</label>$
<input$type="text"$id="first_name"$name="first_name">
Free Response

58. <label$for="email">What’s$Your$Business$Email$Address?</label>$
<input$type="email"$id="email"$name="email">
Free Response: Email
Appearance Native Validation
Text Field Maybe

59. Browsers ignore
what they don’t
understand

60. Progressive
Enhancement

61. <label$for="url">What’s$Your$Website’s$URL?</label>$
<input$type="url"$id="url"$name="url">
Free Response: URL
Appearance Native Validation
Text Field Maybe

62. Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad
Choose One

63. Please$describe$the$photo$
<label>$
$$<input$type="radio"$name="reason"$value="embarrassing">$
$$It’s$embarrassing$
</label>$
<label>$
$$<input$type="radio"$name="reason"$value="bad$photo">$
$$It’s$a$bad$photo$of$me$
</label>$
<label>$
$$<input$type="radio"$name="reason"$value="saddening">$
$$It$makes$me$sad$
</label>
Choose One

64. <label$for="reason">Please$describe$the$photo</label>$
<select$id="reason"$name="reason">$
$$<option$value="embarrassing">It’s$embarrassing</option>$
$$<option$value="bad$photo">It’s$a$bad$photo$of$me</option>$
$$<option$value="saddening">It$makes$me$sad</option>$
</select>
Choose One

65. <label$for="volume">How$Loud$is$Spinal$Tap?</label>$
<input$type="range"$id="volume"$name="volume"$
$ $ $ $$$min="0"$max="11"$step="1"$
$ $ $ $$$>
Choose One: Number
Appearance Native Validation
Slider (Maybe) Maybe

66. Don’t introduce
unnecessary
complexity

67. Phone Number:

68. <label$for="tel">What’s$Your$Business$Phone$Number?</label>$
<input$type="tel"$id="tel"$name="business_phone">
Free Response: Telephone
Appearance Native Validation
Text Field No

69. We should
work harder
so our users
don’t have to

70. ๏input[type=date]$
๏input[type=datetime] (global)
๏input[type=datetimeQlocal] (local)
๏input[type=month] (year & month)
๏input[type=week] (year & week)
๏input[type=time] (year & week)
Structured Data: Dates & Times

71. Help users
avoid (and fix)
errors

72. Enable common
information to be
auto-filled

73. <label$for="name">What’s$Your$Name?</label>$
<input$id="name"$name="name"$required$ariaQrequired="true">
Keys for Auto-filling

74. <label$for="ssn">What’s$Your$Social$Security$Number?</label>$
<input$id="ssn"$name="ssn"$required$ariaQrequired="true"$
$$$$$$$autocomplete="off"$
$$$$$$$>
Don’t Store All Values

75. ๏ name
๏ honorific-prefix
๏ given-name
๏ additional-name
๏ family-name
๏ honorific-suffix
๏ nickname
๏ username
๏ new-password
๏ current-password
๏ organization-title
๏ organization
๏ street-address
๏ address-line1
๏ address-line2
๏ address-line3
๏ address-level4
๏ address-level3
๏ address-level2
๏ address-level1
๏ country
๏ country-name
๏ postal-code
๏ cc-name
๏ cc-given-name
๏ cc-additional-name
๏ cc-family-name
๏ cc-number
๏ cc-exp
๏ cc-exp-month
๏ cc-exp-year
๏ cc-csc
๏ cc-type
๏ transaction-currency
๏ transaction-amount
๏ language
๏ bday
๏ bday-day
๏ bday-month
๏ bday-year
๏ sex
๏ url
๏ photo
๏ tel
๏ tel-country-code
๏ tel-national
๏ tel-area-code
๏ tel-local
๏ tel-local-prefix
๏ tel-local-suffix
๏ tel-extension
๏ email
๏ impp
Autofill Tokens

76. ๏For Addresses:
‣ shipping
‣ billing
๏For Telephone Numbers:
‣ home
‣ work
‣ mobile
‣ fax
‣ pager
๏Universally:
‣ section-*
Autofill Token Modifiers

77. <fieldset>$
$$<legend$tabindex="0">Ship$the$blue$gift$to…</legend>$
$$<p>$
$$$$<label$for="bQstreetQaddress">Address</label>$
$$$$<input$name="ba"$id="bQstreetQaddress"$
$$$$$$$$$$$autocomplete="sectionQblue$shipping$streetQaddress">
$$</p>$
$$<p>$
$$$$<label$for="bQcity">City</label>$
$$$$<input$name="bc"$id="bQcity"$
$$$$$$$$$$$autocomplete="sectionQblue$shipping$addressQlevel2">$
$$</p>$
$$<p>$
$$$$<label$for="bQpostalQcode">Postal$Code</label>$
$$$$<input$name="bp"$id="bQpostalQcode"$
$$$$$$$$$$$autocomplete="sectionQblue$shipping$postalQcode">$
$$</p>$
</fieldset>
For Example

78. [sectionQ]$(optional)$$
[shipping|billing]$(optional)$
[home|work|mobile|fax|pager]$(optional)$
[autofill$token$name]

79. <label$for="shippingQmobile">Is$there$a$mobile$number$we$can$$
$$reach$you$on$regarding$delivery?</label>$
<input$type="tel"$id="shippingQmobile"$name="shippingQmobile"
$$$$$$$autocomplete="sectionQred$shipping$mobile$tel">

80. Let users know
when a field is
required

81. <p>Fields$marked$with$a$*$are$
$$<strong$id="required">required</strong>.</p>$
…$
<label$for="first_name">What’s$Your$First$Name?$
$$<b$role="presentation"$class="required">*</b>$
</label>$
<input$id="first_name"$name="first_name"$
$$$$$$$$$$required$
$$$$$$$$$$ariaQrequired="true"$
$$$$$$$$$$>
Required Fields

82. <p><strong>All$of$the$fields$are$required.</strong></p>$
…$
<label$for="first_name">What’s$Your$First$Name?</label>$
<input$id="first_name"$name="first_name"$
$$$$$$$$$$required$
$$$$$$$$$$ariaQrequired="true"$
$$$$$$$$$$>
Required Fields

83. <p><strong>All$of$the$fields$are$required.</strong></p>$
…$
<label$for="first_name">What’s$Your$First$Name?</label>$
<input$id="first_name"$name="first_name"$
$$$$$$$$$$required$
$$$$$$$$$$ariaQrequired="true"$
$$$$$$$$$$>
Required Fields

84. Provide useful
hints as to the
type of response
you’re expecting

85. <label$for="flight">What$flight$are$you$looking$for?</label>$
<input$id="flight"$name="flight"$
$ $ $ $pattern="DLd{2,}"$
$ $ $ $placeholder="e.g.$DL5407"$
$ $ $ $>$
Suggesting a response

86. Validate
in the browser

87. <label$for="first_name">What’s$Your$First$Name?</label>$
<input$id="first_name"$name="first_name"$
$$$$$$$$$$required$
$$$$$$$$$$ariaQrequired="true"$
$$$$$$$$$$>
Indicate Required Fields

88. <label$for="email">What’s$Your$Business$Email$Address?</label>$
<input$type="email"$id="email"$name="email">
Use Native Validation

89. <label$for="flight">What$flight$are$you$looking$for?</label>$
<input$id="flight"$name="flight"$
$ $ $ $pattern="DLd{2,}"$
$ $ $ $placeholder="e.g.$DL5407"$
$ $ $ $>
Use Custom Validation Schema

91. <label$for="email">Your$Email$Address</label>$
<input$id="email"$type="email"$name="email"$
$$$$$$$$$required$ariaQrequired="true"$
$$$$$$$$$ariaQinvalid="true"$
$$$$$$$$$ariaQdescribedby="emailQerror"$
$$$$$$$$$>$
<strong$id="emailQerror"$class="validationQerrorQmessage">$
$$Your$email$address$is$required</strong>
Provide Inline Error Messages

92. Validate
on the server

93. <input type=“hidden” name=“price” value=“399.99”>

94. <input type=“hidden” name=“price” value=“1”>

95. Never trust
the client

96. Summarize
server-side errors

98. <div$role="alert">$
$$<p>There$were$errors$with$your$form$submission:</p>$
$$<ol>$
$$$$<li><a$href="#message">Message</a>$is$a$required$
$$$$$$field</li>$
$$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$
$$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$
$$</ol>$
</div>

99. <div$role="alert">$
$$<p>There$were$errors$with$your$form$submission:</p>$
$$<ol>$
$$$$<li><a$href="#message">Message</a>$is$a$required$
$$$$$$field</li>$
$$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$
$$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$
$$</ol>$
</div>

100. <div$role="alert">$
$$<p>There$were$errors$with$your$form$submission:</p>$
$$<ol>$
$$$$<li><a$href="#message">Message</a>$is$a$required$
$$$$$$field</li>$
$$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$
$$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$
$$</ol>$
</div>

101. <div$role="alert">$
$$<p>There$were$errors$with$your$form$submission:</p>$
$$<ol>$
$$$$<li><a$href="#message">Message</a>$is$a$required$
$$$$$$field</li>$
$$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$
$$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$
$$</ol>$
</div>

102. <div$role="alert">$
$$<p>There$were$errors$with$your$form$submission:</p>$
$$<ol>$
$$$$<li><a$href="#message">Message</a>$is$a$required$
$$$$$$field</li>$
$$$$<li><a$href="#name">Name</a>$is$a$required$field</li>$
$$$$<li><a$href="#email">Email</a>$is$a$required$field</li>$
$$</ol>$
</div>

103. <label$for="email">Your$Email$Address</label>$
<input$id="email"$type="email"$name="email"$
$$$$$$$$$required$ariaQrequired="true"$
$$$$$$$$$ariaQinvalid="true"$
$$$$$$$$$ariaQdescribedby="emailQerror"$
$$$$$$$$$>$
<strong$id="emailQerror"$class="validationQerrorQmessage">$
$$Your$email$address$is$required</strong>
Provide Inline Error Messages

104. Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson