How to: Article how to make an accessible nav with dropdowns #1472

jimbateson · 2022-09-04T16:23:19Z

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.

PR to add the article page into the posts /how to section.

Just a couple of notes sorry:

This is my first time writing for an open-source public site. So apologies if I'm way off the mark with what I've done. I've proofed with the content guidelines in mind and have it reviewed by a couple of colleagues. But understand if it wasn't what you were looking for and that there might be quite a lot of feedback for me to take onboard.
Due to the way a couple of the different components seem to parse HTML, it's been a little difficult to the find the best way to format <nav>. If you would like me to standardize this, I'm happy to do that. It seemed a particular issue in the front matter and headings translating to the in-page anchor navigation. May have missed something obvious here though!

Sorry it's taken so long to get this into PR as well.

jimbateson · 2022-09-06T19:10:53Z

Just realized I might have totally misread and missed a step with creating an issue to properly link this to sorry. I'll have another read of the contributing guides in the morning and try an do this properly!

ericwbailey · 2022-09-06T19:17:39Z

@jimbateson Firs off, thanks for your submission! I'm really excited to review it, but have been a bit busy lately. Don't worry about filing the issue, it's on my radar 🙂

uxnotyoux

This is a great contribution - love that it’s focused on a specific item.

…echnology term.

ericwbailey

@jimbateson I'm sorry this took so long to get to. My being busy turned into a health issue, but I'm in a better place now.

I've left some comments and suggested edits here to consider. One other big-picture thing I'm thinking is we should also provide an example of the JavaScript that powers the toggling. What do you think about creating a CodePen example for the post, so readers can play with/reference it?

ericwbailey · 2022-10-01T16:08:52Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+  - 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.


Suggested change

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 <nav> 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 <code><nav></code> landmark element to help with this.

Suggesting two things here:

Wrapping code in a code element, which I will be doing for other instances.

Using "landmark" in place of "section", as section has a specific meaning within the context of landmark elements/roles.

ericwbailey · 2022-10-01T16:09:23Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+
+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 nav section element


Suggested change

## The nav section element

## The <code><nav></code> landmark element

The issue I came across with trying to wrap this one in anything that represented code, was that when it parses this to turn it into a heading in the table of contents, I think it's trying to render a <nav> (or just skipping it, as maybe unsafe?) Is there an available filter could possibly use where those are generated?

Oof, yeah. Let's ignore wrapping code in the headings for now, and I'll get to the bottom of this bug.

I probably should have opened one when I spotted it writing this sorry, but wasn't sure if it was intended. Anyway, sounds good, thank you :)

ericwbailey · 2022-10-01T16:09:53Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+
+## 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.


Suggested change

Let's start with a quick overview of <nav>. The <nav> 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><nav></code>. The <code><nav></code> landmark element has semantic meaning and comes with accessibility benefits by using it to mark-up sections of navigation.

ericwbailey · 2022-10-01T16:10:11Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+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>


Suggested change

<p>The <nav> 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><nav></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>

ericwbailey · 2022-10-01T16:14:41Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+
+### 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.


Suggested change

The <nav> 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><nav></code> element will communicate a role of navigation-equal to setting `role="navigation"` to assistive technology. This allows people using screen readers to easily identify it as navigation and navigate to it when navigating by landmarks.

Note that adding `role="navigation"` role may still be needed if you need to [support some older assistive technology](https://a11ysupport.io/tech/aria/navigation_role).

Suggesting breaking this apart to communicate:

What nav does under the hood,

How people can use it, and

Separate support concerns a bit so people don't mistakenly skim and add redundant ARIA.

ericwbailey · 2022-10-01T18:04:00Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+
+## 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.


Suggested change

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 <main> 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.

Linking to our post on skip links, so a reader can learn more about them.

Skip links don't target the main landmark automatically, so rephrasing to not suggest that.

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

ericwbailey · 2022-10-01T18:04:51Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+
+## 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.


I really appreciate that you're providing segue paragraphs after your section headings 🙂

ericwbailey · 2022-10-01T20:17:41Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

+    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


Suggested change

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

source: Adrian Roselli

We typically don't re-list links used in the post, and instead use this section for links that are topically-related that allow for further exploration.

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

jimbateson · 2022-10-03T04:10:41Z

@ericwbailey absolutely no problem at all, glad you're feeling better and hope everything is ok.

Thank you for the review and feedback, and sorry that there's so much I need to tweak! Definitely a great learning experience. I'll start making the suggested changes, and agree that an example codepen would be very useful! I'll get these done ASAP :)

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

ericwbailey · 2022-10-03T14:27:38Z

@jimbateson Awesome! I think this post is also in really good shape. <ost of my feedback is just style nitpicks, and I'm really excited to publish it 🙂

Speaking of which, could you also add yourself to authors.json in this PR in anticipation of merging?

jimbateson · 2022-11-26T10:42:59Z

Apologies for going a bit quiet on this one. Done one round of changes, the low-hanging stuff, and will make some time to do the rest of the amends in the next week or so. Thanks for your patience :)

scottaohara · 2023-01-22T16:09:42Z

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md

@@ -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.


you don't need the parenthetical here.

support for nav being exposed as a landmark is very solid.

the a11ysupport page you link to is for role=navigation and AT support for that role, so linking to it isn't even relevant here, since this page isn't for support of the element)

jimbateson · 2023-03-14T20:31:03Z

@jimbateson I'm sorry this took so long to get to. My being busy turned into a health issue, but I'm in a better place now.

I've left some comments and suggested edits here to consider. One other big-picture thing I'm thinking is we should also provide an example of the JavaScript that powers the toggling. What do you think about creating a CodePen example for the post, so readers can play with/reference it?

@ericwbailey Hey, hope you're doing ok, I'm so so sorry for the delay in getting this over the line. I've created a CodePen example of a the nav dropdowns - https://codepen.io/_jamesbateson/full/rNrJWpv (let me know if this ok! - just gonna do some final checks/tests on this in the morning).

Just wondering how you would prefer me to embed this? Was going to go for the HTML embed option with the click to run option for perf gains and then only people who wish to see/play with it would need to use it? But if you'd prefer I just had it as a link then that's cool as well! Couldn't see any other embed examples in other posts or anything in the content style guide on it, but apologies if I've missed anything there!

jimbateson · 2023-07-06T12:50:52Z

@davatron5000 Hey, hope you don't mind the mention here. Just re-opened my PR for the How To make accessibile nav with dropdowns article.

I had completed the majority of the feedback from Eric, and had created a Codepen that people could see examples and play around with.

Was just awaiting that Codepen to be checked and approved for suitability (linked in last comment) and also for any guideance on how is preferable to embed codepens on the site.

No rush at all, but just thought would mention.

Many thanks,
Jim

davatron5000 · 2023-07-18T19:32:56Z

Thanks @jamesbatesoncode. I'm verrryy far behind on some review and management tasks here. But I'll try to get on this stuff at some point soon.

jimbateson7 added 7 commits July 18, 2022 21:01

feat: first draft of the accessible nav how to article

a2e1faf

fix: first pass and fix of SPAG

42ae52d

chore: date change and nav syntax consistency

2fc387f

fix: changes from Anya proof

bf169ff

fix: changes from Hemingway first run

4be5041

chore: final proof edits

6e27a42

fix: caught a couple of last min SPAG bits

2c7f44c

uxnotyoux approved these changes Sep 18, 2022

View reviewed changes

chore: added short explanation and further links to define assitive t…

ee903f8

…echnology term.

ericwbailey requested changes Oct 2, 2022

View reviewed changes

scottaohara reviewed Oct 3, 2022

View reviewed changes

src/posts/how-to-make-an-accessible-nav-with-dropdowns.md Outdated Show resolved Hide resolved

fix: first round of changes.

5ccade9

jamesbatesoncode added 2 commits January 22, 2023 15:00

fix: added aria(-current) styling hook explanation

aced8ff

fix: switched order of showing/hiding the dropdown tip

3b94ee3

scottaohara reviewed Jan 22, 2023

View reviewed changes

jamesbatesoncode added 2 commits January 22, 2023 17:18

feat: first go at adding a little summary

404459b

fix: removed support note from nav initial explanation

f2314eb

jimbateson closed this Apr 6, 2023

jimbateson reopened this Jul 6, 2023

davatron5000 self-assigned this Jul 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to: Article how to make an accessible nav with dropdowns #1472

How to: Article how to make an accessible nav with dropdowns #1472

jimbateson commented Sep 4, 2022 •

edited

Loading

jimbateson commented Sep 6, 2022

ericwbailey commented Sep 6, 2022

uxnotyoux left a comment

ericwbailey left a comment

ericwbailey Oct 1, 2022

ericwbailey Oct 1, 2022

jimbateson Oct 5, 2022 •

edited

Loading

ericwbailey Oct 6, 2022

jimbateson Oct 6, 2022

ericwbailey Oct 1, 2022

ericwbailey Oct 1, 2022

ericwbailey Oct 1, 2022

ericwbailey Oct 1, 2022

ericwbailey Oct 1, 2022

ericwbailey Oct 1, 2022

jimbateson commented Oct 3, 2022

ericwbailey commented Oct 3, 2022

jimbateson commented Nov 26, 2022

scottaohara Jan 22, 2023

jimbateson commented Mar 14, 2023

jimbateson commented Jul 6, 2023

davatron5000 commented Jul 18, 2023


		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 <nav> section element to help with this.

		## The nav section element

	## The nav section element
	## The <code><nav></code> landmark element


		## The nav section element

		Let's start with a quick overview of <nav>. The <nav> 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 <nav>. The <nav> 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><nav></code>. The <code><nav></code> landmark element has semantic meaning and comes with accessibility benefits by using it to mark-up sections of navigation.

	<p>The <nav> 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><nav></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>


		### Semantics

		The <nav> 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 &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"` to assistive technology. This allows people using screen readers to easily identify it as navigation and navigate to it when navigating by landmarks.
+Note that adding `role="navigation"` role may still be needed if you need to [support some older assistive technology](https://a11ysupport.io/tech/aria/navigation_role).


		## 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 <main> 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 and need some thought to navigate. In certain cases, we might want to consider an alternative.

How to: Article how to make an accessible nav with dropdowns #1472

Are you sure you want to change the base?

How to: Article how to make an accessible nav with dropdowns #1472

Conversation

jimbateson commented Sep 4, 2022 • edited Loading

jimbateson commented Sep 6, 2022

ericwbailey commented Sep 6, 2022

uxnotyoux left a comment

Choose a reason for hiding this comment

ericwbailey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jimbateson Oct 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jimbateson commented Oct 3, 2022

ericwbailey commented Oct 3, 2022

jimbateson commented Nov 26, 2022

Choose a reason for hiding this comment

jimbateson commented Mar 14, 2023

jimbateson commented Jul 6, 2023

davatron5000 commented Jul 18, 2023

jimbateson commented Sep 4, 2022 •

edited

Loading

jimbateson Oct 5, 2022 •

edited

Loading