Accessibility Testing for Accredited Representation Management, Appoint a Representative MVP

[oddball-lindsay]

Platform guidance: https://depo-platform-documentation.scrollhelp.site/collaboration-cycle/prepare-for-an-accessibility-staging-review

Product information

• [x] Team name, product name, and feature name have been added to the title of this issue.
• [x] Team label, product label and feature label (if applicable) have been added to this issue.

Who completed the use of color and color contrast test?

No response

Use of color and color contrast checks

Tool options: Wave extension for Chrome

• [ ] All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
• [ ] All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
• [ ] Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
• [ ] Color is not the only way to distinguish links from other text (eg. links are underlined)
• [ ] Any charts, maps, infographics, and tables convey all information without only relying on color
• [ ] Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")

How did color testing go?

No response

Who completed the axe scans?

No response

axe checks

• [ ] Each page has been scanned using axe (results shared below)
• [ ] axe is integrated into your end-to-end testing

axe DevTools scan results

No response

How did axe testing go?

No response

Who completed the content zoom and reflow test?

No response

Content zoom and reflow checks (desktop AND mobile)

• [ ] All page elements are readable and usable at 200% zoom
• [ ] All page elements are readable and usable at 300% zoom
• [ ] All page elements are readable and usable at 400% zoom

How did content zoom and reflow testing go?

No response

Who completed the keyboard navigation test?

No response

Keyboard navigation checks

• [ ] Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
• [ ] Each link, button, form input, checkbox, radio button, select menu, and custom element responds to expected keys
• [ ] All elements under focus have a visible focus indicator
• [ ] The order of [Tab] stops made sense and was appropriate for completing tasks

How did keyboard testing go?

No response

Do you have any other results to share?

No response

[jquispe-oddball]

I tested with WAVE and Axe. The Chrome browser was used for both desktop and Android testing.

How did color testing go? No color contrast issues. WAVE tool did flag two errors per page related to color contrast, but it is not telling me which element it is. I believe this is an error related to WAVE. AXE did not flag any color contrast issues

How did axe testing go? There is one critical error. On representative-search, the input field has no label. This might be logged in the google documentation.

There is a moderate error on some pages where the heading order is incorrect. These are logged in the google sheet.

Same error was logged using WAVE:

There are some flags related to “best practices” but it is not a blocker. Some radio input fields are being flagged as having an incorrect role.

How did content zoom and reflow testing go? I was able to successfully test on desktop at 200, 300, and 400% zoom. Android chrome has a limit of 300%. At 200% and 300% zoom on mobile, it is not usable. I have attached screenshots that show the text being clipped completely. Sometimes the text does resize properly, but you will notice some clipping on almost every form page.

On representative search, if I am on 300% zoom, I cannot see what I typed in.

How did keyboard testing go? Each link, button, and form elements like checkbox, radio, and select had a focus indicator. I was able to navigate radio buttons with the arrow keys as well. Tab order was fine as well, no major issues to report.

Do you have any other results to share? Sometimes when I go into a new page, the page loads and I can only see the footer. I have to scroll up to see the content. I can replicate this while navigating with keyboard or mouse. If I am on any step in the form, and hit refresh, it returns an error page.