WAVE & other accessibility audits show several errors

[jvine]

• [x] Images in the thumbnail index are missing alt text
• [x] Several form elements are missing labels (not clear if these are all user-perceivable or some are hidden)
• [ ] The document headings are all <h1>, which doesn't really reflect the structure of the viewer, and several of the headings are empty
• [ ] There are some empty links (i.e. link contains an icon but no link text) including, but not limited to:
  • <a href="/" id="top"></a>
  • <a href="#" class="toggle more"></a>
  • <a class="imageBtn iiif" href="..." title="IIIF Manifest" target="_blank"></a> (AFAIK a link title is not sufficient for all screen readers. We use the bootstrap sr-only class to add text that's not visible but still perceivable.)
  • in Firefox/Fangs all the icon links are perceived as empty
• [ ] There's a lot of redundant title text - i.e. title text is identical to the link text. Better to leave out the title text, as at best it adds noise.
• [ ] Focusable elements that aren't visible - should either make them visible while in focus or take them out of the tabindex.
  • <a href="/" id="top"></a>
  • <div class="paging btn prev disabled" tabindex="0" title="Previous" style="position: relative; padding-left: 0px; padding-top: 0px; display: block; top: 120.5px;"></div>
  • <a href="#" class="toggle more"></a>

[jvine]

http://wave.webaim.org/extension/ https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/ and Chrome > Inspect > Audits

[mejackreed]

Note: likely empty labels will be difficult to address in this first round

[edsilv]

Should we make all of the modal dialouges use h2 instead of h1?

Do you want to remove link titles entirely?

Two of the example focusable elements do not have a tabindex? Perhaps it needs to be set to -1?

[jvine]

Trying to refresh my memory on some of these things...

Should we make all of the modal dialouges use h2 instead of h1?

The reporting tools show all the h1s in the HTML, including those that are within display: none; divs, so it's a bit misleading. It probably makes sense for the dialogues to use h2, but I can't see that there's an h1 for the embed as a whole; and in practice there should not be any empty h1s. This is what the outline looks like in WAVE:

Do you want to remove link titles entirely?

Yes.

Two of the example focusable elements do not have a tabindex? Perhaps it needs to be set to -1?

<a> elements are focusable by default. In general, the tab order should just follow the visual order of the elements on the screen - let the browser handle it. Only elements that aren't focusable by default (like divs) need tabindex="0" to insert them into the default order. Not sure why these specific elements are focusable when they're not visible - how are they hidden? When/how do they become visible? I mean, tabindex="-1" might work, but I'm not sure it's the best answer.