@lgeggleston
Submitted on behalf of University of Virginia (UVA) Library’s Assessment, Communications, and User Experience (ACE) team as part of internal DSpace 9 accessibility audit.
Issue 1 of 3: Admin Navigation for Screen Readers
Describe the bug
The left-hand admin navigation bar is not fully usable with Voice Over (screen reader). The dropdowns are not functional with voice over key commands, resulting in an unusable interface for screen reader users.
Page
General Alerts and Sitewide Issues
WCAG Guideline
WCAG 2.1.1, 2.4.3, 4.1.2, 1.3.1
To Reproduce
Located in Admin Menu Bar.
Relevant code
Start of code snippet:
\<nav \_ngcontent-dspace-angular-c1031589132="" id="admin-sidebar" class="navbar navbar-dark p-0 vh-100 ng-trigger ng-trigger-slideSidebar ng-tns-c1031589132-4 collapsed ng-star-inserted" aria-label="Admin navigation bar" style="max-width: 55px;"\>\<div \_ngcontent-dspace-angular-c1031589132="" id="sidebar-header-container" aria-hidden="true" class=
Expected behavior
The admin navigation bar is not navigable or operable for screen reader users. The voice over navigation issues are occurring due to inconsistent semantics and poorly used ARIA roles. The role="menubar" on the container forces screen readers into application menu mode, affecting navigation commands. The nested interactive elements with tabindex="0" creates two focusable elements nested inside each other: The outer <a> with tabindex="0" and the inner <span> with tabindex="0" and role="button". This creates duplicate tab stops and confuses screen readers about which element to focus. Links with href="javascript:void(0);" should be <button> elements since they trigger actions (expanding sections), not navigation. The role="menuitem" on expandable sections is not proper use; menu item roles shouldn't expand/collapse - they should either navigate or trigger actions. For expandable sections, you need <button> elements with aria-expanded. There is also a mix of role="menuitem" and actual navigation links. Some items are real links (Admin Search, Processes, etc.) and some are toggles. The inconsistent semantics confuse navigation for keyboard navigation.
For expandable sections:
\<button aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> New \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> For navigation links: \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> Admin Search\</a\> Remove: role="menubar" from container role="menuitem" from all elements All nested tabindex="0" elements All href="javascript:void(0);" links Inner \<span role="button"\> elements (since we will be using semantic \<button\>).
Suggested fix / example code
The following is example code; please update for each item and check for Javascript changes. Navigation Landmark:
\<nav aria-label="Admin navigation"\> ...\</nav\> Expandable section (with toggle): \<button type="button" aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> \<span\>New\</span\> \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> Individual Links (going to different page): \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> \<span\>Admin Search\</span\>\</a\> Pin Sidebar button: \<button type="button" aria-pressed="false"\> \<i aria-hidden="true" class="fa-angle-double-right"\</i\> \<span\>Pin sidebar\</span\>\</button\>
Issue 2 of 3: Admin Bar for Keyboard Navigation
Describe the bug
The admin navigation bar is not fully usable with keyboard navigation. Using the standard keyboard navigation (no VO), the focus order jumps around and skips menu items entirely.
Page
General Alerts and Sitewide Issues
WCAG Guideline
WCAG 2.1.1, 2.4.3, 4.1.2, 1.3.1
To Reproduce
Relevant code
Start of code snippet:
\<nav \_ngcontent-dspace-angular-c1031589132="" id="admin-sidebar" class="navbar navbar-dark p-0 vh-100 ng-trigger ng-trigger-slideSidebar ng-tns-c1031589132-4 collapsed ng-star-inserted" aria-label="Admin navigation bar" style="max-width: 55px;"\>\<div \_ngcontent-dspace-angular-c1031589132="" id="sidebar-header-container" aria-hidden="true" class="sidebar-full-width-container ng-tns-c1031589132-4"\>
Expected behavior
The admin navigation bar is not navigable or operable for keyboard users. The voice over navigation issues are occurring due to inconsistent semantics and poorly used ARIA roles. The role="menubar" on the container forces screen readers into application menu mode, affecting navigation commands. The nested interactive elements with tabindex="0" creates two focusable elements nested inside each other: The outer <a> with tabindex="0" and the inner <span> with tabindex="0" and role="button". This creates duplicate tab stops and confuses screen readers about which element to focus. Links with href="javascript:void(0);" should be <button> elements since they trigger actions (expanding sections), not navigation. The role="menuitem" on expandable sections is not proper use; menu item roles shouldn't expand/collapse - they should either navigate or trigger actions. For expandable sections, you need <button> elements with aria-expanded. There is also a mix of role="menuitem" and actual navigation links. Some items are real links (Admin Search, Processes, etc.) and some are toggles. The inconsistent semantics confuse navigation for keyboard navigation.
For expandable sections: \<button aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> New \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\>
For navigation links: \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> Admin Search\</a\>
Remove: role="menubar" from container role="menuitem" from all elements All nested tabindex="0" elements All href="javascript:void(0);" links Inner <span role="button"> elements (since we will be using semantic <button>).
Suggested fix / example code
The following is example code; please update for each item and check for Javascript changes. Navigation Landmark:
\<nav aria-label="Admin navigation"\> ...\</nav\> Expandable section (with toggle): \<button type="button" aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> \<span\>New\</span\> \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> Individual Links (going to different page): \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> \<span\>Admin Search\</span\>\</a\> Pin Sidebar button: \<button type="button" aria-pressed="false"\> \<i aria-hidden="true" class="fa-angle-double-right"\>\</i\> \<span\>Pin sidebar\</span\>\</button\>
Issue 3 of 3: Admin Navigation Keyboard Trap
Describe the bug
The screen reader in Mac (VoiceOver) gets stuck in a loop when reading the page. The focus goes from skip to main content button > admin menu > window name, and gets stuck repeating window name. Including a video instead of a photo for clarity on what this looks like. This is the same issue as the main navigation bar. The admin navigation bar starts with <nav>, but then they switch to role=menubar and role=menuitem, which make VoiceOver in Safari jump to the window level. VO in Safari registers these roles as software/application type of navigation, so it automatically jumps to the window-level. Since both the admin navigation and main navigation use role=menu, VO will keep going in a loop because it's being told constantly to jump up.
Page
General Alerts and Sitewide Issues
WCAG Guideline
WCAG 2.1.2, 4.1.2, 1.3.1
To Reproduce
Located in Admin menu bar.
Relevant code
See issue 2 of 3 code block above
Expected behavior
Screen reader users cannot access the page. Removing the role="menubar" and role="menuitem" roles fully resolves the VoiceOver looping behavior. This loop occurs because VoiceOver treats these roles as desktop application menus and repeatedly jumps out of the webpage into Safari’s window-level navigation. Converting expandable items into <button aria-expanded> and leaving navigation items as standard <a> links restores correct semantics and prevents the loop.
Suggested fix / example code
See code block above, as well as code block for navigation bar.
@lgeggleston
Submitted on behalf of University of Virginia (UVA) Library’s Assessment, Communications, and User Experience (ACE) team as part of internal DSpace 9 accessibility audit.
Issue 1 of 3: Admin Navigation for Screen Readers
Describe the bug
The left-hand admin navigation bar is not fully usable with Voice Over (screen reader). The dropdowns are not functional with voice over key commands, resulting in an unusable interface for screen reader users.
Page
General Alerts and Sitewide Issues
WCAG Guideline
WCAG 2.1.1, 2.4.3, 4.1.2, 1.3.1
To Reproduce
Located in Admin Menu Bar.
Relevant code
Start of code snippet:
\<nav \_ngcontent-dspace-angular-c1031589132="" id="admin-sidebar" class="navbar navbar-dark p-0 vh-100 ng-trigger ng-trigger-slideSidebar ng-tns-c1031589132-4 collapsed ng-star-inserted" aria-label="Admin navigation bar" style="max-width: 55px;"\>\<div \_ngcontent-dspace-angular-c1031589132="" id="sidebar-header-container" aria-hidden="true" class=Expected behavior
The admin navigation bar is not navigable or operable for screen reader users. The voice over navigation issues are occurring due to inconsistent semantics and poorly used ARIA roles. The role="menubar" on the container forces screen readers into application menu mode, affecting navigation commands. The nested interactive elements with tabindex="0" creates two focusable elements nested inside each other: The outer <a> with tabindex="0" and the inner <span> with tabindex="0" and role="button". This creates duplicate tab stops and confuses screen readers about which element to focus. Links with href="javascript:void(0);" should be <button> elements since they trigger actions (expanding sections), not navigation. The role="menuitem" on expandable sections is not proper use; menu item roles shouldn't expand/collapse - they should either navigate or trigger actions. For expandable sections, you need <button> elements with aria-expanded. There is also a mix of role="menuitem" and actual navigation links. Some items are real links (Admin Search, Processes, etc.) and some are toggles. The inconsistent semantics confuse navigation for keyboard navigation.
For expandable sections:
\<button aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> New \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> For navigation links: \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> Admin Search\</a\> Remove: role="menubar" from container role="menuitem" from all elements All nested tabindex="0" elements All href="javascript:void(0);" links Inner \<span role="button"\> elements (since we will be using semantic \<button\>).Suggested fix / example code
The following is example code; please update for each item and check for Javascript changes. Navigation Landmark:
\<nav aria-label="Admin navigation"\> ...\</nav\> Expandable section (with toggle): \<button type="button" aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> \<span\>New\</span\> \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> Individual Links (going to different page): \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> \<span\>Admin Search\</span\>\</a\> Pin Sidebar button: \<button type="button" aria-pressed="false"\> \<i aria-hidden="true" class="fa-angle-double-right"\</i\> \<span\>Pin sidebar\</span\>\</button\>Issue 2 of 3: Admin Bar for Keyboard Navigation
Describe the bug
The admin navigation bar is not fully usable with keyboard navigation. Using the standard keyboard navigation (no VO), the focus order jumps around and skips menu items entirely.
Page
General Alerts and Sitewide Issues
WCAG Guideline
WCAG 2.1.1, 2.4.3, 4.1.2, 1.3.1
To Reproduce
Relevant code
Start of code snippet:
\<nav \_ngcontent-dspace-angular-c1031589132="" id="admin-sidebar" class="navbar navbar-dark p-0 vh-100 ng-trigger ng-trigger-slideSidebar ng-tns-c1031589132-4 collapsed ng-star-inserted" aria-label="Admin navigation bar" style="max-width: 55px;"\>\<div \_ngcontent-dspace-angular-c1031589132="" id="sidebar-header-container" aria-hidden="true" class="sidebar-full-width-container ng-tns-c1031589132-4"\>Expected behavior
The admin navigation bar is not navigable or operable for keyboard users. The voice over navigation issues are occurring due to inconsistent semantics and poorly used ARIA roles. The role="menubar" on the container forces screen readers into application menu mode, affecting navigation commands. The nested interactive elements with tabindex="0" creates two focusable elements nested inside each other: The outer <a> with tabindex="0" and the inner <span> with tabindex="0" and role="button". This creates duplicate tab stops and confuses screen readers about which element to focus. Links with href="javascript:void(0);" should be <button> elements since they trigger actions (expanding sections), not navigation. The role="menuitem" on expandable sections is not proper use; menu item roles shouldn't expand/collapse - they should either navigate or trigger actions. For expandable sections, you need <button> elements with aria-expanded. There is also a mix of role="menuitem" and actual navigation links. Some items are real links (Admin Search, Processes, etc.) and some are toggles. The inconsistent semantics confuse navigation for keyboard navigation.
For expandable sections:
\<button aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> New \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\>For navigation links:
\<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> Admin Search\</a\>Remove: role="menubar" from container role="menuitem" from all elements All nested tabindex="0" elements All href="javascript:void(0);" links Inner <span role="button"> elements (since we will be using semantic <button>).
Suggested fix / example code
The following is example code; please update for each item and check for Javascript changes. Navigation Landmark:
\<nav aria-label="Admin navigation"\> ...\</nav\> Expandable section (with toggle): \<button type="button" aria-expanded="false" aria-controls="admin-menu-section-new"\> \<i aria-hidden="true" class="fa-plus fas"\>\</i\> \<span\>New\</span\> \<i aria-hidden="true" class="fa-chevron-right"\>\</i\>\</button\> Individual Links (going to different page): \<a href="/admin/search"\> \<i aria-hidden="true" class="fa-search fas"\>\</i\> \<span\>Admin Search\</span\>\</a\> Pin Sidebar button: \<button type="button" aria-pressed="false"\> \<i aria-hidden="true" class="fa-angle-double-right"\>\</i\> \<span\>Pin sidebar\</span\>\</button\>Issue 3 of 3: Admin Navigation Keyboard Trap
Describe the bug
The screen reader in Mac (VoiceOver) gets stuck in a loop when reading the page. The focus goes from skip to main content button > admin menu > window name, and gets stuck repeating window name. Including a video instead of a photo for clarity on what this looks like. This is the same issue as the main navigation bar. The admin navigation bar starts with <nav>, but then they switch to role=menubar and role=menuitem, which make VoiceOver in Safari jump to the window level. VO in Safari registers these roles as software/application type of navigation, so it automatically jumps to the window-level. Since both the admin navigation and main navigation use role=menu, VO will keep going in a loop because it's being told constantly to jump up.
Page
General Alerts and Sitewide Issues
WCAG Guideline
WCAG 2.1.2, 4.1.2, 1.3.1
To Reproduce
Located in Admin menu bar.
Relevant code
See issue 2 of 3 code block above
Expected behavior
Screen reader users cannot access the page. Removing the role="menubar" and role="menuitem" roles fully resolves the VoiceOver looping behavior. This loop occurs because VoiceOver treats these roles as desktop application menus and repeatedly jumps out of the webpage into Safari’s window-level navigation. Converting expandable items into <button aria-expanded> and leaving navigation items as standard <a> links restores correct semantics and prevents the loop.
Suggested fix / example code
See code block above, as well as code block for navigation bar.