Evaluate/improve contrast for accessibility

[seanaery]

Per WebX discussion Oct 2015, ensure that the colors used together in the UI meet WCAG contrast standards for accessibility.

[mikedaul]

Generalized quick assessment:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PORTAL PAGE: https://repository.lib.duke.edu/dc/wdukesons
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

FAE report:
http://fae20.cita.illinois.edu/one-page/15246e711f190e70/gl/3/rule/4/

WAVE output

Errors:

(2) missing form label -->

• 'search' box (only using placeholder)
• timeline slider (not sure how best to fix this)

(1) empty button -->

• 'go' button for mast search (add text and hide it)

(11) empty link -->

• feature images (add title text and position behind images?)
  [https://www.w3.org/TR/WCAG20-TECHS/H2.html]

broken ARIA reference -->

• aria-labelledby="modal menu" needs a target

Alerts:

suspicious/duplicate alt text -->
change 'featured image' to just be empty (these are just decorative)

unlabeled form element -->
select menu for top search (can probably ignore for now, hopefully intuitive as-is?)

skipped heading level -->
doesn't like that we skipped h2 and h3, not a big deal

suspicious/duplicate link text -->
doesn't like our 'more >>' links (could probably give them a title, like 'read more about )

very low contrast warnings:

• white on green in alert bar (2.3:1)
  -- to reach 4:1, green (#a1b70d) should be more like #778808
  -- (we use this combo on the library site, worth fixing here?)
• grey 'contact' under rubenstein link (2.8:1)
  -- to reach 4.5:1, grey (#999) should be more like (#777)
• grey text inside of 'source collection' box
  -- to reach 4.5:1, lighten well from (#f5f5f5) to (#f9f9f9), darken text from (#999) to (#737373)
• grey text 'by' and 'xx months ago' under from our blog
  -- to reach 4.5:1, grey (#999) should be more like (#777)
• footer grey text
  -- to reach 4.5:1, lighten well from (#f5f5f5) to (#f9f9f9), darken text from (#999) to (#737373)

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
ITEM PAGE: https://repository.lib.duke.edu/dc/wdukesons/dscsi04049
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

*FAE report: *
http://fae20.cita.illinois.edu/one-page/152c807fb2869940/rc/

WAVE output

Errors:

(8) missing form label -->

• header same as on portal page
• rest are related to download links / page jumper?

(8) empty button -->

• header same as on portal page
• rest are in the seadragon output?

(1) empty link -->

• not sure, seadragon image?

(1) broken ARIA reference -->

• same as portal page

Alerts:

(1) unlabeled form element -->
same as portal page, safe to ignore?

(1) skipped heading level -->
safe to ignore?

(1) noscript element -->
seadragon interface, safe to ignore?

• general note: could we include some helper text for using a keyboard to navigate openseadragon(https://openseadragon.github.io/examples/ui-keyboard-navigation/)
  Also, the 'image reference strip' seems to not allow for selecting a new page via keyboard only, unless I'm missing something...

very low contrast warnings:

• (19) instances of grey (#999) on white (2.8:1)
  -- to reach 4.5:1, grey (#999) should be more like (#777)
• footer text same as portal page (#999 on #f5f5f5)
  -- to reach 4.5:1, lighten well from (#f5f5f5) to (#f9f9f9), darken text from (#999) to (#737373)

[seanaery]

This is really helpful. Looks like we have a lot of areas for followup.

[mikedaul]

Cool – thanks!

I think most of the issues should be pretty easy to mitigate.

The only thing that really stands out to me as being problematic for real-world use is keyboard navigability of the ‘reference strip’ with multi-image items (although I just noticed this is already a tracked issue - doh!)