Review and prioritize 2019 accessibility report findings

[eloquence]

In 2019, with support from Internews, Accessibility Lab completed a review of the SecureDrop Journalist Interface and the SecureDrop website. While we reviewed the findings of the report, at the time, we did not have bandwidth to implement significant changes. Thanks to continued support from Internews, @cfm is working with us, and will review these findings and develop a prioritized set of improvements. This issue will serve as an epic to organize this work as it pertains to the Journalist Interface.

Tasks prioritized so far

• decorative imgs need empty alts #5983 (WCAG 1.1.1)
• functional imgs need explanatory alts #5984 (WCAG 1.1.1)
• status-indicator imgs need explanatory alts and ARIA annotations #5985 (WCAG 1.1.1)
• semantic (HTML5/ARIA) page structure (WCAG 1.3.1) that passes validation (WCAG 4.1.1)
  • semantic (HTML5/ARIA) page structure in Source Interface #5986
  • semantic (HTML5/ARIA) page structure in Journalist Interface #5987
• ping Accessibility Lab with an update after semantic (HTML5/ARIA) page structure in Source Interface #5986 and semantic (HTML5/ARIA) page structure in Journalist Interface #5987
• add "skip to main content" link to all views (WCAG 2.4.1)
  • adds "skip to main content" link to all pages that inherit from base templates #6237
• check that form errors are semantically linked to their triggering inputs (WCAG 3.3.1) #6238
• add non-color differentiation to :hover and :active styles (WCAG 1.4.1, 1.4.11, 2.4.7; but see caveat)
  • Review and prioritize 2019 accessibility report findings #5972 (comment)
• check current color scheme meets contrast requirements (WCAG 1.4.3, 1.4.11; but see caveat)
  • Review and prioritize 2019 accessibility report findings #5972 (comment)
• prevent focus behind/outside dialogs (WCAG 4.1.2) #6241 (blocked)
• surface view-level h1s (or equivalents) in page titles (WCAG 2.4.2) #6313
• review link/button text and expand or add labels where necessary (WCAG 2.4.4, 3.3.2) #6404
• annotate abbreviations and SecureDrop jargon (WCAG 3.1.3, 3.1.4) #6405

Related/open questions

• ARIA support for source/journalist interfaces #3268
• Guidelines and documentation: cf. Guidelines for the use of "alt" text in icons #5743 → review options for accessibility linting (versus documentation) #6314
• Tests for a11y compliance to prevent regressions in new features, etc. → review options for accessibility linting (versus documentation) #6314

[cfm]

Here's my first-pass triage of the report's recommendations, for discussion with @zenmonkeykstop and @ninavizz at your convenience. If more analysis is needed here before we review together, just let me know.

[ninavizz]

Off the cuff I will offer that I believe many of the key colors all changed after this audit was conducted. The "Get Codename" page still uses the older color schema, and the messaging and lack of an active-state are all the same. I think we also just added an updated alt-tag to the newsroom logo. Just FYI.

A related wishlist item of my own, in service to ongoing UX improvements: the odd header schema has also been difficult to work with in wanting to make low-impact (but relevant to improving visual hierarchies) typography changes. "Regulating" the typography oddities between the JI and SI feels related to this. eg: there's no set em/px value for body, it's just normal. Which makes visual page improvements towards clearer hierarchies (usability), hard. </babble>

Excited to have you tackling this, @cfm! :)

[zenmonkeykstop]

Note overlap (in the 1.1.* items) with #5743 .

[cfm]

Notwithstanding good progress here, my research and experiments suggest that some elements of the UI (for example) may be impossible to bring into full WCAG compliance without the use of JavaScript, which is not an option on the Source Interface. Even in these cases where we can't reach full compliance, however, these improvements will make (e.g.) the Source Interface considerably more accessible via assistive technology.

[eloquence]

One thing we may want to look into for the next round of changes is how to minimize the need to re-translate strings - e.g., should we generate our own translations in cases where only HTML elements or attributes change (can we do so in the main repo and then import these into Weblate?).

[ninavizz]

Note: The items "add non-color differentiation to :hover and :active styles (WCAG 1.4.1, 1.4.11, 2.4.7)" and "check current color scheme meets contrast requirements (WCAG 1.4.3, 1.4.11)" are both addressed in the #6211 SI work. Likewise, lots of recommendations for HTML and CSS standardization. Relevant to those changes, though—many pages do not have H1s, by design. Not sure if that will mess-up meeting the letter of A11y stuff—but it meets the spirit of A11y best practice (like, the pages have clear dang hierarchies w/o the H1s).

[cfm]

Thanks, @ninavizz! Re:

Note: The items "add non-color differentiation to :hover and :active styles (WCAG 1.4.1, 1.4.11, 2.4.7)" and "check current color scheme meets contrast requirements (WCAG 1.4.3, 1.4.11)" are both addressed in the #6211 SI work.

Yep, I recognize that there's growing overlap between these soon-finished and soon-begun projects. I'll still look for easy ways to tick these boxes, especially on the Journalist Interface, but I won't obsess over them. :-)

Relevant to those changes, though—many pages do not have H1s, by design. Not sure if that will mess-up meeting the letter of A11y stuff—but it meets the spirit of A11y best practice (like, the pages have clear dang hierarchies w/o the H1s).

Absolutely. I've changed this point to read "surface view-level h1s (or equivalents) in page titles".

[cfm]

Confirming that:

• add non-color differentiation to :hover and :active styles (WCAG 1.4.1, 1.4.11, 2.4.7; but see caveat)

—is due to be addressed in, and so effectively superseded by, #6211; and

• check current color scheme meets contrast requirements (WCAG 1.4.3, 1.4.11; but see caveat)

—is already satisfied by the color scheme adopted since the audit was conducted in 2019.

Thanks, @ninavizz!

[eloquence]

@cfm Is it time to close out this epic and maybe track any remaining issues individually?

[cfm]

Sure thing, @eloquence. Towards that end, @eaon, would you consider #6211 to address (or obsolete) these points as well, at least in the Source Interface?

• review link/button text and expand or add labels where necessary (WCAG 2.4.4, 3.3.2)
• annotate abbreviations and SecureDrop jargon (WCAG 3.1.3, 3.1.4)

Conversely, would you recommend these changes still be made in the current Source Interface, so that #6211 &c. can inherit from them?

[eloquence]

Per discussion at sprint planning, let's close the epic for now and open separate issues on the above as needed.

[cfm]

All remaining WCAG recommendations are now filed separately, with particular reference to the upcoming #6315 and #6211.