Accessibility testing

[klohman]

Before the new OASIS+ site goes live, we need to do some manual & automated testing, to ensure the new program site is accessible:

• [x] Run lighthouse
• [x] 508 testing

  • AMP
  • WAVE evaluation tool

• [x] Keyboard navigation testing (@klohman )
• [x] Testing with 200% zoom (@brentryanjohnson)
• [x] Screen reader testing w/ 508 team (script)
• [x] Log any issues discovered
• [x] Add Pa11y

[weiwang-gsa]

AMP Manual Testing

1.Home page:

• Ensure text and images of text provide sufficient contrast ( Can be ignored, please see comment below for manual color ratio test results)

Desc:

Find out what’s next

Note: This H2 contains text with a background color of #ffffff rgb(255, 255, 255) and foreground color of #ffffff rgb(255, 255, 255) that is 18 point in size or larger; or bold text that is 14 point in size or larger that has a luminosity contrast ratio of 1, which is below 3:1

• [x] ID is not unique [This issue already been addressed, Code fix merged into main]

Below are the places that need correction:

2.About OASIS+

• [ ] Header Level: Ensure heading level matches the heading's visual importance/level (verified in code, the issue is due to OASIS+ on the top menu also H1, so two H1 on the same page, AMP doesn't like two H1s in one page, confirmed with Kristen, this issue can be ignored for now, we will replace it with OASIS+ logo once we get new logo )

About OASIS+

Note This H1 creates an inappropriate jump in heading levels within the document heading hierarchy

3.Top Menu :

when top menu is not clicked, run AMP, it will render Color contrast ratio issue, it looks like pointing to menu, but with further look, it seems generated automatically and not direct code managed by us. Note: I searched from our code in VSCode, can't find those with class ="item-tooltip">, but when I search the home page source code (rendered html), I found those hidden element below. Looks to me it is auto generated and not code we directly managed, but I am not sure if this is auto generated by astro or USWDS. @mark-meyer or @jfredrickson would you mind double checking this issue, and see if this issue can be addressed or ignored?

• [ ] Color contrast ratio is low instance details example: Description Menu Note This SPAN contains text with a background color of #ffffff rgb(255, 255, 255) and foreground color of #ffffff rgb(255, 255, 255) that is less than 18 point in size; or bold text less than 14 point in size that has a luminosity contrast ratio of 1, which is below 4.5:1

click expand for top menu, then run AMP. Below errors are identified: @mark-meyer would you mind taking a look as well since you are currently working on top menu?

• [ ] Avoid placing inactive elements in the focus order

Description Skip to main content Note This A is focusable and has an aria-hidden attribute set to true

• [ ] Avoid inappropriate use of ARIA roles, states, and properties

• [ ] Ensure ARIA regions, landmarks and HTML sections are identifiable (This is new -03/06/2024, maybe related to changes on top menu)

4.How OASIS+ compares to OASIS Legacy

• [x] Heading level jumps. ( H1->H3, need to change to H2, Fixed)

5.Obtain a Delegation of Procurement Authority

• [x] Same link text link to different URL

6. Sellers - Review solicitations

• [x] Heading level jump: should be H2 instead of H3 (Fixed0

7. Contact

• [x] Title value is suspicious. (did code test, the issue is the page title is too short, and it doesn't give enough information. Confirmed with @rosamundtgov, changed the Contact page title/header from "Contact" to "Contact OASIS+" )

WAVE tool manual testing:

All other pages passed excerpt for Home page:

• [x] Missing alt text for images (Fixed)

- Low color contrast ( Can be ignored, please see comment below for manual color ratio test results)

Lighthouse manual testing:

• [x] 1.Sellers-review-solicitations (Fixed)

-Heading level jump (Same as AMP)

• [x] 2.How OASIS+ compares to OASIS Legacy (Same as AMP, Fixed)

-Heading level jumps.

[weiwang-gsa]

@rosamundtgov For DPA page, there are same" OASIS+ Interact Community" text linked to slightly different URL, which cause accessibility complaints , one is https://buy.gsa.gov/interact/community/196/activity-feed, another one is https://buy.gsa.gov/interact/community/196, can we sync both using same link, e.g. both use https://buy.gsa.gov/interact/community/196/activity-feed?

[weiwang-gsa]

For Home page color contracts issue (AMP & WAVE), for "Find out what’s next" section, actually we are using a dark background image, but these automated tool are checking against background color (white) vs foreground text color( also white), I did manual color contrast ratio test for the foreground text vs background image, the color contrast ratio is good and passed the accessibility requirement, please see screen shot below. So this color contrast ratio issue on home page can be ignored.

[jfredrickson5]

How about adding pa11y to do a bit of automated testing?

[vickimcfadden]

Seems like a good idea to me @jfredrickson5 , @mark-meyer @weiwang-gsa ☝ what do you think?

[weiwang-gsa]

@vickimcfadden yes, we will add the pa11y for automated testing, just let you know that pa11y can only catch obvious accessibility issue, it can't catch intense accessibility issues like AMP does though, manual testings are still needed.

[rosamundtgov]

@rosamundtgov For DPA page, there are same" OASIS+ Interact Community" text linked to slightly different URL, which cause accessibility complaints , one is https://buy.gsa.gov/interact/community/196/activity-feed, another one is https://buy.gsa.gov/interact/community/196, can we sync both using same link, e.g. both use https://buy.gsa.gov/interact/community/196/activity-feed?

Let's use https://buy.gsa.gov/interact/community/196 across the board. I'll make a note on another ticket to update this other places if needed.

[weiwang-gsa]

@vickimcfadden automated accessibility test pa11y is added to the project and code merged into main. @rosamundtgov the link update for "OASIS+ Interact Community" is completed and code also merged into main.

[weiwang-gsa]

Just confirmed with @klohman, the "OASIS+" as H1 header causing two H1 header on one page issue can be ignored for now until we get new OASIS+ logo to replace it.

@rosamundtgov, for Contact page, the page title currently set to "Contact", which is too short and AMP doesn't like it, is it possible we change both page title and h1 header to "Contact OASIS+" or something longer that you think more appropriate? I tagged you in the accessibility findings as well just in case you want to know what is the issue.

[mark-meyer]

For items under 3.Top Menu

• First item is only reproducible when running locally using Astro's dev server. It is caused by the tool bar astro inserts on the page in development mode
• The issue "Ensure ARIA regions, landmarks and HTML sections are identifiable" has been addressed by ensuring the Aria labels are unique.
• The issues around "This A is focusable and has an aria-hidden attribute set to true" is caused by USWDS javascript adding aria-hidden to main page elements when the side navigation is open. We are relying on USWDS for this — if this is an issue the ends up impacting users, we would need to address this with the USWDS team.

[klohman]

Keyboard testing complete and no issues found.

[klohman]

Also reviewed with 200% zoom on Chrome and saw no issues. @brentryanjohnson If you want to take a quick look as well.

[brentryanjohnson]

I tested the main branch at 200%...I didn't noticed any specific problems, other than the side (in-page) nav gets cropped out of the viewport, which likely isn't a huge deal.

As an aside, I did notice the button link on this page is broken. I suspect that's probably a known issue. (Also, these icons are 💯!)

[klohman]

@brentryanjohnson Thanks for the review. I added the broken link to #120

[vickimcfadden]

I think we have all of the issues identified in other cards and/or done. Moving this to done.