epubjs
Version:
Render ePub documents in the browser, across many devices
54 lines (52 loc) • 3.98 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[1]" /><link rel="prev" href="./ch03s05_2.html" /><link rel="next" href="./ch03s05_4.html" /></head><body>
<p data-origPath="/html/body/section/section[1]/p[21]">In other words, instead of having to focus only on the logic of your application,
you now also have to focus on all the interactions with your custom controls.
This extra programming burden is why rolling your own was not recommended at the
outset. This is a simple example, too. The more controls you add, the more
complex the process becomes and the more potential side-effects you have to
consider and account for.</p>
<p data-origPath="/html/body/section/section[1]/p[22]">If you still want to pursue your own controls, though, or just want to learn
more, the <a class="ulink" href="http://test.cita.uiuc.edu/aria/" target="_top">Illinois Center for Information Technology and Web Accessibility</a>
maintains a comprehensive set of examples, with working code, that are worth the
time to review. You’ll discover much more from their many examples than I could
reproduce here. The ARIA authoring practices guide also walks through the
process of <a class="ulink" href="http://www.w3.org/TR/wai-aria-practices/#accessiblewidget" target="_top">creating an accessible control</a>.</p>
<p data-origPath="/html/body/section/section[1]/p[23]">A quick note on <code class="literal">tabindex</code> is also in order, as you no
doubt noticed it on the preceding examples. Although this is actually an HTML
attribute, it goes hand-in-hand with ARIA and custom controls because it allows
you to specify additional elements that can receive keyboard focus, as well the
order in which all elements are traversed (i.e., it improves keyboard
accessibility). It is critical that you add the attribute to your custom
controls, otherwise readers won’t be able to navigate to them.</p>
<aside class="note" title="Note" data-origPath="/html/body/section/section[1]/aside[4]">
<h3 class="title">Note</h3>
<p>What elements a reader can access by the keyboard by default is reading
system-dependent, but typically only links, form elements, and multimedia
and other interactive elements receive focus by default. Keep this in mind
when you roll your own controls, otherwise readers may not have access to
them.</p>
</aside>
<p data-origPath="/html/body/section/section[1]/p[24]">Here’s another look at our earlier image button again:</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[3]"><img src="controls/start.png"
id="audio-start"
alt="Start"
role="button"
tabindex="0"/></pre>
<p data-origPath="/html/body/section/section[1]/p[25]">By adding the attribute with the value <code class="literal">0</code>, we’ve
enabled direct keyboard access to this <code class="literal">img</code> element.
The <code class="literal">0</code> value indicates that we aren’t giving this
control any special significance within the document, which is the default for
all elements that can be natively tabbed to. To create a tab order, we could
assign incrementing positive integers to the controls, but be aware that this
can affect the navigation of your document, as all elements with a positive
<code class="literal">tabindex</code> value are traversed before those set
to <code class="literal">0</code> or not specified at all (in other words, don’t
add the value <code class="literal">1</code> because to you it’s the first
element in your control set).</p>
</body>
</html>