[Deque Analysis] Submission form'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 Submission form as a total of 17 serious accessibility issues (not including color contrast which are handled in other tickets).

1. (ID 469537) "<ul> and <ol> must only directly contain <li>, <script> or <template> elements" on the Subject field. Currently the Subject field (ds-chips) is implemented as a <ul> with a <div> and <input> in it. This is invalid.
   • FIXED BY ul and li replaced to role list and listitem #2084
2. (ID 469707) "Status message is not automatically announced" on the "Processing... 91%" message that appears as a file is uploaded (in the drag & drop area).
   • HOW TO FIX: Fix this issue by using ONE of the following techniques:
     • Set focus to the interstitial message: https://dequeuniversity.com/class/dynamic-updates2/notify-users/move-focus
     • Announce the interstitial message via an ARIA live region: https://dequeuniversity.com/class/dynamic-updates2/notify-users/aria-live
   • NOTE: This also appears on the MyDSpace page, so ideally it should be fixed in a general location so it can be fixed wherever the file upload drag & drop appears.
3. (ID 469871) "List or list item is not marked up properly." on the list of Communities/Collections within the Collection dropdown (at the top of the page).
   • NOTE from Deque: " These results require one single list markup but here each list item is marked as a list <ul> which is incorrect. "
   • The fix would be to rework this so that the entire menu is a <ul> with embedded <li>, etc.
   • FIXED BY ID 469871. List or list item is not marked up properly. #2085
4. (ID 469915) "Element functions as if it has two roles." on each section header in the form (e.g. "Describe", "Describe", "Upload files", "Deposit license", etc).
   • NOTE from Deque: "The element has two roles a tab and a button, this can be confusing to the screen reader users."
5. (ID 469928) "Non-decorative content is inserted using CSS pseudo-elements." affects several icons in the form : (1) draggable icon for reordering values, (2) delete icon for deleting a value, (3) status icons on sections -- green checkbox & orange exclamation.
   • NOTE: As of 7.6.1, this bug only appears to affect the "draggable icon for reordering values". The other icons mentioned above now have ARIA labels.
   • 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.
6. (IDs 469971, 469981, 470003, 470008) "Multiple buttons have same name but different actions." occurs in several areas. In each area, we should add an aria-label or aria-describedby attribute to better describe the button/link.
   • Every trash can button next to multi-valued field values has the same name.
   • Every "Add more" link (under multi-valued fields) has the same name.
   • Every increment/decrement arrow in the "Date of Issue" field has the same name. Should be named something like "increment year", "increment month", etc.
   • Every delete button in "Upload files" section (after uploading multiple files) has the same name.
   • Every trash can button after editing an uploaded file has the same name
   • Every "Add more" link after editing an uploaded file has the same name.
7. (IDs 469973, 470009, 470028) "Status message is not automatically announced" occurs on all error messages displayed below required fields (i.e. when form saves & a required field is not filled out, an error is displayed below that field). This also exists on embargo dates after selecting an embargo, and in the "You must accept the license" error message.
   • Fix this issue by using ONE of the following techniques:
     • Set focus to the interstitial message: https://dequeuniversity.com/class/dynamic-updates2/notify-users/move-focus
     • Announce the interstitial message via an ARIA live region: https://dequeuniversity.com/class/dynamic-updates2/notify-users/aria-live
8. (IDs 469975, 470055, 470019) "Label is not persistent" or "Visible label is missing" occurs in a few places
   • Date of Issue field's "Year/Month/Date" inputs do not have labels...they just have placeholder text (which disappears after you start typing)
   • Those same Date of Issue fields have invalid aria-label="name" attributes, which makes them even more confusing. (NO LONGER REPRODUCIBLE in 7.6.1)
   • Calendar popup in embargo date fields (after editing an uploaded file)... The Month and Date dropdowns have no label. (NO LONGER REPRODUCIBLE in 7.6.1)
9. (ID 470054) "Content clipped at 200% zoom" on the placeholder text in the Date of Issued field's input fields for Year/Month/Date. Likely this could be fixed by removing the placeholder text in favor of a label.
10. (ID 470057) "Content is overlapped at 320px width" on form buttons (at the bottom). When the form is viewed on a 320px device/width, the "Save", "Save for later", "Discard" buttons overlap all the form content. (As of 7.6.1, this overlapping no longer occurs. Buttons are in a separate, static footer. The style isn't great, but it ensures they do not overlap)

Full list of issues is viewable at (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&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bpage_number%5D=11&row=9

More Information / Tools

• Consider using Deque's free Chrome plugin to check your work
• Deque's color contrast tool: https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI

[tdonohue]

Reopening, as only part of this has been fixed.

[atarix83]

@tdonohue

we can take a look to those issues.
I'm not sure everything can be solved but making an analysis and fixing the issue could take around 20hrs i think

[tdonohue]

Thanks, @atarix83 ! Assigning to you and adding the estimate.