Revise Introduction of Navigation Treeview Example Using Computed Pro…

…perties Modified examples/treeview/treeview-2/treeview-2a.html for issue #225: * Corrected typos. * Editorial revision to wording. * Added description of function of the example. * Revised statement that said treeitems cannot contain interactive elements because they can contain other treeitems.
w3c · Feb 11, 2017 · 56bc1a8 · 56bc1a8
1 parent 842b59d
commit 56bc1a8
Showing 1 changed file with 12 additions and 13 deletions.
diff --git a/examples/treeview/treeview-2/treeview-2a.html b/examples/treeview/treeview-2/treeview-2a.html
@@ -6,16 +6,13 @@
 
     <link href="../../css/core.css" rel="stylesheet">
     <link href="../../css/table.css" rel="stylesheet">
+    <script src="../../js/examples.js" type="text/javascript"></script>
 
     <link href="css/treeLinks.css" rel="stylesheet">
-
     <script type="text/javascript" src="js/treeLinks.js"></script>
     <script type="text/javascript" src="js/treeitemLinks.js"></script>
     <script type="text/javascript" src="js/treeitemClick.js"></script>
-
-    <script src="../../js/examples.js" type="text/javascript"></script>
   </head>
-
   <body>
     <main>
       <h1>Navigation Treeview Example Using Computed Properties</h1>
@@ -25,23 +22,25 @@ <h1>Navigation Treeview Example Using Computed Properties</h1>
         <a href="https://github.com/w3c/aria-practices/issues/225">issue 225.</a>
       </p>
   <p>
-    This example implements the features of the
+    The below example demonstrates how the  
     <a href="../../../#TreeView">Treeview Design Pattern</a>
-    for navigating and selecting a link in a large set of hierarchically organized links.
-    It is important in this example that the <code>role=treeitem</code> overrides the default role of link for the <code>a</code> elements, since a <code>treeitem</code> widget cannot contain any interactive elements (e.g. a link).
-    This example also relies on the browser to
-    compute values for <code>aria-setsize</code>, <code>aria-posinset</code> and <code>arial-level</code>.
-    The ARIA 1.0 Spectification for these properties states the browser can compute these values,
-    but is not required to.
+    can be used to build a navigation tree for a set of hierarchically organized web pages.
+    In this example, the user can browse a set of pages about foods that is organized into categories.
+    Activating an item in the tree will open a page about the chosen food.
   </p>
-
+  <p>
+    Since a tree item is the only kind of interactive element that can be contained in a tree, links to web pages in a navigation tree have the <code>treeitem</code> role.
+  </p>
+  <p>
+        This example relies on the browser to compute values for <code>aria-setsize</code>, <code>aria-posinset</code> and <code>aria-level</code>.   
+        The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute these values.
+       </p>
       <p>Similar examples include: </p>
       <ul>
         <li><a href="../treeview-1/treeview-1a.html">File Directory Treeview using <em>computed</em> properties</a></li>
         <li><a href="../treeview-1/treeview-1b.html">File Directory Treeview using <em>declared</em> properties</a></li>
         <li><a href="../treeview-2/treeview-2b.html">Navigation Treeview using <em>declared</em> properties</a></li>
       </ul>
-
   <section>
         <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>