Modify OPUS for compliance with accessibility guidelines

[rfrenchseti]

https://www.w3.org/WAI/WCAG21/Understanding/

[rfrenchseti]

https://www.section508.gov/

[dstopp]

In general:

• add aria-label="Collapse" (or appropriate) to all unlabeled buttons

• ul elements must only contain li; example on front page widgets contains div (op-input)

• li parent ul must have role="list" <currently 'tablist'>

• document should not have more than one banner landmark -

• ensures landmarks are unique

• multiple area role/attribute issues w/"Recent Announcements"

• form elements must have labels

• select element must have an accessible name

• elements must meet enhanced color contrast ratio thresholds

• page should contain a level-one heading

• aria dialog and alert dialog nodes should have an accessible name

• Certain ARIA roles must contain particular children; in this case, the ul element has children which are not allowed

• list view table header text should not be empty

• links must have discernible text (addition of aria-label to href links)

• document should have one landmark (add role="main", etc do appropriate divs); ensures landmarks are unique (role and/or title )

• form elements must have labels

• All touch targets must be 24px large, or leave sufficient space

• Table header text should not be empty

• Heading levels should only increase by one (there is an

  as part of the download options list)

• Select element must have an accessible name (the recommended method for most circumstances is to use the label element and an explicit association using the for and id attributes. )

[matthewtiscareno]

This is super helpful, @dstopp. I wonder whether we might want to give a presentation about this at the PDS Management Council "virtual face-to-face" meeting in July.

[matthewtiscareno]

@mseritan 👀

[rfrenchseti]

Since @dstopp has done the analysis, I'm changing this issue to be for actually changing OPUS to meet accessibility guidelines.