Implementing feedback

source/page-structure/headings.html.erb.md

@@ -58,7 +58,8 @@ In the following example, headings are used to only organize passages of text on
 
 ## Headings that reflect the page organization
 
-The following two examples show headings that are used to reflect the organization if the page and also the main content. If headings are used in this way, use them as labels for explicitly created [page regions](regions.html) by associating them with their region using [aria-labelledby](https://w3c.github.io/wai-tutorials/page-structure/labels/#using-aria-labelledby).
+Headings are useful for labeling page regions. Use aria-labelledby, as described in the [label
+page regions](labels.html/#using-aria-labelledby) section of this tutorial, to associate headings with their  page regions.
 
 ### Main heading before navigation
 {:.ex}

source/page-structure/labels.html.erb.md

@@ -15,18 +15,31 @@ contributors:
 - The Education and Outreach Working Group (<a href="https://www.w3.org/WAI/EO/">EOWG</a>)
 support: Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.
 ---
-Most regions on a page should be labeled. Labels are especially important when multiple regions of the same type are on one page, such as multiple navigation options. WAI-ARIA provides simple mechanisms for labeling a region, enabling users to navigate around the page quickly.
+Add labels to regions if multiple regions of the same type are on one page, for instance, multiple navigation regions. WAI-ARIA provides simple mechanisms for labeling a region, enabling users to navigate around the page quickly.
 
-Sections should also be organized using [headings](headings.html).
-
-## Using `aria-label`
+## Using `aria-labelledby`
 {:.ap}
 
 {::nomarkdown}
 <%= ref :start %>
 {:/nomarkdown}
 
-Use the WAI-ARIA `aria-label` attribute to label the region. Consider this approach if the label should not appear visually on the page.
+Use the WAI-ARIA `aria-labelledby` to reference an existing element – like a heading – by its (unique) `id`. The content of the referenced element is then used as the label. Users can navigate by headings to find the region.
+
+{::nomarkdown}
+<%= code_start %>
+{:/nomarkdown}
+
+~~~html
+<nav aria-labelledby="regionheading">
+  <h3 id="regionheading">On this Page</h3>
+    …
+</nav>
+~~~
+
+{::nomarkdown}
+<%= code_end %>
+{:/nomarkdown}
 
 {::nomarkdown}
 <%= ref :middle %>
@@ -41,6 +54,14 @@ Explore other WAI-ARIA resources:
 <%= ref :end %>
 {:/nomarkdown}
 
+
+## Using `aria-label`
+{:.ap}
+
+
+
+Use the WAI-ARIA `aria-label` attribute to label the region. Consider this approach if the label should not appear visually on the page.
+
 {::nomarkdown}
 <%= demo :start %>
 {:/nomarkdown}
@@ -68,23 +89,3 @@ View a [complete code example](example.html) with regions and labels.
 {::nomarkdown}
 <%= demo :end %>
 {:/}
-
-## Using `aria-labelledby`
-{:.ap}
-
-Use the WAI-ARIA `aria-labelledby` to reference an existing element – like a heading – by its (unique) `id`. The content of the referenced element is then used as the label. A heading allows users to find the region in multiple ways.
-
-{::nomarkdown}
-<%= code_start %>
-{:/nomarkdown}
-
-~~~html
-<nav aria-labelledby="regionheading">
-  <h3 id="regionheading">On this Page</h3>
-    …
-</nav>
-~~~
-
-{::nomarkdown}
-<%= code_end %>
-{:/nomarkdown}

source/page-structure/regions.html.erb.md

@@ -176,8 +176,6 @@ The [Menus tutorial](/menus/index.html) provides more details on creating menus.
 
 Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles.
 
-Such regions should also be [labeled](/page-structure/labels.html).
-
 {::nomarkdown}
 <%= code_start('', 'Examples in HTML5') %>
 {:/nomarkdown}
@@ -221,5 +219,3 @@ If HTML5 cannot be used or if an HTML4 page is retrofitted to improve accessibil
 {::nomarkdown}
 <%= code_end %>
 {:/nomarkdown}
-
-Such regions should also be [labeled](/page-structure/labels.html).