epubjs
Version:
Render ePub documents in the browser, across many devices
87 lines (85 loc) • 5.8 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_0.html" /><link rel="next" href="./ch03s05_2.html" /></head><body>
<p data-origPath="/html/body/section/section[1]/p[6]">But to get more specific, the role an element plays is defined by attaching the
ARIA <code class="literal">role</code> element to it. The following is a small
selection of the <a class="ulink" href="http://www.w3.org/TR/wai-aria/roles#widget_roles" target="_top">available role values</a> you can use in this attribute:</p>
<ul class="itemizedlist" data-origPath="/html/body/section/section[1]/ul[1]">
<li class="listitem"><p> alert </p></li>
<li class="listitem"><p> button </p></li>
<li class="listitem"><p> checkbox </p></li>
<li class="listitem"><p> dialog </p></li>
<li class="listitem"><p> menuitem </p></li>
<li class="listitem"><p> progressbar </p></li>
<li class="listitem"><p> radio </p></li>
<li class="listitem"><p> scrollbar </p></li>
<li class="listitem"><p> tab </p></li>
<li class="listitem"><p> tree </p></li>
</ul>
<p data-origPath="/html/body/section/section[1]/p[7]">Here’s how we could now use this attribute to define an image as a audio clip
start button:</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[1]"><img src="controls/start.png"
id="audio-start"
role="button"
tabindex="0"
alt="Start"/></pre>
<p data-origPath="/html/body/section/section[1]/p[8]">Identifying the role is the easy part, though. Just as standard form controls
have states and properties that are controlled by the reading system, so too
must you add and maintain these on any custom controls you create.</p>
<p data-origPath="/html/body/section/section[1]/p[9]">A state, to clarify, tells you something about the nature of the control at a
given point in time: if an element represents a checkable item, for example, its
current state will either be checked or unchecked; if it can be hidden, its
state may be either hidden or visible; if it’s collapsible, it could be expanded
or collapsed; and so on.</p>
<p data-origPath="/html/body/section/section[1]/p[10]">Properties, on the other hand, typically provide meta information about the
control: how to find its label, how to find a description for it, its position
in a set, etc.</p>
<p data-origPath="/html/body/section/section[1]/p[11]">States and properties are both expressed in ARIA using attributes. For example,
the list of available states currently includes all of the following:</p>
<ul class="itemizedlist" data-origPath="/html/body/section/section[1]/ul[2]">
<li class="listitem"><p> aria-busy </p></li>
<li class="listitem"><p> aria-checked </p></li>
<li class="listitem"><p> aria-disabled </p></li>
<li class="listitem"><p> aria-expanded </p></li>
<li class="listitem"><p> aria-grabbed </p></li>
<li class="listitem"><p> aria-hidden </p></li>
<li class="listitem"><p> aria-invalid </p></li>
<li class="listitem"><p> aria-pressed </p></li>
<li class="listitem"><p> aria-selected </p></li>
</ul>
<p data-origPath="/html/body/section/section[1]/p[12]">The list of available properties is much larger, but a small sampling
includes:</p>
<ul class="itemizedlist" data-origPath="/html/body/section/section[1]/ul[3]">
<li class="listitem"><p> aria-activedescendant </p></li>
<li class="listitem"><p> aria-controls </p></li>
<li class="listitem"><p> aria-describedby </p></li>
<li class="listitem"><p> aria-dropeffect </p></li>
<li class="listitem"><p> aria-flowto </p></li>
<li class="listitem"><p> aria-labelledby </p></li>
<li class="listitem"><p> aria-live </p></li>
<li class="listitem"><p> aria-posinset </p></li>
<li class="listitem"><p> aria-required </p></li>
</ul>
<aside class="note" title="Note" data-origPath="/html/body/section/section[1]/aside[2]">
<h3 class="title">Note</h3>
<p>See <a class="ulink" href="http://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def" target="_top">section 6.6</a> of the ARIA specification for a complete
list of all states and properties, including definitions.</p>
</aside>
<p data-origPath="/html/body/section/section[1]/p[13]">All of these state and property attributes are supported in EPUB 3 content
documents, and their proper application and updating as your controls are
interacted with is how the needed information gets relayed back to the reader.
(Note: you only have to maintain their values; you don’t have to worry about the
underlying process that identifies the change and passes it on.)</p>
<p data-origPath="/html/body/section/section[1]/p[14]">The natural question at this point is which states and properties do you have to
set when creating a custom control. It would be great if there were a simple
chart that could be followed, but unfortunately the ones that you apply is very
much dependent on the type of control you’re creating, and what you’re using it
to do. To be fully accessible, you need to consider all the ways in which a
reader will be interacting with your control, and how the states and properties
need to be modified to reflect the reality of the control as each action is
performed. There is no one-size-fits-all solution, in other words.</p>
</body>
</html>