AMP accessibility errors

[brentryanjohnson]

Site navigation ✅ Fixed via #259

• Three navigation button aria-controls attributes are causing errors for invalid names (all for missing hyphens)
  • How It Works
  • Policies & Audits
  • State Tax Information

Example

<button aria-controls="extended-nav-section-how-it works" aria-expanded="false" class="usa-accordion__button usa-nav__link" type="button"><span>How it Works</span></button>
Note
This BUTTON has an aria-controls attribute value of 'extended-nav-section-how-it works', which includes one or more invalid or duplicate ids

Policies

• Missing ul for list items
• This element does not have a ul element (without an ARIA-assigned role); ol element (without an ARIA-assigned role); or element with a role set to the value: list as a parent

Site secondary navigation heading

• Secondary (in-page) navigation headings are not sequential

  <h4/>
  Note
  This element creates an inappropriate jump in heading levels within the document heading hierarchy

  

Video embeds (iframes)

• AMP flags videos with absolute unit declarations for height or width values
  • This element has a height attribute value in absolute units. Percentage based units need to be used

Note I'm not sure we can do much about this one; videos need a height attribute to display properly, and percentage height gets tricky in this context. I'll dig into how significant of an accessibility issue this is, but neither pa11y nor Lighthouse flagged this one.

State Tax Forms

• AMP is flagging the Go button: This button element has a suspicious accessible name

Summary boxes

• We're using USWDS summary boxes on a few pages (Customer Support; Bank Contact Information)
• This pattern uses aria-labelledby="summary-box-key-information", but that labelledby attribute isn't referencing anything

Logos and Designs

• AMP is flagging the table: This table appears to be used for layout but does not have a role of presentation

[jfredrickson5]

For the site secondary navigation heading issue, should those h4 elements be h2 instead, or not a heading at all (i.e., just a p)?

[brentryanjohnson]

@jfredrickson5 another href accessibility issue came up:

Description
<a onclick="document.querySelector('#purchase').scrollIntoView({behavior: "smooth"}); event.preventDefault();" href="#purchase">Purchase</a>

Note
This A element has an accessible name of 'purchase' that is the same as another A element but doesn't go to the same HREF.

This appears to be at least partially caused by using JS for scroll behavior.

We should consider applying smooth scroll with CSS instead.

[brentryanjohnson]

☝️ Looking back at (what I thought was) the smooth scroll issue, it looks like that accessibility error is actually caused by one Purchase link going to an in-page id, and a separate Purchase body-text link going to a PDF. I still think we should fix the smooth scroll, but that won't clear the accessibility error. We could add PDF to the body link text so the descriptive text is different.

[brentryanjohnson]

Smooth scroll issue potentially resolved in #284

[A-L33]

Please replace this language: "Companies include, AVENTURA TECHNOLOGIES, INC​. Huawei Technologies Company Subsidiaries or Affiliates of Huawei ZTE Corporation Subsidiaries or Affiliates of ZTE Corporation Hytera Communications Corporation Subsidiaries or Affiliates of Hytera Communications Corporation Hangzhou Hikvision Digital Technology Company Subsidiaries or Affiliates Hangzhou Hikvision Digital Technology Company Dahua Technology Company Subsidiaries or Affiliates of Dahua Technology Company Kaspersky Lab"

With this language: "Check our Section 889 Representations tool for information about specific businesses."

[JessicaMarine1]

@A-L33 @rebekahperillo this is ready for review: https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/preview/gsa/smartpay-website/staging/policies-and-audits/policies/

[A-L33]

Done!