From a2e1faff9568365d1617352ebee468dfabdec1a1 Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Mon, 18 Jul 2022 21:01:04 +0100
Subject: [PATCH 01/13] feat: first draft of the accessible nav how to article

---
 ...o-make-an-accessible-nav-with-dropdowns.md | 202 ++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
new file mode 100644
index 000000000..02635e41f
--- /dev/null
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -0,0 +1,202 @@
+---
+title: Make an accessible &lt;nav&gt; with dropdowns
+description: Navigation is a critial part of any application, it allows people to complete journeys and find the information they need. Therefore making it is accessible is key.
+category: How-to
+author: James Bateson
+date: 2022-05-21
+further_reading:
+  - title: "Menus & Menu Buttons"
+    url: https://inclusive-components.design/menus-menu-buttons/
+    source: Heydon Pickering
+  - title: "Don't use ARIA menu roles for site nav"
+    url: https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html
+    source: Adrian Roselli
+  - title: "Navigation role support"
+    url: https://a11ysupport.io/tech/aria/navigation_role
+	source: Accessibility Support
+thanks: ""
+tags:
+  - howto
+---
+
+Navigation is a critial part of any application and can often involve multiple-levels of nesting. It allows people to complete journeys and find the information they need. Therefore making sure it is accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
+
+## The `nav` section element
+
+Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning, and therefore comes with accessibility benefits just by using it to mark up sections of navigation.
+
+<blockquote>
+	<p>The &lt;nav&gt; HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</p>
+	<footer>
+		<cite><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav">MDN web docs: &lt;nav&gt;: The Navigation Section element</a></cite>
+	</footer>
+</blockquote>
+
+Here's the example markup that we'll build up throughout this article. It's worth noting that already this is an example of accessible navigation.
+
+```html
+<nav>
+	<ul>
+		<li><a href="#">Home</a></li>
+		<li><a href="#">About</a></li>
+		<li><a href="#">Work</a></li>
+		<li><a href="#">Contact</a></li>
+	</ul>
+</nav>
+```
+
+### Semantics
+
+The &lt;nav&gt; element will automatically communicate a role of navigation-equal to setting `role="navigation"` (this may still need to be added if needing to [support some assitive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning that it can be easily navigated to by a screen reader user—as a landmark.
+
+### Best practices summary
+
+- Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for screen reader users.
+- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This could be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessibile name.
+
+```html
+<nav aria-labelledby="main-nav-label">
+	<h2 id="main-nav-label" class="visually-hidden">Main menu</h2>
+
+	<ul>
+		...
+	</ul>
+</nav>
+
+<nav aria-label="Main menu">
+	<ul>
+		...
+	</ul>
+</nav>
+```
+
+## Adding dropdowns
+
+Navigation designs often require mutiple levels of links underneath a top level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be multiple-levels deep. It's important that some accessibility considerations are made before implementing.
+
+- How would the navigation show if there were no styles.
+- How should the parent link toggle the dropdown.
+- How can focus order be handled correctly.
+- Does the parent link still need to retain it's link functionality.
+- Make sure that dropdowns are hidden from assitive technology until needed.
+
+Dropdown sub-navigation is typically marked up as a nested list inside of the parent link list item.
+
+```html
+<nav aria-label="Main menu">
+	<ul>
+		<li><a href="#">Home</a></li>
+		<li>
+			<a href="#">About</a>
+			<ul>
+				<li><a href="#">Our history</a></li>
+				<li><a href="#">Meet the team</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Work</a></li>
+		<li><a href="#">Contact</a></li>
+	</ul>
+</nav>
+```
+
+### Consideration 1: No styles
+
+Structuring the markup as shown in the example, means that without any CSS loaded, the links would show as a default nested list and items underneath the parent link, clear both visually and semantically.
+
+### Consideration 2: Parent link toggle
+
+Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This however, comes with two problems. By using a click it means that extra fucntionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
+
+By adding a toggle element within the parent link, for example an arrow icon button, it allows people to only show the dropdown if they are interested in seeing futher links associated with the parent. Make sure that the toggle element has a sufficent tap/click (this pattern could be used for mobile as well) area and focus/hover states.
+
+**Note:** If you're parent elements don't need to be link themselves, make sure to use a `<button>` element, so that they can corrrectly communicate they are expandable and have an event associated.
+
+```html
+<nav aria-label="Main menu">
+	<ul>
+		<li><a href="#">Home</a></li>
+		<li>
+			<a href="#">
+				About Us
+				<button>
+					<svg aria-hidden="true">...</svg>
+					<span class="visually-hidden">Toggle About Us submenu</span>
+				</button>
+			</a>
+			<ul>
+				<li><a href="#">Our history</a></li>
+				<li><a href="#">Meet the team</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Work</a></li>
+		<li><a href="#">Contact</a></li>
+	</ul>
+</nav>
+```
+
+### Consideration 3: Focus order
+
+By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. Therefore adding a trigger inside the parent link is a great way to ensure that a users intention is to see the dropdown for that link and therefore take focus to the first link in said dropdown.
+
+Related to focus, another nice consideration would be to make sure that if the user pressed the <kbd>ESC</kbd> key, that the dropdown would close, and the users focus returned to the toggle element they used to open it.
+
+### Consideration 4: Parent link functionality
+
+A parent link for a dropdown genrally will still need to retain its functionality as a link. This can present problems if for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
+
+### Consideration 5: Showing/hiding the dropdown
+
+When the navigation dropdown is closed, it's important to ensure that the nested links are not visible to assisitve technology. For example people using a keyboard cannot tab to the links—this can cause confusion as the where their focus is on the page.
+
+To hide elements such as sub menus from assistive technology, you should not reply on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until peopple choose to access that sub navigation, consider toggling the `display: none;` or `visibillity: hidden;` properties.
+
+## What about ARIA?
+
+When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. However, a &lt;nav&gt; with dropdowns does not require any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). However, these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with navtive operating system-like menus, for example, a selection of options for a user.
+
+Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a slightly better expereince for users.
+
+### Expanded states (aria-expanded)
+
+The `aria-expanded` attribute can be used to communicate whether a control is expanded or collapsed. In our navigation example, this could be useful to inform screen reader users if the dropdown open or not, base don whather the toggle is expanded or collapsed. This value of the attribute would need to be changed via JavaScript when the user opened and closed the dropdown.
+
+```html
+<nav aria-label="Main menu">
+	<ul>
+		<li><a href="#">Home</a></li>
+		<li>
+			<a href="#">
+				About Us
+				<button aria-expanded="false">
+					<svg aria-hidden="true">...</svg>
+					<span class="visually-hidden">Toggle About Us submenu</span>
+				</button>
+			</a>
+			<ul>
+				<li><a href="#">Our history</a></li>
+				<li><a href="#">Meet the team</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Work</a></li>
+		<li><a href="#">Contact</a></li>
+	</ul>
+</nav>
+```
+
+### Current link (aria-current)
+
+A common navigation design will see the currently active page link visually different in some way, indicating to the user which page they are on. However, this isn't helpful for people who may not be able to see this distincation. The `aria-current` attribute can be used to inform assistive technology that a link is the currently active page. `aria-current` accepts a set list of values, the most suitable for a main navigation item would be `aria-current='page'`.
+
+## Skip links
+
+Although not technically required to make an accessible navigation making sure that your site has a 'skip link' (usually visually hidden until tabbed to) that can bypass a main site navigation is a handy usability feature. It allows a user to jump directly to a pages main landmark missing out common and repeated site areas, sych as the navigation so the user does not need to traverse this content on every page.
+
+## Alternatives
+
+Multi-level navigation with dropdowns often reffered to as 'mega menus' can often be complex to implement and require some user thought to navigte. In certian cases, we might want to consider an alternative.
+
+### In-page navigation/table of contents
+
+One option could be to keep the top level navigation as links only, then on the page that the parent link takes the user to, have and in-page navigation/table of contents. This could help a user get to a page they would like to see the content for, and then navigate accordingly from there. Rather than lots of links being nested complexely in dropdowns, show them all up-front on a suitable page.
+
+If the page was short, these could anchor a user down to the relevant content, or if a content-heavy site, each link would be a page.

From 42ae52db2f4d36f8e303da75c7d38dc784b339dc Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Wed, 20 Jul 2022 05:13:34 +0100
Subject: [PATCH 02/13] fix: first pass and fix of SPAG

---
 ...o-make-an-accessible-nav-with-dropdowns.md | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 02635e41f..6b398138f 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -1,6 +1,6 @@
 ---
 title: Make an accessible &lt;nav&gt; with dropdowns
-description: Navigation is a critial part of any application, it allows people to complete journeys and find the information they need. Therefore making it is accessible is key.
+description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. Therefore making it is accessible is key.
 category: How-to
 author: James Bateson
 date: 2022-05-21
@@ -13,17 +13,17 @@ further_reading:
     source: Adrian Roselli
   - title: "Navigation role support"
     url: https://a11ysupport.io/tech/aria/navigation_role
-	source: Accessibility Support
+    source: Accessibility Support
 thanks: ""
 tags:
   - howto
 ---
 
-Navigation is a critial part of any application and can often involve multiple-levels of nesting. It allows people to complete journeys and find the information they need. Therefore making sure it is accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
+Navigation is a critical part of any application and can often involve multiple levels of nesting. It allows people to complete journeys and find the information they need. Therefore making sure it is accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
 
 ## The `nav` section element
 
-Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning, and therefore comes with accessibility benefits just by using it to mark up sections of navigation.
+Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and therefore comes with accessibility benefits just by using it to mark up sections of navigation.
 
 <blockquote>
 	<p>The &lt;nav&gt; HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</p>
@@ -47,12 +47,12 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 ### Semantics
 
-The &lt;nav&gt; element will automatically communicate a role of navigation-equal to setting `role="navigation"` (this may still need to be added if needing to [support some assitive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning that it can be easily navigated to by a screen reader user—as a landmark.
+The &lt;nav&gt; element will automatically communicate a role of navigation-equal to setting `role="navigation"` (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning that it can be easily navigated to by a screen reader user—as a landmark.
 
 ### Best practices summary
 
 - Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for screen reader users.
-- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This could be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessibile name.
+- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This could be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
 
 ```html
 <nav aria-labelledby="main-nav-label">
@@ -72,13 +72,13 @@ The &lt;nav&gt; element will automatically communicate a role of navigation-equa
 
 ## Adding dropdowns
 
-Navigation designs often require mutiple levels of links underneath a top level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be multiple-levels deep. It's important that some accessibility considerations are made before implementing.
+Navigation designs often require multiple levels of links underneath a top-level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be multiple levels deep. Some accessibility considerations must be made before implementation.
 
 - How would the navigation show if there were no styles.
 - How should the parent link toggle the dropdown.
 - How can focus order be handled correctly.
-- Does the parent link still need to retain it's link functionality.
-- Make sure that dropdowns are hidden from assitive technology until needed.
+- Does the parent link still need to retain its link functionality.
+- Make sure that dropdowns are hidden from assistive technology until needed.
 
 Dropdown sub-navigation is typically marked up as a nested list inside of the parent link list item.
 
@@ -105,11 +105,11 @@ Structuring the markup as shown in the example, means that without any CSS loade
 
 ### Consideration 2: Parent link toggle
 
-Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This however, comes with two problems. By using a click it means that extra fucntionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
+Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This, however, comes with two problems. By using a click it means that extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
 
-By adding a toggle element within the parent link, for example an arrow icon button, it allows people to only show the dropdown if they are interested in seeing futher links associated with the parent. Make sure that the toggle element has a sufficent tap/click (this pattern could be used for mobile as well) area and focus/hover states.
+By adding a toggle element within the parent link, for example, an arrow icon button, allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has a sufficient tap/click (this pattern could be used for mobile as well) area and focus/hover states.
 
-**Note:** If you're parent elements don't need to be link themselves, make sure to use a `<button>` element, so that they can corrrectly communicate they are expandable and have an event associated.
+**Note:** If your parent elements don't need to be a link themselves, make sure to use a `<button>` element, so that they can correctly communicate they are expandable and have an event associated.
 
 ```html
 <nav aria-label="Main menu">
@@ -136,29 +136,29 @@ By adding a toggle element within the parent link, for example an arrow icon but
 
 ### Consideration 3: Focus order
 
-By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. Therefore adding a trigger inside the parent link is a great way to ensure that a users intention is to see the dropdown for that link and therefore take focus to the first link in said dropdown.
+By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. Therefore adding a trigger inside the parent link is a great way to ensure that a user's intention is to see the dropdown for that link and therefore take focus to the first link in said dropdown.
 
-Related to focus, another nice consideration would be to make sure that if the user pressed the <kbd>ESC</kbd> key, that the dropdown would close, and the users focus returned to the toggle element they used to open it.
+Related to focus, another nice consideration would be to make sure that if the user pressed the <kbd>ESC</kbd> key, the dropdown would close, and the user's focus return to the toggle element they used to open it.
 
 ### Consideration 4: Parent link functionality
 
-A parent link for a dropdown genrally will still need to retain its functionality as a link. This can present problems if for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
+A parent link for a dropdown generally will still need to retain its functionality as a link. This can present problems if, for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
 
 ### Consideration 5: Showing/hiding the dropdown
 
-When the navigation dropdown is closed, it's important to ensure that the nested links are not visible to assisitve technology. For example people using a keyboard cannot tab to the links—this can cause confusion as the where their focus is on the page.
+When the navigation dropdown is closed, it's important to ensure that the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion as to where their focus is on the page.
 
-To hide elements such as sub menus from assistive technology, you should not reply on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until peopple choose to access that sub navigation, consider toggling the `display: none;` or `visibillity: hidden;` properties.
+To hide elements such as sub-menus from assistive technology, you should not rely on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until people choose to access that sub-navigation, consider toggling the `display: none;` or `visibility: hidden;` properties.
 
 ## What about ARIA?
 
-When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. However, a &lt;nav&gt; with dropdowns does not require any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). However, these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with navtive operating system-like menus, for example, a selection of options for a user.
+When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. However, a &lt;nav&gt; with dropdowns does not require any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). However, these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a user.
 
-Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a slightly better expereince for users.
+Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a slightly better experience for users.
 
 ### Expanded states (aria-expanded)
 
-The `aria-expanded` attribute can be used to communicate whether a control is expanded or collapsed. In our navigation example, this could be useful to inform screen reader users if the dropdown open or not, base don whather the toggle is expanded or collapsed. This value of the attribute would need to be changed via JavaScript when the user opened and closed the dropdown.
+The `aria-expanded` attribute can be used to communicate whether a toggle control is expanded or collapsed. In our navigation example, this could be useful to inform screen reader users if the dropdown is open or not, based on whether the toggle is expanded or collapsed. This value of the attribute would need to be changed via JavaScript when the user opened and closed the dropdown.
 
 ```html
 <nav aria-label="Main menu">
@@ -185,18 +185,18 @@ The `aria-expanded` attribute can be used to communicate whether a control is ex
 
 ### Current link (aria-current)
 
-A common navigation design will see the currently active page link visually different in some way, indicating to the user which page they are on. However, this isn't helpful for people who may not be able to see this distincation. The `aria-current` attribute can be used to inform assistive technology that a link is the currently active page. `aria-current` accepts a set list of values, the most suitable for a main navigation item would be `aria-current='page'`.
+A common navigation design will see the currently active page link visually different in some way, indicating to the user which page they are on. However, this isn't helpful for people who may not be able to see this distinction. The `aria-current` attribute can be used to inform assistive technology that a link is the current page. `aria-current` accepts a set list of values, the most suitable for the main navigation item would be `aria-current='page'`.
 
 ## Skip links
 
-Although not technically required to make an accessible navigation making sure that your site has a 'skip link' (usually visually hidden until tabbed to) that can bypass a main site navigation is a handy usability feature. It allows a user to jump directly to a pages main landmark missing out common and repeated site areas, sych as the navigation so the user does not need to traverse this content on every page.
+Although not technically required to make accessible navigation making sure that your site has a 'skip link' (usually visually hidden until tabbed to) that can bypass the main site navigation is a handy usability feature. It allows a user to jump directly to a page's &lt;main&gt; landmark, skipping common and repeated site areas, such as the navigation so the user does not need to traverse this content on every page.
 
 ## Alternatives
 
-Multi-level navigation with dropdowns often reffered to as 'mega menus' can often be complex to implement and require some user thought to navigte. In certian cases, we might want to consider an alternative.
+Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex to implement and require some user thought to navigate. In certain cases, we might want to consider an alternative.
 
 ### In-page navigation/table of contents
 
-One option could be to keep the top level navigation as links only, then on the page that the parent link takes the user to, have and in-page navigation/table of contents. This could help a user get to a page they would like to see the content for, and then navigate accordingly from there. Rather than lots of links being nested complexely in dropdowns, show them all up-front on a suitable page.
+One option could be to keep the top-level navigation as links only, then on the page that the parent link takes the user to, have an in-page navigation/table of contents. This could help a user get to a page they would like to see the content for, and then navigate accordingly from there. Rather than lots of links being nested with complexity in dropdowns, show them all up-front on a suitable page.
 
 If the page was short, these could anchor a user down to the relevant content, or if a content-heavy site, each link would be a page.

From 2fc387f44e44f7e55cbd86874965974194302734 Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Wed, 20 Jul 2022 06:35:59 +0100
Subject: [PATCH 03/13] chore: date change and nav syntax consistency

---
 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 6b398138f..42f9322e5 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -3,7 +3,7 @@ title: Make an accessible &lt;nav&gt; with dropdowns
 description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. Therefore making it is accessible is key.
 category: How-to
 author: James Bateson
-date: 2022-05-21
+date: 2022-08-01
 further_reading:
   - title: "Menus & Menu Buttons"
     url: https://inclusive-components.design/menus-menu-buttons/
@@ -21,7 +21,7 @@ tags:
 
 Navigation is a critical part of any application and can often involve multiple levels of nesting. It allows people to complete journeys and find the information they need. Therefore making sure it is accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
 
-## The `nav` section element
+## The &lt;nav&gt; section element
 
 Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and therefore comes with accessibility benefits just by using it to mark up sections of navigation.
 

From bf169ff3ffbf39979a5b1515f3e9bbaa42ebf35a Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Sat, 6 Aug 2022 14:00:23 +0100
Subject: [PATCH 04/13] fix: changes from Anya proof

---
 ...o-make-an-accessible-nav-with-dropdowns.md | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 42f9322e5..114664bb2 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -23,7 +23,7 @@ Navigation is a critical part of any application and can often involve multiple
 
 ## The &lt;nav&gt; section element
 
-Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and therefore comes with accessibility benefits just by using it to mark up sections of navigation.
+Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and therefore comes with accessibility benefits just by using it to mark-up sections of navigation.
 
 <blockquote>
 	<p>The &lt;nav&gt; HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</p>
@@ -32,7 +32,7 @@ Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section elemen
 	</footer>
 </blockquote>
 
-Here's the example markup that we'll build up throughout this article. It's worth noting that already this is an example of accessible navigation.
+Here's the example markup that we'll build up throughout this article. It's worth noting this is an example of accessible navigation.
 
 ```html
 <nav>
@@ -47,11 +47,11 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 ### Semantics
 
-The &lt;nav&gt; element will automatically communicate a role of navigation-equal to setting `role="navigation"` (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning that it can be easily navigated to by a screen reader user—as a landmark.
+The &lt;nav&gt; element will automatically communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
 
 ### Best practices summary
 
-- Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for screen reader users.
+- Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for people using screen readers.
 - Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This could be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
 
 ```html
@@ -74,10 +74,10 @@ The &lt;nav&gt; element will automatically communicate a role of navigation-equa
 
 Navigation designs often require multiple levels of links underneath a top-level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be multiple levels deep. Some accessibility considerations must be made before implementation.
 
-- How would the navigation show if there were no styles.
-- How should the parent link toggle the dropdown.
-- How can focus order be handled correctly.
-- Does the parent link still need to retain its link functionality.
+- How would the navigation show if there were no styles?
+- How should the parent link toggle the dropdown?
+- How can focus order be handled correctly?
+- Does the parent link still need to retain its link functionality?
 - Make sure that dropdowns are hidden from assistive technology until needed.
 
 Dropdown sub-navigation is typically marked up as a nested list inside of the parent link list item.
@@ -99,15 +99,15 @@ Dropdown sub-navigation is typically marked up as a nested list inside of the pa
 </nav>
 ```
 
-### Consideration 1: No styles
+### Tip 1: No styles
 
-Structuring the markup as shown in the example, means that without any CSS loaded, the links would show as a default nested list and items underneath the parent link, clear both visually and semantically.
+Structuring the markup as shown in the example means without any CSS loaded, the links would show as a default nested list and items underneath the parent link, clear both visually and semantically.
 
-### Consideration 2: Parent link toggle
+### Tip 2: Parent link toggle
 
-Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This, however, comes with two problems. By using a click it means that extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
+Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This comes with two problems. Using a click means extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
 
-By adding a toggle element within the parent link, for example, an arrow icon button, allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has a sufficient tap/click (this pattern could be used for mobile as well) area and focus/hover states.
+By adding a toggle element, for example an arrow icon button, within the parent link allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has a sufficient tap/click (this pattern could be used for mobile as well) area and focus/hover states.
 
 **Note:** If your parent elements don't need to be a link themselves, make sure to use a `<button>` element, so that they can correctly communicate they are expandable and have an event associated.
 
@@ -134,31 +134,31 @@ By adding a toggle element within the parent link, for example, an arrow icon bu
 </nav>
 ```
 
-### Consideration 3: Focus order
+### Tip 3: Focus order
 
-By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. Therefore adding a trigger inside the parent link is a great way to ensure that a user's intention is to see the dropdown for that link and therefore take focus to the first link in said dropdown.
+By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. Therefore adding a trigger inside the parent link is a great way to ensure a person's intention is to see the dropdown for that link and therefore take focus to the first link in said dropdown.
 
-Related to focus, another nice consideration would be to make sure that if the user pressed the <kbd>ESC</kbd> key, the dropdown would close, and the user's focus return to the toggle element they used to open it.
+Related to focus, another nice feature would be to make sure that if the person pressed the <kbd>ESC</kbd> key, the dropdown would close, and the person's focus return to the toggle element they used to open it.
 
-### Consideration 4: Parent link functionality
+### Tip 4: Parent link functionality
 
 A parent link for a dropdown generally will still need to retain its functionality as a link. This can present problems if, for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
 
-### Consideration 5: Showing/hiding the dropdown
+### Tip 5: Showing/hiding the dropdown
 
-When the navigation dropdown is closed, it's important to ensure that the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion as to where their focus is on the page.
+When the navigation dropdown is closed, it's important to ensure the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion as to where their focus is on the page.
 
 To hide elements such as sub-menus from assistive technology, you should not rely on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until people choose to access that sub-navigation, consider toggling the `display: none;` or `visibility: hidden;` properties.
 
 ## What about ARIA?
 
-When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. However, a &lt;nav&gt; with dropdowns does not require any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). However, these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a user.
+When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. However, a &lt;nav&gt; with dropdowns does not require any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). However, these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a person.
 
-Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a slightly better experience for users.
+Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a slightly better experience for people.
 
 ### Expanded states (aria-expanded)
 
-The `aria-expanded` attribute can be used to communicate whether a toggle control is expanded or collapsed. In our navigation example, this could be useful to inform screen reader users if the dropdown is open or not, based on whether the toggle is expanded or collapsed. This value of the attribute would need to be changed via JavaScript when the user opened and closed the dropdown.
+The `aria-expanded` attribute can be used to communicate whether a toggle control is expanded or collapsed. In our navigation example, this could be useful to inform people using screen readers if the dropdown is open or not, based on whether the toggle is expanded or collapsed. This value of the attribute would need to be changed via JavaScript when the person opened and closed the dropdown.
 
 ```html
 <nav aria-label="Main menu">
@@ -185,18 +185,18 @@ The `aria-expanded` attribute can be used to communicate whether a toggle contro
 
 ### Current link (aria-current)
 
-A common navigation design will see the currently active page link visually different in some way, indicating to the user which page they are on. However, this isn't helpful for people who may not be able to see this distinction. The `aria-current` attribute can be used to inform assistive technology that a link is the current page. `aria-current` accepts a set list of values, the most suitable for the main navigation item would be `aria-current='page'`.
+A common navigation design will see the currently active page link visually different in some way, indicating to the person which page they are on. However, this isn't helpful for people who may not be able to see this distinction. The `aria-current` attribute can be used to inform assistive technology that a link is the current page. `aria-current` accepts a set list of values, the most suitable for the main navigation item would be `aria-current='page'`.
 
 ## Skip links
 
-Although not technically required to make accessible navigation making sure that your site has a 'skip link' (usually visually hidden until tabbed to) that can bypass the main site navigation is a handy usability feature. It allows a user to jump directly to a page's &lt;main&gt; landmark, skipping common and repeated site areas, such as the navigation so the user does not need to traverse this content on every page.
+Although not technically required to make accessible navigation, making sure your site has a 'skip link' (usually visually hidden until tabbed to) that can bypass the main site navigation is a handy usability feature. It allows someone to jump directly to a page's &lt;main&gt; landmark, skipping common and repeated site areas, such as the navigation so the person does not need to traverse this content on every page.
 
 ## Alternatives
 
-Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex to implement and require some user thought to navigate. In certain cases, we might want to consider an alternative.
+Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex to implement and require some thought to navigate. In certain cases, we might want to consider an alternative.
 
 ### In-page navigation/table of contents
 
-One option could be to keep the top-level navigation as links only, then on the page that the parent link takes the user to, have an in-page navigation/table of contents. This could help a user get to a page they would like to see the content for, and then navigate accordingly from there. Rather than lots of links being nested with complexity in dropdowns, show them all up-front on a suitable page.
+One option could be to keep the top-level navigation as links only. Then, on the page the parent link takes the person to, have an in-page navigation/table of contents. This could help someone get to a page they would like to see the content for, and then navigate accordingly from there. Rather than lots of links being nested with complexity in dropdowns, show them all up-front on a suitable page.
 
-If the page was short, these could anchor a user down to the relevant content, or if a content-heavy site, each link would be a page.
+If the page was short, these could anchor a person down to the relevant content, or if a content-heavy site, each link would be a page.

From 4be50410d0008a19262f5343f38a118ef926de4e Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Sun, 7 Aug 2022 18:35:20 +0100
Subject: [PATCH 05/13] fix: changes from Hemingway first run

---
 ...o-make-an-accessible-nav-with-dropdowns.md | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 114664bb2..0fd888e6a 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -1,6 +1,6 @@
 ---
 title: Make an accessible &lt;nav&gt; with dropdowns
-description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. Therefore making it is accessible is key.
+description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. So making it accessible is key.
 category: How-to
 author: James Bateson
 date: 2022-08-01
@@ -19,11 +19,11 @@ tags:
   - howto
 ---
 
-Navigation is a critical part of any application and can often involve multiple levels of nesting. It allows people to complete journeys and find the information they need. Therefore making sure it is accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
+Navigation is a critical part of any application and can often involve many levels of nesting. It allows people to complete journeys and find the information they need. So making it accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
 
 ## The &lt;nav&gt; section element
 
-Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and therefore comes with accessibility benefits just by using it to mark-up sections of navigation.
+Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and comes with accessibility benefits by using it to mark-up sections of navigation.
 
 <blockquote>
 	<p>The &lt;nav&gt; HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</p>
@@ -47,12 +47,12 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 ### Semantics
 
-The &lt;nav&gt; element will automatically communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
+The &lt;nav&gt; element will communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
 
 ### Best practices summary
 
 - Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for people using screen readers.
-- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This could be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
+- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This can be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
 
 ```html
 <nav aria-labelledby="main-nav-label">
@@ -72,12 +72,12 @@ The &lt;nav&gt; element will automatically communicate a role of navigation-equa
 
 ## Adding dropdowns
 
-Navigation designs often require multiple levels of links underneath a top-level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be multiple levels deep. Some accessibility considerations must be made before implementation.
+Navigation designs often need many levels of links underneath a top-level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be many levels deep. Some accessibility considerations must be made before implementation.
 
 - How would the navigation show if there were no styles?
 - How should the parent link toggle the dropdown?
 - How can focus order be handled correctly?
-- Does the parent link still need to retain its link functionality?
+- Does the parent link still need to keep its link functionality?
 - Make sure that dropdowns are hidden from assistive technology until needed.
 
 Dropdown sub-navigation is typically marked up as a nested list inside of the parent link list item.
@@ -101,15 +101,15 @@ Dropdown sub-navigation is typically marked up as a nested list inside of the pa
 
 ### Tip 1: No styles
 
-Structuring the markup as shown in the example means without any CSS loaded, the links would show as a default nested list and items underneath the parent link, clear both visually and semantically.
+Structuring the markup as shown in the previous example means without any CSS loaded, the links would show as a default nested list and items underneath the parent link, clear both visually and semantically.
 
 ### Tip 2: Parent link toggle
 
 Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This comes with two problems. Using a click means extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
 
-By adding a toggle element, for example an arrow icon button, within the parent link allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has a sufficient tap/click (this pattern could be used for mobile as well) area and focus/hover states.
+By adding a toggle element, for example an arrow icon button, within the parent link allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has enough of a tap/click (this pattern could be used for mobile as well) area and accessible focus/hover states.
 
-**Note:** If your parent elements don't need to be a link themselves, make sure to use a `<button>` element, so that they can correctly communicate they are expandable and have an event associated.
+**Note:** If your parent elements don't need to be a link themselves, make sure to use a `<button>` element, so that they can communicate they are expandable and have an event associated and benefit from all the accessible goodness buttons get for free.
 
 ```html
 <nav aria-label="Main menu">
@@ -136,25 +136,25 @@ By adding a toggle element, for example an arrow icon button, within the parent
 
 ### Tip 3: Focus order
 
-By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. Therefore adding a trigger inside the parent link is a great way to ensure a person's intention is to see the dropdown for that link and therefore take focus to the first link in said dropdown.
+By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. So adding a trigger inside the parent link is a great way to ensure a person's intention is to see the dropdown for that link and so take focus to the first link in said dropdown.
 
 Related to focus, another nice feature would be to make sure that if the person pressed the <kbd>ESC</kbd> key, the dropdown would close, and the person's focus return to the toggle element they used to open it.
 
 ### Tip 4: Parent link functionality
 
-A parent link for a dropdown generally will still need to retain its functionality as a link. This can present problems if, for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
+A parent link for a dropdown generally will still need to keep its functionality as a link. This can present problems if, for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
 
 ### Tip 5: Showing/hiding the dropdown
 
-When the navigation dropdown is closed, it's important to ensure the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion as to where their focus is on the page.
+When the navigation dropdown is closed, it's important to ensure the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion on where their focus is on the page.
 
 To hide elements such as sub-menus from assistive technology, you should not rely on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until people choose to access that sub-navigation, consider toggling the `display: none;` or `visibility: hidden;` properties.
 
 ## What about ARIA?
 
-When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. However, a &lt;nav&gt; with dropdowns does not require any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). However, these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a person.
+When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. But a &lt;nav&gt; with dropdowns does not need any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). But these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a person.
 
-Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a slightly better experience for people.
+Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a better experience for people.
 
 ### Expanded states (aria-expanded)
 
@@ -185,7 +185,7 @@ The `aria-expanded` attribute can be used to communicate whether a toggle contro
 
 ### Current link (aria-current)
 
-A common navigation design will see the currently active page link visually different in some way, indicating to the person which page they are on. However, this isn't helpful for people who may not be able to see this distinction. The `aria-current` attribute can be used to inform assistive technology that a link is the current page. `aria-current` accepts a set list of values, the most suitable for the main navigation item would be `aria-current='page'`.
+A common navigation design will see the currently active page link visually different in some way, indicating to the person which page they are on. But this isn't helpful for people who may not be able to see this distinction. The `aria-current` attribute can be used to inform assistive technology that a link is the current page. `aria-current` accepts a set list of values, the most suitable for the main navigation item would be `aria-current='page'`.
 
 ## Skip links
 
@@ -193,10 +193,10 @@ Although not technically required to make accessible navigation, making sure you
 
 ## Alternatives
 
-Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex to implement and require some thought to navigate. In certain cases, we might want to consider an alternative.
+Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex and need some thought to navigate. In certain cases, we might want to consider an alternative.
 
 ### In-page navigation/table of contents
 
-One option could be to keep the top-level navigation as links only. Then, on the page the parent link takes the person to, have an in-page navigation/table of contents. This could help someone get to a page they would like to see the content for, and then navigate accordingly from there. Rather than lots of links being nested with complexity in dropdowns, show them all up-front on a suitable page.
+One option could be to keep the top-level navigation as links only. Then, on the page the parent link takes the person to, have an in-page navigation/table of contents. This could help someone get to a page they would like to see the content for, and then navigate from there. Rather than lots of links being nested with complexity in dropdowns, show them all up-front on a suitable page.
 
 If the page was short, these could anchor a person down to the relevant content, or if a content-heavy site, each link would be a page.

From 6e27a4279874f4f5a930c71fada05acbcc97e751 Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Sun, 4 Sep 2022 17:00:28 +0100
Subject: [PATCH 06/13] chore: final proof edits

---
 ...o-make-an-accessible-nav-with-dropdowns.md | 45 ++++++++++++++++---
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 0fd888e6a..e4aece1a5 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -3,7 +3,7 @@ title: Make an accessible &lt;nav&gt; with dropdowns
 description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. So making it accessible is key.
 category: How-to
 author: James Bateson
-date: 2022-08-01
+date: 2022-09-04
 further_reading:
   - title: "Menus & Menu Buttons"
     url: https://inclusive-components.design/menus-menu-buttons/
@@ -14,14 +14,26 @@ further_reading:
   - title: "Navigation role support"
     url: https://a11ysupport.io/tech/aria/navigation_role
     source: Accessibility Support
-thanks: ""
+  - title: "Top 5 rules of ARIA"
+    url: https://www.deque.com/blog/top-5-rules-of-aria/
+    source: Deque
+  - title: "Are your anchor links accessible?"
+    url: https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
+    source: Amber Wilson
+  - title: "Local Navigation Is a Valuable Orientation and Wayfinding Aid"
+    url: https://www.nngroup.com/articles/local-navigation/
+    source: Nielsen Norman Group
+  - title: "Cognitive accessibility"
+    url: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility
+    source: MDN Web Docs
+thanks: "Anya Mueller, Alex Hall"
 tags:
   - howto
 ---
 
 Navigation is a critical part of any application and can often involve many levels of nesting. It allows people to complete journeys and find the information they need. So making it accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
 
-## The &lt;nav&gt; section element
+## The nav section element
 
 Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and comes with accessibility benefits by using it to mark-up sections of navigation.
 
@@ -49,10 +61,11 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 The &lt;nav&gt; element will communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
 
-### Best practices summary
+### Best practices summarized
 
 - Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for people using screen readers.
-- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This can be done with a heading or `aria-label`/`aria-labelledby`. <strong>Note:</strong> Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
+- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This can be done with a heading or `aria-label`/`aria-labelledby`. **Note**: Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
+- For site navigation consider using a list (`<ul>/<ol>`) inside of the &lt;nav&gt;. So that assitive technology can announce how many links it contains.
 
 ```html
 <nav aria-labelledby="main-nav-label">
@@ -152,6 +165,13 @@ To hide elements such as sub-menus from assistive technology, you should not rel
 
 ## What about ARIA?
 
+<blockquote>
+	<p>Before you use ARIA,  use native HTML elements or attributes first. In the case that the semantics you are looking for is not available in HTML, then use ARIA.</p>
+	<footer>
+		<cite><a href="https://www.deque.com/blog/top-5-rules-of-aria/">Deque: Top 5 rules of ARIA</a></cite>
+	</footer>
+</blockquote>
+
 When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. But a &lt;nav&gt; with dropdowns does not need any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). But these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a person.
 
 Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a better experience for people.
@@ -197,6 +217,17 @@ Multi-level navigation with dropdowns often referred to as 'mega menus' can ofte
 
 ### In-page navigation/table of contents
 
-One option could be to keep the top-level navigation as links only. Then, on the page the parent link takes the person to, have an in-page navigation/table of contents. This could help someone get to a page they would like to see the content for, and then navigate from there. Rather than lots of links being nested with complexity in dropdowns, show them all up-front on a suitable page.
+One option could be to keep the top-level navigation as links only. Then, on their child pages, have an in-page navigation/table of contents. If the content length was suitable and the page didn't need to be broken out into further pages, these links would then anchor down the page to the relevant sections.
+
+**Note**: There are [accessibility considerations to be aware of](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/) when using this pattern.
+
+### Local navigation
+
+Local navigation can help people understand where they are, and what content might be related to the page they are on. This could look similar to the page of contents previously mentioned, but instead of the links anchoring, each would go to a seperate page. Or it could sit below the main navigation, for example, but being individual to a page.
+
+<blockquote>
+	<p>Visible local navigation is usually beneficial when users engage in exploratory browsing, rather than known-item search. In such situations, users may visit several pages within a category — either because they do not know exactly what category they need, even though they have a sense of its neighborhood, or because they need to combine or compare information from multiple categories</p>
+	<cite><a href="https://www.nngroup.com/articles/local-navigation/">Nielsen Norman Group: Local Navigation Is a Valuable Orientation and Wayfinding Aid</a></cite>
+</blockquote>
 
-If the page was short, these could anchor a person down to the relevant content, or if a content-heavy site, each link would be a page.
+**Note**: Be wary of changing how navigation appears and functions across multiple pages, predictability can be an important part of [cognitive accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility).

From 2c7f44ccaebfb89975ad053ea31fc017642000b3 Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Sun, 4 Sep 2022 17:19:55 +0100
Subject: [PATCH 07/13] fix: caught a couple of last min SPAG bits

---
 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index e4aece1a5..e879a4e53 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -65,7 +65,7 @@ The &lt;nav&gt; element will communicate a role of navigation-equal to setting `
 
 - Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for people using screen readers.
 - Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This can be done with a heading or `aria-label`/`aria-labelledby`. **Note**: Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
-- For site navigation consider using a list (`<ul>/<ol>`) inside of the &lt;nav&gt;. So that assitive technology can announce how many links it contains.
+- For site navigation consider using a list (`<ul>/<ol>`) inside of the &lt;nav&gt;. So that assistive technology can announce how many links it contains.
 
 ```html
 <nav aria-labelledby="main-nav-label">
@@ -120,7 +120,7 @@ Structuring the markup as shown in the previous example means without any CSS lo
 
 Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This comes with two problems. Using a click means extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
 
-By adding a toggle element, for example an arrow icon button, within the parent link allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has enough of a tap/click (this pattern could be used for mobile as well) area and accessible focus/hover states.
+Adding a toggle element, for example, an arrow icon button, within the parent link allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has enough of a tap/click (this pattern could be used for mobile as well) area and accessible focus/hover states.
 
 **Note:** If your parent elements don't need to be a link themselves, make sure to use a `<button>` element, so that they can communicate they are expandable and have an event associated and benefit from all the accessible goodness buttons get for free.
 
@@ -149,7 +149,7 @@ By adding a toggle element, for example an arrow icon button, within the parent
 
 ### Tip 3: Focus order
 
-By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. So adding a trigger inside the parent link is a great way to ensure a person's intention is to see the dropdown for that link and so take focus to the first link in said dropdown.
+By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. So adding a trigger inside the parent link is a great way to ensure a person intends to see the dropdown for that link and so take focus to the first link in said dropdown.
 
 Related to focus, another nice feature would be to make sure that if the person pressed the <kbd>ESC</kbd> key, the dropdown would close, and the person's focus return to the toggle element they used to open it.
 
@@ -223,7 +223,7 @@ One option could be to keep the top-level navigation as links only. Then, on the
 
 ### Local navigation
 
-Local navigation can help people understand where they are, and what content might be related to the page they are on. This could look similar to the page of contents previously mentioned, but instead of the links anchoring, each would go to a seperate page. Or it could sit below the main navigation, for example, but being individual to a page.
+Local navigation can help people understand where they are, and what content might be related to the page they are on. This could look similar to the page of contents previously mentioned, but instead of the links anchoring, each would go to a separate page. Or it could sit below the main navigation, for example, but being individual to a page.
 
 <blockquote>
 	<p>Visible local navigation is usually beneficial when users engage in exploratory browsing, rather than known-item search. In such situations, users may visit several pages within a category — either because they do not know exactly what category they need, even though they have a sense of its neighborhood, or because they need to combine or compare information from multiple categories</p>

From ee903f83577dcd2b53506628dcda4e021ff6a2d6 Mon Sep 17 00:00:00 2001
From: James Bateson <jim.bateson@outlook.com>
Date: Sat, 24 Sep 2022 11:46:14 +0100
Subject: [PATCH 08/13] chore: added short explanation and further links to
 define assitive technology term.

---
 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index e879a4e53..58cc1711c 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -3,7 +3,7 @@ title: Make an accessible &lt;nav&gt; with dropdowns
 description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. So making it accessible is key.
 category: How-to
 author: James Bateson
-date: 2022-09-04
+date: 2022-09-24
 further_reading:
   - title: "Menus & Menu Buttons"
     url: https://inclusive-components.design/menus-menu-buttons/
@@ -26,6 +26,9 @@ further_reading:
   - title: "Cognitive accessibility"
     url: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility
     source: MDN Web Docs
+  - title: "Fable assisitve technology glossary"
+    url: https://makeitfable.com/glossary/
+    source: Fable
 thanks: "Anya Mueller, Alex Hall"
 tags:
   - howto
@@ -61,6 +64,8 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 The &lt;nav&gt; element will communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
 
+**Note**: Assistive technologies are systems and services that can provide people with independance and help remove exlusions and the inability participate in society. For some examples [Fable has a glossay](https://makeitfable.com/glossary/) of terms and services and there is a [section of this site dedicated to articles related to assitive technology](https://www.a11yproject.com/posts/#assistive-technology).
+
 ### Best practices summarized
 
 - Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for people using screen readers.

From 5ccade99d11377ec4ffad335701eb74a1d41f2d6 Mon Sep 17 00:00:00 2001
From: James Bateson <james.bateson@codecomputerlove.com>
Date: Sat, 22 Oct 2022 11:02:32 +0100
Subject: [PATCH 09/13] fix: first round of changes.

---
 ...o-make-an-accessible-nav-with-dropdowns.md | 97 +++++++++----------
 1 file changed, 48 insertions(+), 49 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 58cc1711c..b053f9fc3 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -1,5 +1,5 @@
 ---
-title: Make an accessible &lt;nav&gt; with dropdowns
+title: Make an accessible <code>&lt;nav&gt;</code> with dropdowns
 description: Navigation is a critical part of any application, it allows people to complete journeys and find the information they need. So making it accessible is key.
 category: How-to
 author: James Bateson
@@ -11,37 +11,19 @@ further_reading:
   - title: "Don't use ARIA menu roles for site nav"
     url: https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html
     source: Adrian Roselli
-  - title: "Navigation role support"
-    url: https://a11ysupport.io/tech/aria/navigation_role
-    source: Accessibility Support
-  - title: "Top 5 rules of ARIA"
-    url: https://www.deque.com/blog/top-5-rules-of-aria/
-    source: Deque
-  - title: "Are your anchor links accessible?"
-    url: https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
-    source: Amber Wilson
-  - title: "Local Navigation Is a Valuable Orientation and Wayfinding Aid"
-    url: https://www.nngroup.com/articles/local-navigation/
-    source: Nielsen Norman Group
-  - title: "Cognitive accessibility"
-    url: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility
-    source: MDN Web Docs
-  - title: "Fable assisitve technology glossary"
-    url: https://makeitfable.com/glossary/
-    source: Fable
 thanks: "Anya Mueller, Alex Hall"
 tags:
   - howto
 ---
 
-Navigation is a critical part of any application and can often involve many levels of nesting. It allows people to complete journeys and find the information they need. So making it accessible is key. HTML5 includes the &lt;nav&gt; section element to help with this.
+Navigation is a critical part of any application and can often involve many levels of nesting. It allows people to complete journeys and find the information they need. So making it accessible is key. HTML includes the <code>&lt;nav&gt;</code> landmark element to help with this.
 
-## The nav section element
+## The <code>&lt;nav&gt;</code> landmark element
 
-Let's start with a quick overview of &lt;nav&gt;. The &lt;nav&gt; section element has semantic meaning and comes with accessibility benefits by using it to mark-up sections of navigation.
+Let's start with a quick overview of <code>&lt;nav&gt;</code>. The <code>&lt;nav&gt;</code> landmark element has semantic meaning and comes with accessibility benefits by using it to mark-up sections of navigation.
 
 <blockquote>
-	<p>The &lt;nav&gt; HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</p>
+	<p>The <code>&lt;nav&gt;</code> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</p>
 	<footer>
 		<cite><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav">MDN web docs: &lt;nav&gt;: The Navigation Section element</a></cite>
 	</footer>
@@ -62,26 +44,30 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 ### Semantics
 
-The &lt;nav&gt; element will communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
+The <code>&lt;nav&gt;</code> element will communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
 
-**Note**: Assistive technologies are systems and services that can provide people with independance and help remove exlusions and the inability participate in society. For some examples [Fable has a glossay](https://makeitfable.com/glossary/) of terms and services and there is a [section of this site dedicated to articles related to assitive technology](https://www.a11yproject.com/posts/#assistive-technology).
+### Best practice
 
-### Best practices summarized
+- Not all blocks containing links need to use <code>&lt;nav&gt;</code>. Use it for larger sections of navigation links. Overuse can create "noise" for people using screen readers.
+- Uniquely label the <code>&lt;nav&gt;</code> to give a better idea of its purpose. This can be done with a heading or `aria-label` or `aria-labelledby`. **Note**: Screen readers will already announce the element as being navigation, so avoid using the word "nav" or "navigation" in the accessible name.
+- For site navigation with more than two links, consider using a list (`<ul>` or `<ol>`) inside of the <code>&lt;nav&gt;</code>. This will allow people who use assistive technology to know how many links the list contains.
 
-- Not all blocks containing links need to use &lt;nav&gt;. Use it for larger sections of navigation links. Overuse can create 'noise' for people using screen readers.
-- Uniquely label the &lt;nav&gt; to give a better idea of its purpose. This can be done with a heading or `aria-label`/`aria-labelledby`. **Note**: Screen readers will already announce the element as being navigation, so avoid using the word 'nav' or 'navigation' in the accessible name.
-- For site navigation consider using a list (`<ul>/<ol>`) inside of the &lt;nav&gt;. So that assistive technology can announce how many links it contains.
+#### Using a heading & aria-labelledby
 
 ```html
 <nav aria-labelledby="main-nav-label">
-	<h2 id="main-nav-label" class="visually-hidden">Main menu</h2>
+	<h2 id="main-nav-label" class="visually-hidden">Main</h2>
 
 	<ul>
 		...
 	</ul>
 </nav>
+```
+
+#### Using an aria-label
 
-<nav aria-label="Main menu">
+```html
+<nav aria-label="Main">
 	<ul>
 		...
 	</ul>
@@ -90,7 +76,7 @@ The &lt;nav&gt; element will communicate a role of navigation-equal to setting `
 
 ## Adding dropdowns
 
-Navigation designs often need many levels of links underneath a top-level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent, this can be many levels deep. Some accessibility considerations must be made before implementation.
+Navigation often needs one or more levels of links underneath a top-level link. This results in using the dropdown pattern, whereby a hidden set of links are shown by interacting with the parent. This approach can nest links many levels deep.
 
 - How would the navigation show if there were no styles?
 - How should the parent link toggle the dropdown?
@@ -101,7 +87,7 @@ Navigation designs often need many levels of links underneath a top-level link.
 Dropdown sub-navigation is typically marked up as a nested list inside of the parent link list item.
 
 ```html
-<nav aria-label="Main menu">
+<nav aria-label="Main">
 	<ul>
 		<li><a href="#">Home</a></li>
 		<li>
@@ -123,21 +109,27 @@ Structuring the markup as shown in the previous example means without any CSS lo
 
 ### Tip 2: Parent link toggle
 
-Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This comes with two problems. Using a click means extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
+Navigation patterns will often attach a click/focus event to the entire parent link to reveal the dropdown of nested items. This comes with two problems:
+
+1. Using a click means extra functionality is needed to handle the primary purpose of the parent link, which should itself act as a link.
+2. By using focus, people traversing the navigation using a keyboard would be required to tab through all dropdowns regardless of whether they wanted to or not.
 
 Adding a toggle element, for example, an arrow icon button, within the parent link allows people to only show the dropdown if they are interested in seeing further links associated with the parent. Make sure that the toggle element has enough of a tap/click (this pattern could be used for mobile as well) area and accessible focus/hover states.
 
-**Note:** If your parent elements don't need to be a link themselves, make sure to use a `<button>` element, so that they can communicate they are expandable and have an event associated and benefit from all the accessible goodness buttons get for free.
+**Note:** If your parent elements don't need to be a link themselves, make sure to use `<button type="button">` element, so that they can communicate they are expandable and have an event associated and benefit from all the accessible goodness buttons get for free.
 
 ```html
-<nav aria-label="Main menu">
+<nav aria-label="Main">
 	<ul>
 		<li><a href="#">Home</a></li>
 		<li>
 			<a href="#">
 				About Us
-				<button>
-					<svg aria-hidden="true">...</svg>
+				<button type="button">
+					<!-- Visual cue icon - for example a downward facing chevron -->
+					<svg aria-hidden="true" focusable="false">
+						<!-- Icon SVG code -->
+					</svg>
 					<span class="visually-hidden">Toggle About Us submenu</span>
 				</button>
 			</a>
@@ -154,20 +146,22 @@ Adding a toggle element, for example, an arrow icon button, within the parent li
 
 ### Tip 3: Focus order
 
-By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle. So adding a trigger inside the parent link is a great way to ensure a person intends to see the dropdown for that link and so take focus to the first link in said dropdown.
+By nesting the dropdown list as a direct child of the parent list item, it means that when visible, the first link will be the next focusable element after the parent item toggle.
+
+So adding a trigger inside the parent link is a great way to ensure a person intends to see the dropdown for that link and so take focus to the first link in said dropdown.
 
-Related to focus, another nice feature would be to make sure that if the person pressed the <kbd>ESC</kbd> key, the dropdown would close, and the person's focus return to the toggle element they used to open it.
+Related to focus, another nice feature would be to make sure that if the person pressed the <kbd>ESC</kbd> key, the dropdown would close, and the person's focus returns to the toggle element they used to open it.
 
 ### Tip 4: Parent link functionality
 
-A parent link for a dropdown generally will still need to keep its functionality as a link. This can present problems if, for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns is a much nicer option.
+A parent link for a dropdown generally will still need to keep its functionality as a link. This can present problems, for example, a click event has been attached to it to reveal a dropdown. Giving people an explicit way to toggle the visibility of dropdowns via a separate control is a more accessible option.
 
 ### Tip 5: Showing/hiding the dropdown
 
-When the navigation dropdown is closed, it's important to ensure the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion on where their focus is on the page.
-
 To hide elements such as sub-menus from assistive technology, you should not rely on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until people choose to access that sub-navigation, consider toggling the `display: none;` or `visibility: hidden;` properties.
 
+When the navigation dropdown is closed, it's important to ensure the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion on where their focus is on the page.
+
 ## What about ARIA?
 
 <blockquote>
@@ -177,23 +171,26 @@ To hide elements such as sub-menus from assistive technology, you should not rel
 	</footer>
 </blockquote>
 
-When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. But a &lt;nav&gt; with dropdowns does not need any. There are [menu-related ARIA patterns available](https://www.w3.org/TR/wai-aria-practices/#menu). But these are slightly different in context from the site navigation pattern in this article. Menu ARIA is more designed to deal with native operating system-like menus, for example, a selection of options for a person.
+When thinking about making some component interactions accessible, it's often assumed that more complex ARIA attributes and patterns may be needed. But a <code>&lt;nav&gt;</code> with dropdowns <strong>does not</strong> need any.
 
-Although &lt;nav&gt; can be used without ARIA to create accessible navigation, there are things we can do with it to provide a better experience for people.
+Although <code>&lt;nav&gt;</code> can be used without ARIA to create accessible navigation, there are things we can do with it to provide a better experience for people:
 
 ### Expanded states (aria-expanded)
 
 The `aria-expanded` attribute can be used to communicate whether a toggle control is expanded or collapsed. In our navigation example, this could be useful to inform people using screen readers if the dropdown is open or not, based on whether the toggle is expanded or collapsed. This value of the attribute would need to be changed via JavaScript when the person opened and closed the dropdown.
 
 ```html
-<nav aria-label="Main menu">
+<nav aria-label="Main">
 	<ul>
 		<li><a href="#">Home</a></li>
 		<li>
 			<a href="#">
 				About Us
 				<button aria-expanded="false">
-					<svg aria-hidden="true">...</svg>
+					<!-- Visual cue icon - for example a downward facing chevron -->
+					<svg aria-hidden="true" focusable="false">
+						<!-- Icon SVG code -->
+					</svg>
 					<span class="visually-hidden">Toggle About Us submenu</span>
 				</button>
 			</a>
@@ -214,11 +211,11 @@ A common navigation design will see the currently active page link visually diff
 
 ## Skip links
 
-Although not technically required to make accessible navigation, making sure your site has a 'skip link' (usually visually hidden until tabbed to) that can bypass the main site navigation is a handy usability feature. It allows someone to jump directly to a page's &lt;main&gt; landmark, skipping common and repeated site areas, such as the navigation so the person does not need to traverse this content on every page.
+Although not technically required to make accessible navigation, making sure your site has a [skip link](https://www.a11yproject.com/posts/skip-nav-links/) that can be set to bypass the main site navigation is a handy usability feature. It allows someone to skip repeated site areas, such as the main navigation, so someone using assistive technology does not need to traverse this repetitive content on every page.
 
 ## Alternatives
 
-Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex and need some thought to navigate. In certain cases, we might want to consider an alternative.
+Multi-level navigation with dropdowns often referred to as 'mega menus' can often be complex and need some thought to navigate. In certain cases, we might want to consider an alternative:
 
 ### In-page navigation/table of contents
 
@@ -236,3 +233,5 @@ Local navigation can help people understand where they are, and what content mig
 </blockquote>
 
 **Note**: Be wary of changing how navigation appears and functions across multiple pages, predictability can be an important part of [cognitive accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility).
+
+## Summary

From aced8ffbc833de2a3212569dc9e725308d9d84c4 Mon Sep 17 00:00:00 2001
From: James Bateson <james.bateson@codecomputerlove.com>
Date: Sun, 22 Jan 2023 15:00:35 +0000
Subject: [PATCH 10/13] fix: added aria(-current) styling hook explanation

---
 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index b053f9fc3..770cf0a02 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -209,6 +209,8 @@ The `aria-expanded` attribute can be used to communicate whether a toggle contro
 
 A common navigation design will see the currently active page link visually different in some way, indicating to the person which page they are on. But this isn't helpful for people who may not be able to see this distinction. The `aria-current` attribute can be used to inform assistive technology that a link is the current page. `aria-current` accepts a set list of values, the most suitable for the main navigation item would be `aria-current='page'`.
 
+Using ARIA attributes as styling hooks can also be a helpful strategy in ensuring that we don't omit helpful or necessary accessibility semantics. [Ben Myers wrote this excellent post](https://benmyers.dev/blog/semantic-selectors/) (including an example for the `aria-current` scenario mentioned in the previous paragraph). The idea is, as well as not having two separate attributes to handle (a toggled class and an attribute), you're also considering accessibility upfront and ensuring that's part of the visual experience as well as benefits for assistive technology.
+
 ## Skip links
 
 Although not technically required to make accessible navigation, making sure your site has a [skip link](https://www.a11yproject.com/posts/skip-nav-links/) that can be set to bypass the main site navigation is a handy usability feature. It allows someone to skip repeated site areas, such as the main navigation, so someone using assistive technology does not need to traverse this repetitive content on every page.
@@ -234,4 +236,4 @@ Local navigation can help people understand where they are, and what content mig
 
 **Note**: Be wary of changing how navigation appears and functions across multiple pages, predictability can be an important part of [cognitive accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility).
 
-## Summary
+## In summary

From 3b94ee3538da9f883111184380581a4eec90cca2 Mon Sep 17 00:00:00 2001
From: James Bateson <james.bateson@codecomputerlove.com>
Date: Sun, 22 Jan 2023 15:02:06 +0000
Subject: [PATCH 11/13] fix: switched order of showing/hiding the dropdown tip

---
 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 770cf0a02..87e12a386 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -158,10 +158,10 @@ A parent link for a dropdown generally will still need to keep its functionality
 
 ### Tip 5: Showing/hiding the dropdown
 
-To hide elements such as sub-menus from assistive technology, you should not rely on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until people choose to access that sub-navigation, consider toggling the `display: none;` or `visibility: hidden;` properties.
-
 When the navigation dropdown is closed, it's important to ensure the nested links are not visible to assistive technology. For example, people using a keyboard cannot tab to the links—this can lead to confusion on where their focus is on the page.
 
+To hide elements such as sub-menus from assistive technology, you should not rely on `opacity`. Although visually hidden, it would still allow the dropdown to be discoverable via assistive technology. To ensure that dropdowns are hidden until people choose to access that sub-navigation, consider toggling the `display: none;` or `visibility: hidden;` properties.
+
 ## What about ARIA?
 
 <blockquote>

From 404459bb8d828b9b3827c5b5b29005844c87dbaa Mon Sep 17 00:00:00 2001
From: James Bateson <james.bateson@codecomputerlove.com>
Date: Sun, 22 Jan 2023 17:18:55 +0000
Subject: [PATCH 12/13] feat: first go at adding a little summary

---
 .../how-to-make-an-accessible-nav-with-dropdowns.md    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index 87e12a386..edf441968 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -236,4 +236,12 @@ Local navigation can help people understand where they are, and what content mig
 
 **Note**: Be wary of changing how navigation appears and functions across multiple pages, predictability can be an important part of [cognitive accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility).
 
-## In summary
+## Summary
+
+Navigation provides consistent and cirtical paths for peple to navigate to important information they need to find. There's making sure it is accessible and inclusive is vital.
+
+Overly complex ARIA solutions are not needed to acheive this. The <code>&lt;nav&gt;</code> landmark element provides a natively accessible way to mark up an area of navigation. Carefully considered ARIA can then be added to enhance the expereince for assistive technology users, not defnie and control it, for example the active page and accessible name.
+
+If havigation requires dropdowns to provide mutiple nested levels of pages, again, semantic HTML can be used to nest `<ul>` or `<ol>` elements. As long as these dropdows are visually and programatically hidden from people until they choose to see navigate them. Again ARIA can be used to enhance these native semantics but announcing if the parent link/button toggle is expanded or collapsed, and in some screen reader cases, which element it controls.
+
+With designers and developers working collaborativly to remove extra complexity from navigations (even with dropdowns) semantic, accessible HTML can be used to remove the need for inaccessible navigation solutions, that could create barriers for people trying to complete important journeys.

From f2314eb504c6fd73eb8abba9ecb9c439da2b899e Mon Sep 17 00:00:00 2001
From: James Bateson <james.bateson@codecomputerlove.com>
Date: Sun, 22 Jan 2023 17:36:33 +0000
Subject: [PATCH 13/13] fix: removed support note from nav initial explanation

---
 src/posts/how-to-make-an-accessible-nav-with-dropdowns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
index edf441968..7cf4cc020 100644
--- a/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
+++ b/src/posts/how-to-make-an-accessible-nav-with-dropdowns.md
@@ -44,7 +44,7 @@ Here's the example markup that we'll build up throughout this article. It's wort
 
 ### Semantics
 
-The <code>&lt;nav&gt;</code> element will communicate a role of navigation-equal to setting `role="navigation"`, (this may still need to be added if needing to [support some assistive technology](https://a11ysupport.io/tech/aria/navigation_role)) meaning it can be easily navigated to by people with screen readers—as a landmark.
+The <code>&lt;nav&gt;</code> element will communicate a role of navigation-equal to setting `role="navigation"`, meaning it can be easily navigated to by people with screen readers—as a landmark.
 
 ### Best practice