[Deque Analysis] Collection Edit "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 Collection Edit page has a total of 4 serious accessibility issues (not including color contrast which are handled in other tickets).

1. (ID 470097) "Link does not have a role." on the "browse" link with the drag & drop upload box. () has no "role". Should be fixed by using a <button> tag, or by adding role=button attribute. FIXED ALREADY
   • NOTE: this same issue is in the Submission form and was rated as "critical" there (see #1171), so it should be fixed in the same manner.
2. (ID 471078) "The visual boundary of form fields lacks 3 to 1 contrast ratio." on all of the textarea fields in the Collection Edit form (including Introductory text (HTML), Short Description, Copyright text (HTML), News (HTML), License, Provenance)
   • The visual boundary of an ACTIVE user interface component color: #CED4DA, Background: #FFFFFF, The contrast ratio is: 1.5:1
3. (ID 471434) "Link contrast is not at least 3:1 with surrounding text." on the "Browse" link in the drag & drop upload box
   • Link text: #207698, Surrounding text : #959595, The contrast ratio is: 1.7:1.
   • NOTE: This same browse link also appears elsewhere obviously, so it should be fixed in a generic way so that it's fixed wherever the same drag & drop component is used.
4. (ID 471440) "Content overlaps with adjacent content at 320px width." on the entire page. When this page is viewed in a 320px width screen it overlaps with the Management/Admin sidebar. APPEARS TO BE FIXED

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=25&sortField=ordinal&sortDir=asc&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bpage_number%5D=15&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]

The final two Color Contrast issues in this ticket are Fixed by #2587. Therefore this ticket can be closed once that PR is merged & will be solved in 7.6.2