Validate issues identified in PUI accessibility tests against Lyrasis ASpace sandbox environment.

[erussey]

Validate accessibility issues identified in #103 against the Lyrasis ASpace sandbox environment to assess whether these are issues Emory introduced during plug-in development or are issues native to the ASpace main code base. If the same issues exist in both environments, please comment below with enough details for Elizabeth to submit as a ticket to the ASpace community.

Lyrasis sandbox: https://sandbox.archivesspace.org/ Username: admin Password: admin

[CB987]

Accessibility scans run with Accessible Web dev tools extension

• home page: just the landmark comment (moderate/ best practice)

• /search? results page:

1. IDs used in ARIA and labels must be unique
   CRITICAL · WCAG 2.0 A
   Ensures every id attribute value used in ARIA and in labels is unique.
   Highlight element Search all record types Limit to collections Limit to digital materials
   <select name="limit" id="limit" class="form-control fill-column"><option selected="selected" value="">Search all record types</option>
   <option value="resource">Limit to collections</option>
   <option value="digital_object">Limit to digital materials</option></select>
   Failure Details
   Document has multiple elements referenced with ARIA with the same id attribute: limit

This may be hidden-- continue to look and see if hidden on ours. Yes, this element doesn't appear to be used.

2. <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
   SERIOUS · WCAG 2.0 A
   Ensures <dl> elements are structured correctly.
   Success criteria 1.3.1
   <dl id="facets"></dl>

Permitted content (from mdn docs) Either: Zero or more groups each consisting of one or more < dt > elements followed by one or more < dd > elements, optionally intermixed with < script > and < template > elements. Or: (in WHATWG HTML, W3C HTML 5.2 and later) One or more < div > elements, optionally intermixed with < script > and < template > elements. The only thing I see that seems out of place is that they have a < span > element around a spacer. I think if they changed that to a < div > element or made a different way to have a margin/padding between a last-of < dd > and a < dt >, that would work.

• /repositories: only the landmark issue

• /repositories/resources (aka collections) - also includes the facets filter so has the < dl > issue mentioned above

• repositories#/resources/# :

  1. Elements must only use allowed ARIA attributes
     CRITICAL · WCAG 2.0 A
     Ensures ARIA attributes are allowed for an element's role.
     Success criteria 4.1.2
     div.panel-collapse
     <div id="add_desc" class="panel-collapse collapse note_panel in" aria-expanded="true"></div>
     Failure Details
     ARIA attribute is not allowed: aria-expanded="true"
     div.panel-collapse
     <div id="subj_list" class="panel-collapse collapse note_panel in" aria-expanded="true"></div>
     Failure Details
     ARIA attribute is not allowed: aria-expanded="true"
     div.panel-collapse
     <div id="fa" class="panel-collapse collapse note_panel in" aria-expanded="true"></div>
     Failure Details
     ARIA attribute is not allowed: aria-expanded="true"
     div.panel-collapse
     <div id="repo_deets" class="panel-collapse collapse note_panel in" aria-expanded="true"></div>
     Failure Details
     ARIA attribute is not allowed: aria-expanded="true" 

Each of these divs has a heading and a panel. The panel is expanded or not by clicking on the heading. Therefore, as the "controlling" element, the heading should have the attribute of aria-expanded="true" (which it does, and is not flagged as an error), but the panel itself should not, bc it is not controlling anything, only being controlled. MDN Explanation The anchor link should also include aria-controls definitions as well as the aria-expanded. The controlling element gets both aria-controls and aria-expanded attributes. Could be a button, in this case is the < a > within the < h2 > of each of the panel headings. The actual element that responds, is expanded or not, is referred to by id in the aria-controls attribute. The element that is expanded, in this case a < div >, should have aria-labelled by (that can refer back to the id of the controlling element) or aria-label to refer it back to the interactive element if that element does not have a specific id.

• /repositories/#: only the landmark thing.

[CB987]

@erussey In summary, there are 3 issues that got flagged, but only 2 actually are visible in the site, one is hidden and seemingly unused, so really only 2 that I think it would be good for them to address if possible. I hope I've provided enough explanation and links to documentation, including the testing extension that I used, but if not, let me know where to flesh it out further and I'm happy to.