Skip to content

Commit 9093316

Browse files
Continuing to flesh out the ADR
The ADR text was written with various supplementary URLs in mind, which I'm now going through and adding while I do a bit of wordsmithing. There are still some sections of the document which need to be written.
1 parent da2201d commit 9093316

File tree

1 file changed

+24
-19
lines changed

1 file changed

+24
-19
lines changed

docs/architecture-decisions/0005-implement-an-accessible-navigation-system.md

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,15 @@ The markup which the user finally interacts with looks like this:
3636
```
3737

3838
The issue is that the element triggering the flyout menu (the
39-
`<span class="sub-arrow"></span>` tag) is inside the anchor element, making it
39+
`<span class="sub-arrow"></span>` tag) is _inside_ the anchor element, making it
4040
challenging for users of assistive technologies to separate their interactions
4141
with the menu link and the submenu toggle.
4242

4343
The current release of SmartMenus (1.2.1) does not support placing this toggle
4444
element outside of the link element, so it will be necessary to replace it with
4545
a library which does support this behavior.
4646

47+
4748
### Option 1: SmartMenus 2
4849

4950
The maintainer for SmartMenus is aware of this problem in the library, as we and
@@ -59,23 +60,24 @@ system yet](https://github.com/vadikom/smartmenus/issues/245).
5960
* Pros: Just upgrading our existing menu library as it improves over time is a
6061
good philosophy to follow.
6162

62-
* Cons: The timeline for the release of SmartMenus 2 is not clear, and so
63-
cannot be guaranteed to happen. Additionally, the significant changes to the
64-
library with version 2 will likely require a significant level of effort - so
65-
the benefits of a simple upgrade are not likely to accrue based on the
66-
materials published so far.
63+
* Cons: The timeline for the release of SmartMenus 2 is not clear, and cannot
64+
be guaranteed to happen. Additionally, the significant changes to the library
65+
with version 2 will likely require a significant level of effort - so the
66+
benefits of a simple upgrade may not accrue based on the materials published
67+
so far.
68+
6769

6870
### Option 2: Accessible Menu
6971

70-
One alternative to SmartMenus is the Accessible Menu library, which takes as its
71-
starting point the ARIA Authoring Practices Guide for navigation menus. One of
72-
the supported patterns is the Disclosure Navigation Menu with Top-Level Links,
72+
One alternative to SmartMenus is the [Accessible Menu](https://accessible-menu.dev/) library, which takes as its
73+
starting point the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) for navigation menus. One of
74+
the supported patterns is the [Disclosure Navigation Menu with Top-Level Links](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/),
7375
which includes the needed separation between navigation links and submenu
7476
toggles.
7577

7678
While the provided example includes this separation only at the top level of the
77-
menu, the pattern can be extended to all levels - as demonstrated in this
78-
CodePen.
79+
menu, the pattern can be extended to all levels - [as demonstrated in this
80+
CodePen](https://codepen.io/matt-bernhardt/pen/poBRKrY).
7981

8082
#### Benefits of Accessible Menu
8183

@@ -88,32 +90,35 @@ There are several significant drawbacks to using this menu library.
8890

8991
* The most significant drawback is that it imposes some operating costs on users
9092
of assistive technology that are not ideal. Our recent accessibility testing
91-
included some details about this problem while we discussed this menu issue.
93+
[included some details about this problem](https://github.mit.edu/Accessibility-FY2024/omeka/issues/4#issuecomment-182190) while we discussed this menu issue.
9294

9395
* The markup requirements for this library do not immediately align with the
94-
markup generated by Omeka. This is manageable by either maintaining a set of
95-
custom navigation templates or by writing some javascript to manipulate the
96-
DOM prior to instantiating the menu.
96+
markup generated by Omeka. While this is manageable by either maintaining a
97+
set of custom navigation templates (which other themes also do) or by writing
98+
some javascript to manipulate the DOM prior to instantiating the menu, it does
99+
mean that using this library increases the maintenance burden of the theme.
97100

98101
* The library is javascript-only, and is not distributed with any CSS rules.
99102
While we can develop and maintain these rules ourselves, it makes this library
100103
less of a turnkey solution.
101104

105+
102106
### Option 3: CSS-only menu libraries
103107

104108
A third option would be to pursue a "pure CSS" navigation menu, which can be
105-
found described in several articles around the web.
109+
found described in [several](https://purecss.io/menus/) [places](https://devsnap.me/css-menu) around the web.
106110

107111
* Pros: A navigation menu which uses only CSS styles is technically much
108112
simpler, lacking the javascript that would need to be maintained (either by
109113
ourselves or by a dependency maintainer).
110114

111-
* Cons: These types of navigation systems are likely not going to be fully
112-
accessible. There are elements of the WCAG standards which cannot be satisfied
113-
by stylesheets alone. An example is WCAG 1.4.13, which requires that revealed
115+
* Cons: [These types of navigation systems are likely not going to be fully
116+
accessible](https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/). There are elements of the WCAG standards which cannot be satisfied
117+
by stylesheets alone. An example is [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html), which requires that revealed
114118
content like a submenu must be dismissable without changing the focus on a
115119
page.
116120

121+
117122
### Option 4: A bespoke solution
118123

119124
While attempting to implement the Accessible Menu library, we asked for feedback

0 commit comments

Comments
 (0)