epubjs

Version:

Render ePub documents in the browser, across many devices

57 lines (55 loc) • 4.51 kB

HTML

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE 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[3]" /><link rel="prev" href="./ch03s05_6.html" /><link rel="next" href="./ch03s05_8.html" /></head><body> You should also take care about how much information you inform the reader of. If you’re updating only small bits of text, the reading system might only announce the new text, leaving the reader confused about what is going on. Conversely, you might add a new node to a long list, but the reader might be forced to listen to all the entries that came before it again, depending on how you have coded your application. The <code class="literal">aria-atomic</code> attribute gives you control over the amount of text that gets announced. If you set it to <code class="literal">true</code>, for a region, all the content will be read whenever you make a change inside it. For example, if you set a paragraph as live and add this attribute, then change the text in a <code class="literal">span</code> inside it, the entire paragraph will be read. In this example: <pre class="screen" data-origPath="/html/body/section/section[3]/pre[2]"> Your current BMI is: </pre> Writing the reader’s body mass index value to the embedded <code class="literal">span</code> will cause the whole text to be read. If you set the attribute to <code class="literal">false</code> (or omit it), only the prose in the element containing the text change gets announced. Using our last example, only the body mass index value in isolation would be announced. You can further control this behavior by also attaching the <code class="literal">aria-relevant</code> attribute. This attribute allows you to specify, for example, that all node changes in the region should be announced, only new node additions, or only deletions (e.g., for including data feeds). It can also be set to only identify text changes. You can even combine values (the default is <code class="literal">additions text</code>). We could use these attributes to set up a fictional author update box using an ordered list as follows: <pre class="screen" data-origPath="/html/body/section/section[3]/pre[3]">What's the Author Saying… <ol id="feed" aria-live="polite" aria-atomic="true" aria-relevant="additions" aria-labelledby="feed-label"> … </ol> <a href="http://www.example.com/authorsonline">Go online to view</a></pre> Only the new list items added for each incoming message will be read now. The old messages we pull out will disappear silently. (And I’ve also added a traditional link out for anyone who doesn’t have scripting enabled!) There are also special roles that automatically identify a region as live. Instead of using the <code class="literal">aria-live</code> attribute to indicate our results field, we could have instead set up an alert region as follows: <div role="alert” id="results"/> The following roles are also treated as indicating live regions: <code class="literal">marquee</code>, <code class="literal">log</code>, <code class="literal">status</code>, and <code class="literal">timer</code>. And that’s a quick run-through of how to ensure that all readers get alerted of changes you make to the content. It’s not a complicated process, but you need to remember to ensure that you set these regions otherwise a segment of your readers will not get your updates. </body> </html>