epubjs
Version:
Render ePub documents in the browser, across many devices
63 lines (61 loc) • 4.66 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Little Help: WAI-ARIA</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<meta name="dat-origPath" value="/html/body/section/section[2]" /><link rel="prev" href="./ch03s05_4.html" /><link rel="next" href="./ch03s05_6.html" /></head><body>
<p data-origPath="/html/body/section/section[2]/p[8]">The new HTML5 <code class="literal">pattern</code> attribute can also be used to
improve field completion. If your field accepts regular expression-validatable
data, you can add this attribute to automatically check the input. When using
this attribute, the HTML5 specification recommends the restriction be added to
the <code class="literal">title</code> attribute.</p>
<p data-origPath="/html/body/section/section[2]/p[9]">We could reformulate our previous example now as follows:</p>
<pre class="screen" data-origPath="/html/body/section/section[2]/pre[4]"><input type="text"
id="uname"
name="username"
aria-labelledby="username-label"
pattern="[A-Za-z0-9]{8,16}"
title="Enter a user name between 8 and 16 characters in length
and containing only alphanumeric characters" /></pre>
<p data-origPath="/html/body/section/section[2]/p[10]">Another common nuisance in web forms of old has been the use of asterisks and
similar text markers and visual cues to indicate when a field was required, as
there was no native way to indicate the requirement to complete. These markers
were not always identifiable by persons using assistive technologies. HTML5 now
includes the <code class="literal">required</code> attribute to cover this need,
however. ARIA also includes a required attribute of its own. Similar to
labeling, it’s a good practice at this time to add both to ensure maximum
compatibility:</p>
<pre class="screen" data-origPath="/html/body/section/section[2]/pre[5]"><input type="text"
id="uname"
name="username"
aria-labelledby="username-label"
pattern="[A-Za-z0-9]{8,16}"
title="Enter a user name between 8 and 16 characters in length
and containing only alphanumeric characters"
required="required"
aria-required="true" /></pre>
<p data-origPath="/html/body/section/section[2]/p[11]">An accessible reading system could now announce to the reader that the field is
required when the reader enters it. Adding a clear prose indication that the
field is required to the <code class="literal">label</code> is still good
practice, too, as colors and symbols are never a reliable or accessible means of
conveying information:</p>
<pre class="screen" data-origPath="/html/body/section/section[2]/pre[6]"><label for="uname">User name: (required)</label></pre>
<p data-origPath="/html/body/section/section[2]/p[12]">ARIA also includes a property for setting the validity of an entry field. If the
reader enters invalid data, you can set the <code class="literal">aria-invalid</code> property in your code so that the reading system can
easily identify and move the reader to the incorrect field. For example, your
scripted validation might include the following line to set this state when the
input doesn’t pass your tests:</p>
<pre class="screen" data-origPath="/html/body/section/section[2]/pre[7]">document.getElementById('address').setAttribute('aria-invalid', true);</pre>
<p data-origPath="/html/body/section/section[2]/p[13]">Note, however, that you must not set this state by default; no data entered does
not indicate either validity or invalidity.</p>
<p data-origPath="/html/body/section/section[2]/p[14]">In addition to labeling individual form fields, you should also group and
identify any regions within your form (a common example on the web is forms with
separate fields for billing and shipping information). The traditional HTML
<code class="literal">fieldset</code> element and its child <code class="literal">legend</code> element cover this need without special
attributes.</p>
<p data-origPath="/html/body/section/section[2]/p[15]">So, to try and sum up, the best advice with forms is to strive to make them as
accessible as you can natively (good markup and logical order), but not to
forget that WAI-ARIA exists and has a number of useful properties and states
that can enhance your forms to make them more accessible.</p>
</body>
</html>