[Deque Analysis] Submission / MyDSpace "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 28 Critical issues exist in the Submission/MyDSpace pages. They are summarized here:

1. (3 issues) "Elements must only use allowed ARIA attributes."
   • (Issue ID: 469501, 469502) The aria-expanded attribute is invalid on input fields (it currently appears for dc.type and dc.language.iso fields). See https://www.w3.org/TR/wai-aria-1.1/#aria-expanded It should be removed from those form fields.
   • (Issue ID: 469503) The aria-multiline attribute is invalid on combobox role (it currently appears for dc.subject field). See https://www.w3.org/TR/wai-aria-1.1/#aria-multiline It should be removed. MOVED TO [Deque Analysis] ARIA / Label Issues in Submission form (Critical) #1272
2. (4 issues) "IDs used in ARIA and labels must be unique." Multiple elements in the submission form currently use ID=traditionalpageone, ID=traditionalpagetwo, ID=upload, ID=license.
   • (Issue IDs: 469532, 469533, 469534, 469535)
3. (4 issues) Form/Select elements must have labels.
   • (Issue ID: 469536) The dc.type field is not linked up with its <label> tag.
   • (Issue ID: 469538) The <select> for the dc.identifier field doesn't have a <label> or an aria-label attribute. MOVED TO [Deque Analysis] ARIA / Label Issues in Submission form (Critical) #1272
   • (Issue ID: 470007) "Access condition" & "Grant Access" fields in Bitstream embargo are no associated with their visible labels.
   • (Issue ID: 470145) On MyDSpace page, the "Show" selectbox (on left side) is missing / not associated with a label
4. (4 issues) Several Keyboard navigation issues
   • (Issue ID: 469698) "browse" link in the file drag & drop component is inaccessible to keyboard navigation (appears on both Submission & MyDSpace).
   • (Issue ID: 469927) Reorder buttons (when field allows multiple values, e.g. Author, Other Title, etc) are inaccessible to keyboard navigation (you cannot tab to them). MOVED TO [Deque Analysis] Reorder buttons in Submission forms are not keyboard accessible (Critical Issue) #1271
   • (Issue ID: 469979) Arrows above/below date field (to change year/month/day) are inaccessible to keyboard navigation (you cannot tab to them).
   • (Issue ID: 470011) Bitstream embargo fields have a keyboard trap (Upload a file -> Edit -> "Access Condition" to "embargo" or "lease" -> Attempt to tab past the "Grant access..." field). It's not possible to tab past them until you fill them out (Keyboard focus is trapped within the field). See also https://dequeuniversity.com/class/input-methods2/keyboard-input/keyboard-traps
5. (4 issues) Button does not have a name or role
   • (Issue ID: 469700) "browse" link in the file drag & drop component (<input type="file">) has no "role". Should be fixed by using a <button> tag, or by adding role=button attribute.
   • (Issue ID: 470002, 469770) Download, Edit & Remove buttons (red trash can) next to an uploaded file (in "Upload Files" section) all have no name/label. They likely all need an aria-label value.
   • (Issue ID: 470014) Calendar icon/button (on embargo fields) do not have a name/label.
6. (1 issues) Element's role is incorrect. The "Add more" button on multivalued fields says it has role=group, but that's not correct. (Issue ID: 469774)
7. (2 issues) Focus indicator is missing.
   • (Issue ID: 469873) No focus indicator exists on the form section headings ("Describe", "Describe", "Upload files", "Deposit License"). All elements must have a visual focus indicator when in focus.
     • Common keyboard focus indicator solutions include (choose one): (1) A 2px box around the focused element, (2) A change in the background color of the focused element (3) The addition of an icon, such as an arrow, next to a menu item (4) The addition of a thick line under or next to the focused element (5) A distinctive change to the text of the component such as making it bold and/or underlined (6) Use the default browser focus indicator. NOTE: Since each browser has its own default focus indicator style, check each of the major browsers (Chrome, Firefox, Edge, IE, Safari) to ensure the default focus indicator is visible as you tab through the page.
   • (Issue 470001) No focus indicator exists on File buttons (Download, Edit, Delete...and Save/Cancel after clicking Edit).
8. (1 Issue) (Issue ID 469984) Group of form controls is missing "group" label. This occurs on three fields: "Date of issue", "Series/Report No.", "ISSN/Identifiers". Group labels MUST be associated with the group. To Fix, use either "fieldset/legend" technique or ARIA "group/labelledby" technique. See https://dequeuniversity.com/class/forms2/group-labels/semantic
9. (1 Issue) (Issue ID 469993) Two comboboxes are missing roles/attributes. Specifically "dc.type" and "dc.language.iso" fields.
   • Two options to fix. Either use <select> and <option>. Or, use ARIA design pattern for a combobox, see https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
10. (1 Issue) (Issue ID 470010) Form field with error not identified. Occurs on the "Grant Access" fields in the Bitstream Embargo section. When an error occurs it is not linked to the field. Ideally this should occur by using aria-describedby attribute to reference a unique ide attribute value on the error message container. See also https://dequeuniversity.com/class/forms2/form-validation/error-identification
11. (1 Issue) (Issue ID 470062) Section status icons are missing alt text. When a submission section has a green checkmark, it has all required fields filled. Otherwise it shows an orange exclamation mark. Both those status icons are missing alt text.
12. (1 issue) (Issue ID 470065) Some elements have incorrect names/labels.
    • "Add more" button has aria-label="remove button"
    • Section headers open/close icons (up/down arrows) always say aria-label="close" They probably should say close section or open section depending on whether the section is open/closed.

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%5Bpage_number%5D=10&filter%5Bpage_number%5D=11

More Information / Tools

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

[tdonohue]

@atarix83 : Assigning this to you/your team for analysis.

[atarix83]

I estimate about 2/3 hours to fix all them

[tdonohue]

Thanks @atarix83 ! I'll add that estimate & assign to you for your team to work on (when you are ready)