[Deque Analysis] Header's "serious" accessibility issues

[tdonohue]

Serious: This issue results in serious barriers for people with disabilities, and will partially prevent them from accessing fundamental features or content. People relying on assistive technologies will experience significant frustration as a result. Issues falling under this category are major problems, and remediation should be a priority.

Deque Analysis Summary

Our Header has a total of 11 serious accessibility issues (not including color contrast which are handled in other tickets).:

1. (Issue ID: 468401) Document has active elements with the same id attribute: query. We may need to change the id of the query field in the header, as it may conflict with the query field in the main section of the homepage.
2. (Issue IDs: 468407, 468408, 468409, 468410) Lists in headers are deformed. "<ul> and <ol> must only directly contain <li>, <script> or <template> elements" (and visa versa)
   • It appears our <ul> elements tend to contain a custom Angular template (e.g. ds-navbar-section) which then contains the <li>. We may need to find a way to stop Angular from printing out the template tag, if that's possible. Some possible hints https://stackoverflow.com/q/38716105/3750035
   • NOTE: @artlowel analyzed this as part of [Deque Analysis] Admin/Action Sidebar's "serious" accessibility issues #1185 and it can be fixed as part of that ticket. So, this ticket no longer needs to resolve these issues.
   • FIXED by Minor header button improvements #2527
3. (Issue ID: 468467) "All of DSpace" submenu: The presence of the submenu and its state are not exposed.
   • Suggestions include BOTH of these: (1) Use aria-haspopup="menu" on the element that toggles the submenu open/closed. and (2) Use the aria-expanded attribute on the element that toggles the submenu open/closed with a value of "true" (when the submenu is expanded) or "false" (when the submenu is collapsed).
   • ISSUE MOVED TO [Accessibility] "All of DSpace" menu in header does not expose the presence of the submenu & its state via ARIA attributes #2699
4. (Issue ID: 468472) Keyboard focus falls on an element that is hidden (search box). That element should either be fully hidden or visible when focused. See also https://dequeuniversity.com/class/input-methods2/keyboard-input/tab-order and Issue ticket.
   • FIXED by Minor header button improvements #2527
5. (Issue ID: 469258) "Keyboard focus is lost or misplaced due to user interaction or content update, or other reason." on the Language button & User Profile link.
   • Activate the "Language" icon/ "User profile" icon
   • A dropdown (language) and login (modal) appears respectively
   • When the focus is still on the icons, activate the buttons, to collapse the expanded content.
   • Observe that the focus is lost and the next tab focus enters the "Admin Sidebar".
   • Fix this issue by explicitly placing focus on a logical element when content is removed, refreshed, or added, for example: (1) For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content - such as in single page applications. (2) For content removed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.
6. (Issue ID: 469319) Non-decorative content is inserted using CSS pseudo-elements. (Search icon & globe icon)
   • RULE : Non-decorative content MUST NOT be inserted using CSS :before and :after pseudo-elements unless there is a way to access the content with CSS turned off.
   • HOW TO FIX: Fix this issue by including the content directly in the DOM using HTML. See also https://www.w3.org/TR/WCAG20-TECHS/F87.html
7. (IDs 468404, 468405) "id attribute value must be unique". Document has multiple static elements with the same id attribute: search-navbar-container and logoutDropdownMenu
   • NOTE: Rated a "minor" issue, not "serious", but it may be simple to fix. If it's not simple, it should be delayed & moved to a different ticket.
   • FIXED BY Fix accessibility issues #2683

(NOTE: several content overlap / zoom issues, ID: 469270 and 469272, were also reported by Deque, but they appear to have been fixed by #1118)

The full list of these issues (which includes links for more info) can be found at this link (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues?activeTab=dt-issue&page=0&pageSize=25&sortField=ordinal&sortDir=asc&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bcomponent_number%5D=0&row=9

Related work

Related also to #1167 (other Header issues), but this ticket is slightly lower priority.

More Information / Tools

• Consider using Deque's free Chrome plugin to check your work

[tdonohue]

@atarix83 : Assigning this to you as well, since you have the other header ticket #1167....this one is lower priority though.

[tdonohue]

Reanalyzed this ticket today after several accessibility fix PRs (see above). I believe ALL the issues are resolved in this ticket except for (Issue ID: 468467) "All of DSpace" submenu: The presence of the submenu and its state are not exposed

Therefore, I'm going to close this ticket as fixed (as of 7.6.2) and open a new ticket to track that final accessibility bug. See #2699