Adjustments for accessibility (based on Voiceover)

[tealtan]

Running this through Voiceover I encountered these issues.

(We’ll want to check NVDA/JAWS separately, after fixing these issues first)

[tealtan]

Hero

• [x] Let’s have screenreaders skip the chart since the caption is a good equivalent. (I think we have a utility class for this?)

Latest totals

• [x] Voiceover is reading the number and the label separately, it’d be smoother to have it read them together, e.g. "7,285,178 Total test results". Let’s apply role=text on its container div which will make that happen.
• [x] The "See all data" cta is read before the numbers below, which is ok but not ideal. If there’s a way we can have the cta appear later in the markup while maintaining its current position (i.e. with absolute positioning or something), let’s do that – if it seems complicated, let’s leave this open.

CTA

• [x] Voiceover is reading the arrow glyph, which we don’t want. Let’s try hiding it with the utility class.

Press List

• [x] Voiceover is reading the bullet glyph, which we don’t want. Let’s try hiding it with the utility class.

Press Logos

• [x] I am not sure how useful having screenreaders read these logos are. Let’s hide them with the utility class, and add screenreader only text that says something like "News organizations including The New York Times, The Washington Post, CNN, Vox, ProPublica, and The Wall Street Journal use our data in their reporting."

Alt text for images

• [x] TK for CRDT project illustration
• [x] TK for Johns Hopkins image
• [x] TK for White House image
• [x] TK for COVID Exit Strategy image

Blog

• [x] In the bylines, let’s have screenreaders skip over images and consider them decorative – adding an empty alt tag will do the trick.

[sarawb]

Content for those Alt text items

CRDT Illustration of a face split into strips of different colored skintones on a light purple background.

JH Chart from the Johns Hopkins COVID-19 Testing Insights Initiative depicting daily total tests and daily positive tests using COVID Tracking Project data.

WH Image composite showing COVID Tracking Project data in use on a slide from the White House’s “Opening Up America Again” testing strategy presentation deck.

CES Screenshot of a COVID Exit Strategy chart that uses COVID Tracking Project data in its state-by-state comparison of interventions, testing, and outcomes.

[kevee]

@tealtan I used aria-hidden for the chart.

[kevee]

For the role="text", JSX was throwing an error that this constituted an "abstract" role. I can't find "text" in the list of ARIA roles. I made JSX skip these, but FYI.

[kevee]

I think we fixed all these issues, but a pass with NVDA/JAWS would be great.

[tealtan]

Awesome, thanks!

That role error is odd, but I think it’s fine for now.