Update index.html

docs/index.html

@@ -461,19 +461,19 @@
 
 </li>
 
-        <li class="md-nav__item">
-  <a href="#links-and-buttons" class="md-nav__link">
-    Links and buttons
-  </a>
 
-</li>
 <li class="md-nav__item">
 <a href="#links-and-buttons" class="md-nav__link">
 Information hierarchy (Semantic page structure)
 </a>
 
 </li>
+<li class="md-nav__item">
+<a href="#links-and-buttons" class="md-nav__link">
+Links and buttons
+</a>
 
+</li>
 
         <li class="md-nav__item">
   <a href="#tool-tips" class="md-nav__link">
@@ -1307,23 +1307,7 @@ <h2 id="tool-tips">Tool Tips</h2>
 <li>the tooltip must be usable with both keyboards and screen readers</li>
 <li>where possible, ensure that the tool tip does not obscure what the user is focused on</li>
 </ul>
-<h2 id="images">Images</h2>
-<h3 id="informative-images">Informative images</h3>
-<ul>
-<li>do not use text in images </li>
-<li>provide alt-text when images convey meaning or information.</li>
-<li>keep alt-text to around 125 characters or 2 sentences </li>
-<li>if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. </li>
-</ul>
-<h3 id="decorative-images">Decorative images</h3>
-<ul>
-<li>avoid them in data products unless they convey useful information</li>
-<li>if an image is decorative, give it a null text alternative like this: (alt="") </li>
-</ul>
-<h3 id="product-tiles-and-other-large-buttons">Product tiles and other large buttons</h3>
-<ul>
-<li>If there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screen-grab of a product page because these are not helpful when visually searching for a product</li>
-</ul>
+
 <h2 id="data-visualisations">Data Visualisations</h2>
 <ul>
 <li>every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium]</li>
@@ -1453,6 +1437,23 @@ <h3 id="table">Tables</h3>
   <li>whenever possible, ensure that table width does not cause the user to have to scroll horizontally</li>
   <li>ensure that cell height can expand to accommodate its content - Do not let text be obscured or clipped by a cell that is too shallow</li>
 </ul>
+<h2 id="images">Images</h2>
+<h3 id="informative-images">Informative images</h3>
+<ul>
+<li>do not use text in images </li>
+<li>provide alt-text when images convey meaning or information.</li>
+<li>keep alt-text to around 125 characters or 2 sentences </li>
+<li>if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. </li>
+</ul>
+<h3 id="decorative-images">Decorative images</h3>
+<ul>
+<li>avoid them in data products unless they convey useful information</li>
+<li>if an image is decorative, give it a null text alternative like this: (alt="") </li>
+</ul>
+<h3 id="product-tiles-and-other-large-buttons">Product tiles and other large buttons</h3>
+<ul>
+<li>If there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screen-grab of a product page because these are not helpful when visually searching for a product</li>
+</ul>
 <h2 id="templates-and-widgets">Templates and Widgets</h2>
 <p>In future versions of this guide, there will be guidance here on use of widgets and templates in Workshop, and where possible, direct links to the templates. We will also include annotated images of available templates to make them easier to work with. </p>
 <p>The templates, widgets and code will be accessed in Foundry as usual</p>