[pni] Product Page Accessibility Testing

[youriwims]

Morphed to epic to track all the issues identified in comment #2

Related Issue: #3934

[Pomax]

Issues identified

→ Cross-page issues

"Serious" issues

Join us content is invisible instead of display:none

This means tabbing to the main content will "get stuck" cycling through everything in the "join us" newsletter slide-out panel, without any indication that that's where focus is.

We can either make that slide-out be display:none with extra work to make sure the transitions work properly, or we can make it so that if there is focus anywhere inside the slide-out, the slide-out itself gets revealed.

PNI nav contrast

Text color is too low contrast (currently #999999, which has contrast 2.85, and needs to be #707070 or lower to pass)

"Moderate" issues

Missing <main> element

This element is relied on by accessibility tools to directly navigate to the start of the main content... we don't have one =)

→ Homepage

"Serious" issues

creep-o-meter hint contrast

Text color is too low contrast (currently #999999, which has contrast 2.85, and needs to be #707070 or lower to pass)

"Moderate" issues

<figcaption> cannot be nested

The <figcaption> that we use in <figure> elements for each product cannot be nested inside another element and needs to be a direct child of <figure>

Headings "skip" from h1 to h3

Headings should not skip levels, so this h3 should be an h2, or not use heading markup.

→ Category pages

"Critical" issues

Missing alt attribute

Our product thumbnails do not have an alt attribute O_o

→ Specific product page

"Critical" issues

Missing alt attribute

Our product thumbnail does not have an alt attribute O_o

"Moderate" issues

missing <h1>

Documents should have at least one top-level heading element, whereas the highest heading for products is <h2> (the product name)

→ About page

"Moderate" issues

Headings "skip"

Headings should not skip levels, so this h3 should be an h2, or not use heading markup. Given that it's just more text, this should probably be <p> content with appropriate classes.

[Pomax]

With all this work landed, a new a11y pass needs to be done to determine what work is still left on the PNI a11y testing front.

[Pomax]

homepage

• Text for The 😮 below shows how creepy users find these products. should be gray-60
• Footer text "Protect the internet as a global public resource" should be <p> with h5-heading CSS, no an actual <h5>
• Footer text "More about us" should be a <p> as above

[Pomax]

Category page

• company + name should be <p>, not <h3>

[Pomax]

About page

• side nav should use gray-60
• inner <main> should be <div>

[Pomax]

And we're done.