You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Copy file name to clipboardExpand all lines: docs/architecture-decisions/0005-implement-an-accessible-navigation-system.md
+24-19Lines changed: 24 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -36,14 +36,15 @@ The markup which the user finally interacts with looks like this:
36
36
```
37
37
38
38
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
40
40
challenging for users of assistive technologies to separate their interactions
41
41
with the menu link and the submenu toggle.
42
42
43
43
The current release of SmartMenus (1.2.1) does not support placing this toggle
44
44
element outside of the link element, so it will be necessary to replace it with
45
45
a library which does support this behavior.
46
46
47
+
47
48
### Option 1: SmartMenus 2
48
49
49
50
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).
59
60
* Pros: Just upgrading our existing menu library as it improves over time is a
60
61
good philosophy to follow.
61
62
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
+
67
69
68
70
### Option 2: Accessible Menu
69
71
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/),
73
75
which includes the needed separation between navigation links and submenu
74
76
toggles.
75
77
76
78
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
@@ -88,32 +90,35 @@ There are several significant drawbacks to using this menu library.
88
90
89
91
* The most significant drawback is that it imposes some operating costs on users
90
92
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.
92
94
93
95
* 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.
97
100
98
101
* The library is javascript-only, and is not distributed with any CSS rules.
99
102
While we can develop and maintain these rules ourselves, it makes this library
100
103
less of a turnkey solution.
101
104
105
+
102
106
### Option 3: CSS-only menu libraries
103
107
104
108
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.
106
110
107
111
* Pros: A navigation menu which uses only CSS styles is technically much
108
112
simpler, lacking the javascript that would need to be maintained (either by
109
113
ourselves or by a dependency maintainer).
110
114
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
114
118
content like a submenu must be dismissable without changing the focus on a
115
119
page.
116
120
121
+
117
122
### Option 4: A bespoke solution
118
123
119
124
While attempting to implement the Accessible Menu library, we asked for feedback
0 commit comments