navbar.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Implementing a Navbar with a lot of Submenus</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description"
			content="How to manage a multi-select element within a dialog popup">
		<link href="joy.css" rel="stylesheet">
	</head>
	<body>
		<a href="./index.html">List of all Examples</a>

		<h1>Implementing a Navbar with a lot of Submenus</h1>

		<p>
			These examples are focusing explicitly on a website navbar which has a
			lot of submenus.
		</p>
		<p>
			<ins datetime="2022-10-24T11:45">
				Update October 24, 2022: In a previous version of this post, we tested
				a navbar structure where the main navigation item included both a
				<em>link</em> to a topic page for a subject
				<strong>and</strong> a <em>button</em> which toggled a submenu
				containing posts belonging to the topic. I had the hypothesis that
				the topic pages would be more intuitive for users and that the submenus
				could be implemented as a progressive enhancement.
				However, in the first tests this hypothesis proved to be false. The
				submenus are more intuitive for the users and it is confusing that
				the navigation item includes both a link and a button.
				This version therefore removes the link to the topic page and
				keeps the button for toggling the submenu.
			</ins>
		</p>
		<p>
			I am using the navbar for the
			<a href="https://www.innoq.com/">INNOQ.com</a> website as a test for
			the navbar structure. Because the navbars here are only intended for test
			purposes, the link targets will always lead back to this page.
		</p>
		<p>
			A lot of my opinions here are informed by this
			<a href="https://inclusive-components.design/menus-menu-buttons/">
				Menu & Menu Buttons post from Heydon Pickering</a>.
		</p>
		<p>
			<ins datetime="2022-11-04T10:00">
				Update November 04, 2022: The accessibility of the examples have been
				optimized by adding an <code>aria-label</code> to the <code>ul</code>
				to designate it as being the main navigation for the page.
				Additionally, the bullets of the list entries within the navbar have
				been hidden with CSS because it isn't possible to select an entry in
				the list by selecting the bullet point and it adds extra information
				for assistive technologies which is not useful.
			</ins>
		</p>

		<nav aria-labelledby="toc-label">
			<span id="toc-label" aria-hidden="true">Table of Contents</span>
			<ul>
				<li><a href="#details">Encapsulating Submenus in a Details Tag</a></li>
				<li><a href="#aria-expanded">A select element with multiple attribute</a></li>
				<li><a href="#aria-haspopup">A custom listbox element with attribute aria-multiselectable</a></li>
			</ul>
		</nav>

		<section>
			<h2 id="details">Encapsulating Submenus in a Details Tag</h2>

			<p>
				In this first example, I am encapsulating the submenu in a details HTML
				element which will mean that for browsers which support the details
				element (i.e. all modern browsers), the submenus will by default be
				able to be expanded/collapsed even when no custom CSS and JavaScript
				are specified. The navigation itself is a list, and
				the submenu <code>ul</code> element has been labelled to provide
				information for assistive technologies.
			</p>
			<p>
				For a website which has a lot of submenus, I like this option as the
				HTML fallback because it will allow ALL users to expand and collapse
				the submenus even when JavaScript on the website fails. There are some
				limitations to styling this variant with CSS, so I can also envisage
				using this HTML as the basis for a JavaScript component that modifies
				the navbar as a progressive enhancement.
			</p>
			<nav aria-labelledby="nav-example-1-label">
				<span id="nav-example-1-label" aria-hidden="true">First Example Navbar</span>
				<ul aria-label="Page Navigation" role="list">
					<li>
						<details>
							<summary id="services-submenu-1">Services</summary>
							<ul aria-labelledby="services-submenu-1" role="list">
								<li><a href="#">Strategy and Technology Consulting</a></li>
								<li><a href="#">Digital Product Development</a></li>
								<li><a href="#">Software Architecture and Development</a></li>
								<li><a href="#">Digital Platforms and Infrastructures</a></li>
								<li><a href="#">Knowledge Transfer, Coaching and Trainings</a></li>
							</ul>
						</details>
					</li>
					<li>
						<a href="#">Success Stories</a>
					</li>
					<li>
						<details>
							<summary id="culture-submenu-1">Culture</summary>
							<ul aria-labelledby="culture-submenu-1" role="list">
								<li><a href="#">How we collaborate</a></li>
								<li><a href="#">What’s important to us</a></li>
								<li><a href="#">Working at INNOQ</a></li>
								<li><a href="#">INNOQ Stories</a></li>
							</ul>
						</details>
					</li>
					<li>
						<details>
							<summary id="magazine-submenu-1">Magazine</summary>
							<ul aria-labelledby="magazine-submenu-1" role="list">
								<li><a href="#">Blog &amp; Articles</a></li>
								<li><a href="#">Podcasts</a></li>
								<li><a href="#">Talks</a></li>
								<li><a href="#">Technology Lunch</a></li>
								<li><a href="#">Primers</a></li>
								<li><a href="#">Newsletter</a></li>
								<li><a href="#">Media Art</a></li>
							</ul>
						</details>
					</li>
					<li>
						<details>
							<summary id="trends-submenu-1">Trends</summary>
							<ul aria-labelledby="trends-submenu-1" role="list">
								<li><a href="#">Accessibility</a></li>
								<li><a href="#">Cloud Migration</a></li>
								<li><a href="#">Data Mesh</a></li>
								<li><a href="#">MLOps</a></li>
								<li><a href="#">Self-contained Systems</a></li>
								<li><a href="#">Service Mesh</a></li>
							</ul>
						</details>
					</li>
					<li>
						<details>
							<summary id="trainings-submenu-1">Trainings</summary>
							<ul aria-labelledby="trainings-submenu-1" role="list">
								<li><a href="#">Why Online Trainings?</a></li>
								<li><a href="#">iSAQB CPSA-F Foundation Level</a></li>
								<li><a href="#">Accessibility</a></li>
								<li><a href="#">Blockchain</a></li>
								<li><a href="#">Cloud Native Infrastructure</a></li>
								<li><a href="#">Cloud Migration</a></li>
								<li><a href="#">Domain-driven Design</a></li>
								<li><a href="#">DDD for Machine Learning</a></li>
								<li><a href="#">Flexible Architectures</a></li>
								<li><a href="#">JavaScript</a></li>
								<li><a href="#">Modernization</a></li>
								<li><a href="#">Product Ownership</a></li>
								<li><a href="#">Remote Mob Programming</a></li>
								<li><a href="#">Software Analytics</a></li>
								<li><a href="#">Web Architecture</a></li>
								<li><a href="#">Web Security</a></li>
							</ul>
						</details>
					</li>
				</ul>
			</nav>
		</section>
		<section>
			<h2 id="aria-expanded">
				Collapsing and expanding submenus with a custom Toggle Button
			</h2>

			<p>
				This is an example which uses a custom JavaScript component to expand
				and collapse the submenu for an option. This is similar in usability to
				the <a href="details">first example</a>. The main benefit is the
				difference in the HTML structure which allows more flexibility for
				styling the elements. This would also make it possible to show the menu
				on hover in addition to toggling the menu via the toggle buttons.
			</p>
			<p>
				When JavaScript is not enabled, all submenus will be rendered as a
				nested list of links without any option to collapse them.
			</p>
			<p>
				This is also implemented in a similar way to the
				<a href="https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html">
					Example Disclosure Navigation Menu from the ARIA Authoring Practices Guide (APG)
				</a>. It would also be possible to implement the optional keyboard support as described
				in that example, but the keyboard support (e.g. navigating with arrow keys) is not implemented
				here.
			</p>

			<p>
				In this version, I would like to test especially if it is clear that the button will toggle a
				submenu or if we should add extra information to assistive technologies to test this.
			</p>

			<nav aria-labelledby="nav-example-2-label">
				<span id="nav-example-2-label" aria-hidden="true">Second Example Navbar</span>
				<ul aria-label="Page Navigation" role="list">
					<li>
						<toggle-button target="services-submenu-2">
							<button hidden>Services</button>
						</toggle-button>
						<ul id="services-submenu-2" aria-label="Services submenu" role="list">
							<li><a href="#">Strategy and Technology Consulting</a></li>
							<li><a href="#">Digital Product Development</a></li>
							<li><a href="#">Software Architecture and Development</a></li>
							<li><a href="#">Digital Platforms and Infrastructures</a></li>
							<li><a href="#">Knowledge Transfer, Coaching and Trainings</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Success Stories</a>
					</li>
					<li>
						<toggle-button target="culture-submenu-2">
							<button hidden>Culture</button>
						</toggle-button>
						<ul id="culture-submenu-2" aria-labelledby="Culture submenu" role="list">
							<li><a href="#">How we collaborate</a></li>
							<li><a href="#">What’s important to us</a></li>
							<li><a href="#">Working at INNOQ</a></li>
							<li><a href="#">INNOQ Stories</a></li>
						</ul>
					</li>
					<li>
						<toggle-button target="magazine-submenu-2">
							<button hidden>Magazine</button>
						</toggle-button>
						<ul id="magazine-submenu-2" aria-labelledby="Magazine submenu" role="list">
							<li><a href="#">Blog &amp; Articles</a></li>
							<li><a href="#">Podcasts</a></li>
							<li><a href="#">Talks</a></li>
							<li><a href="#">Technology Lunch</a></li>
							<li><a href="#">Primers</a></li>
							<li><a href="#">Newsletter</a></li>
							<li><a href="#">Media Art</a></li>
						</ul>
					</li>
					<li>
						<toggle-button target="trends-submenu-2">
							<button hidden>Trends</button>
						</toggle-button>
						<ul id="trends-submenu-2" aria-labelledby="Trends submenu" role="list">
							<li><a href="#">Accessibility</a></li>
							<li><a href="#">Cloud Migration</a></li>
							<li><a href="#">Data Mesh</a></li>
							<li><a href="#">MLOps</a></li>
							<li><a href="#">Self-contained Systems</a></li>
							<li><a href="#">Service Mesh</a></li>
						</ul>
					</li>
					<li>
						<toggle-button target="trainings-submenu-2">
							<button hidden>Trainings</button>
						</toggle-button>
						<ul id="trainings-submenu-2" aria-labelledby="Trainings submenu" role="list">
							<li><a href="#">Why Online Trainings?</a></li>
							<li><a href="#">iSAQB CPSA-F Foundation Level</a></li>
							<li><a href="#">Accessibility</a></li>
							<li><a href="#">Blockchain</a></li>
							<li><a href="#">Cloud Native Infrastructure</a></li>
							<li><a href="#">Cloud Migration</a></li>
							<li><a href="#">Domain-driven Design</a></li>
							<li><a href="#">DDD for Machine Learning</a></li>
							<li><a href="#">Flexible Architectures</a></li>
							<li><a href="#">JavaScript</a></li>
							<li><a href="#">Modernization</a></li>
							<li><a href="#">Product Ownership</a></li>
							<li><a href="#">Remote Mob Programming</a></li>
							<li><a href="#">Software Analytics</a></li>
							<li><a href="#">Web Architecture</a></li>
							<li><a href="#">Web Security</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</section>
		<section>
			<h2 id="aria-haspopup">
				Using the <code>aria-haspopup</code> attribute and <code>menu</code> role
			</h2>

			<p>
				I originally intended to try to implement my own example of a submenu
				using the ARIA <code>aria-haspopup</code> role on the menu toggle and
				the <code>menu</code> role on the submenu. However, I decided not to
				because this pattern is strongly advised against in the following
				sources:
			</p>
			<ul>
				<li>
					Adrian Roselli advises against the pattern in his post
					<a href="https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html">
						Don't Use ARIA Menu Roles for Site Nav
					</a>
				</li>
				<li>
					Heydon Pickering advises against the pattern in his post
					<a href="https://inclusive-components.design/menus-menu-buttons/">
						Menus & Menu Buttons
					</a>
				</li>
				<li>
					The MDN resource page on the
					<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role">ARIA: menu role</a>
					also explicitly warns against using the <code>menu</code> role for
					site navigation:
					<blockquote>
						When including a "menu" for site navigation, do not use the menu
						role. Rather, for the main site navigation use the native HTML
						&lt;nav&gt; element or simply a list of links. The menu role should
						be reserved for composite widgets requiring focus management. See
						ARIA practices for disclosure navigation for an explanation and
						additional examples.
					</blockquote>
				</li>
			</ul>
			<p>
				The reasons why this is seen as an Antipattern is that a submenu within
				a site navigation is not semantically the same as what would be
				expected for a <code>menu</code> role, because setting the
				<code>menuitem</code> role on all the links (which is required in order
				for the menu to be accessible) causes the link to no longer be
				recognized as a link for assistive technologies.
			</p>
			<p>
				Additionally: implementing the submenu navigation as a
				<code>menu</code> also changes how the menu should be navigated via the
				keyboard: instead of navigating between the links via the TAB key, the
				user can only exclusively use the arrow keys. For some keyboard users
				this may be intuitive, but it does differ from many sites which use the
				disclosure navigation pattern and allow navigating through the site
				navigation with the TAB key.
			</p>
			<p>
				Note: there is
				<a href="https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links">
					an example provided by the ARIA Authoring Practices Guide</a>
				for providing a submenu via the <code>menu</code> role. Also note that
				this is the example that is explicitly mentioned as misleading by
				Adrian Roselli in
				<a href="https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html">
					his post</a>.
			</p>
		</section>
		<style>

		</style>
		<script>
			class ToggleButton extends HTMLElement {
				connectedCallback () {
					this.button.removeAttribute("hidden");
					if (this.button.getAttribute("aria-expanded") !== "true") {
						this.button.setAttribute("aria-expanded", "false");
						this.target.hidden = true;
					}
					this.button.addEventListener("click", this.toggle.bind(this));
				}

				toggle () {
					if (this.target.hidden === true) {
						this.target.hidden = false;
						this.button.setAttribute("aria-expanded", "true");
					} else {
						this.target.hidden = true;
						this.button.setAttribute("aria-expanded", "false");
					}
				}

				get button() {
					return this.querySelector("button");
				}

				get target () {
					return document.getElementById(this.getAttribute("target"))
				}
			}
			customElements.define("toggle-button", ToggleButton);
		</script>
	</body>
</html>