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

[tdonohue]

Critical: This issue results in blocked content for people with disabilities, and will definitely prevent them from accessing fundamental features or content. This type of issue puts your organization at risk. Prioritize fixing as soon as possible, within the week if possible. Remediation should be a top priority.

Deque Analysis Summary

A total of 9 Critical issues exist in the Header (visible on all pages). They are summarized here:

1. (ID 468402, 468403, 469227, 469228) IDs/Labels must be unique: Two elements exist having each of the ID=dropdownLang and ID=dropdownUser and ID=inputEmail and ID=inputPassword . It appears these elements appear twice in the generated HTML code, but only one is visible on the page. (I'm not sure why this is?)
2. (ID 468406) Searchbox in header has no label. It should either be given a label, or have the aria-label attribute added to describe it. (Likely the latter is fine, as it doesn't have visible label text by default)
3. (ID 469259) Language dropdown should be a <select> instead of a <ul> as it is a "listbox".
   • (ID 469256) Also it needs to be accessible via keyboard (current you can tab to it, but cannot arrow down to select a different language)....this might be fixed by turning this into a <select> as well.
4. (ID 468465) Cannot open "All of DSpace" dropdown via keyboard (only triggers on mouse hover). Likely this should be implemented similar to the language dropdown or Login dropdown (as those both can be opened by tabbing and clicking Enter)
5. (ID 468473) Search icon button has no href value. It MUST have an href value:
   • Fix this issue by providing an HREF value (even if JavaScript event handlers are used) for the link. (Note: Ensure that if JavaScript event handlers are used, they allow the link to be activated with the Enter key in addition to the mouse click.).
   • e.g. <a href=quickview.html">Quick view</a>
   • e.g. <a href="javascript:void(0);">Quick view</a>

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=100&sortField=ordinal&sortDir=asc&row=9&filter%5Bseverity%5D=4&filter%5Bcomponent_number%5D=0&filter%5Bpage_number%5D=8

More Information / Tools

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

[tdonohue]

@atarix83 : Assigning this to you/your team for analysis, as you helped redesign the new one-line header. Hopefully these will be pretty straightforward, though I linked to the full results if you need more details.

[atarix83]

(ID 469259) Language dropdown should be a instead of a as it is a "listbox". (ID 469256) Also it needs to be accessible via keyboard (current you can tab to it, but cannot arrow down to select a different language)....this might be fixed by turning this into a as well.

I'm not really sure how it can be turned to a select tag having the same behaviour of a dropdown menu, if the problem is that list item should be accessible via keyboard it can be resolved also maintaining the ul tag

For all of them I estimate about 1 hour to fix

[tdonohue]

Thanks @atarix83 , there's two issues noted with that Language dropdown (and you may want to read the full details in the Deque link)

• (ID 469259) Listbox: Listbox is missing appropriate roles and/or attributes. -> The suggestion here from Deque was to turn it into a <select>. However, this may be solvable in a different manner...it looks like we might be able to provide the missing roles via ARIA tags on the existing <ul>...maybe somewhat similar to this example: https://a11y-guidelines.orange.com/en/web/components-examples/dropdown-menu/
• (ID 469256) Also it needs to be accessible via keyboard. As you said, this can be solvable also as a <ul>. The above example link shows one option (there may be others).

All in all, your approach of keeping it a <ul> is fine with me, as long as we provide better ARIA tags to describe the role.

I'll add your estimate & assign to your team to work on when they are ready.