Homepage Accessibility Improvements

[s3ththompson]

from Matt King, 1:1 feedback:

• Title element and H1 on home page should match.
  • Suggested mitigation:
    • add H1 "ARIA-AT Home"
    • change "Enabling Interoperability for Assistive Technology Users" to H2
    • In order to keep mission statement as the primary visual heading and avoid repetition with "ARIA-AT" logo in navbar, make H1 screen-reader-only, and keep current visual style for H2.
• Vimeo iFrame embedding should hide video title (via query parameter)
• ARIA-AT home link in navbar should have aria-label="ARIA-AT Home" attribute
• "Skip to main content" should be before navbar, outside of nav element

[jscholes]

@s3ththompson

"Skip to main content" should be before navbar, outside of nav element

This is addressed, in part, by #366. I say "in part", because it does move the skip link to be the first element on the page, but it doesn't move it outside of the nav. That would represent a WCAG failure and usability issue, because then the skip link wouldn't be encompassed by any landmark at all.

To address this, I suggest a <header>, with three children: the skip link, the home link, then the nav. This is because the linked PR also adds a heading for the nav. Or, we can leave the skip link before the home link, but still in the nav.

change "Enabling Interoperability for Assistive Technology Users" to H2

This doesn't semantically feel quite right. I see this text as a subtitle of the home page/project as a whole, and therefore it would be more appropriate as plain text (styling aside). If my reading of that situation is wrong, and it is actually intended to be a sibling of "How are we improving interoperability?", then an h2 is fine.

CC @mcking65 / @jkva

[s3ththompson]

@jscholes thanks for the quick reply!

r.e. skip link, I didn't think about the overlap with #366, but if I'm understanding your proposal correctly, it seems compatible with the intent behind Matt's suggested mitigation.

r.e. changing the mission statement to H2, I wanted to followup with you about this as I know you expressed some hesitation about this approach. I think Matt's suggestion indeed presumes that the statement is a sibling of "How are we improving interoperability?" but I'll let him comment on this, directly. cc @mcking65

[jscholes]

@s3ththompson

r.e. skip link, I didn't think about the overlap with #366, but if I'm understanding your proposal correctly, it seems compatible with the intent behind Matt's suggested mitigation.

If #366 is merged as is, the structure would go:

• nav
  • skip link
  • Home link
  • level 2 heading (off-screen): "Main Navigation"
  • ... list of nav links...

This is somewhat nonstandard; most websites we work on have a header wrapping the skip link, Home link and nav, i.e.:

• header
  • skip link
  • Home link
  • nav
    • level 2 heading (off-screen): "Main Navigation"
    • ... list of nav links...

In this case, we left the nav (in effect) acting as the header in the PR, to avoid making too many Bootstrap-related changes (@jkva can elucidate further on that if required). It would futureproof the app a bit, though, e.g. if search or other functions are added to the header in the future. So I would vote for that, and it's not a lot of work.