briandeconinck/a11y-artifact-discovery

a11y-artifact-discovery

a11y-artifact-discovery's Issues

Accessibility Testing for [Team TEST, Product TEST, Feature TEST]

Product information

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

Who completed the use of color and color contrast test?

@sterkenburgsara

Use of color and color contrast checks

• 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?

TEST TEST: Our team didn't design the icons on our page and have no control over them, but the contrast within the icon is not 3:1 (dark gray circle with black icon at center). It does meet contrast requirements to adjacent background. Do you have advice?

Who completed the axe scans?

@sterkenburgsara

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

TEST: Axe reports that 67 instances of "element must have sufficient color contrast." The expansion on this issue states "the element's background color could not be determined due to a background image." Test done on this page: (https://www.va.gov/education/)

How did axe testing go?

This meets our expectations, but a few issues did show up. I am confident that the color contrast meets the requirements listed above, but axe couldn't read it. Should I do anything about this? How do I know if any of this will be designated as launch blocking?

Who completed the content zoom and reflow test?

@sterkenburgsara

Content zoom and reflow checks

• 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?

Great! No issues.

Who completed the keyboard navigation test?

@sterkenburgsara

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?

Great!

Do you have any other results to share?

• I wasn't able to add additional labels to this ticket (probably while its in your personal repo?)

• If someone wanted to do additional testing using JAWS or a device, should we provide a link to advanced accessibility testing documentation/guidance within this ticket?

Another test

Accessibility Testing for [47915, Cheryl E, TEST-1]

Product information

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

Who completed the use of color and color contrast test?

CherylEvans

Use of color and color contrast checks

• 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?

@briandeconinck Is this space intended to answer the above questions, and tag someone to look at prior to SR? Is this space also intended to reference any GH issues you've created as a result of this testing? :-)
I assume it is, just wanted to be sure.

Who completed the axe scans?

CherylEvans

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

There were no unresolved issues.

How did axe testing go?

@briandeconinck Testing went well. I have attached an image.

Who completed the content zoom and reflow test?

CherylEvans

Content zoom and reflow checks

• 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?

@briandeconinck I am attaching a test image

Who completed the keyboard navigation test?

CherylEvans

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?

@briandeconinck

Do you have any other results to share?

@briandeconinck TEST TEST TEST

[Accessibility Testing]: 526ez | Update military service options

Product information

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

Who completed the use of color and color contrast test?

joshkimux

Use of color and color contrast checks

• 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?

I also tested using various filters. Using greyscale, my eyes strained a bit reading the thicker source sans font.

That being said, it still easily passes the required contrast ratio.

Who completed the axe scans?

joshkimux

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

Nothing but the usual flags to review color contrast and the repetitive link in the header

How did axe testing go?

Easy as always!

Who completed the content zoom and reflow test?

joshkimux

Content zoom and reflow checks

• 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?

joshkimux

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?

Robin is the GOAT 🐐 , so this went mostly smoothly despite the immense complexity of this pattern.

Visible focus indicators?

There is the open conversation on if there should or shouldn't be a visible focus indicator for elements that receive focus but aren't interactive e.g. the legends Robin jumps the focus to.

To make the experience more consistent, we may want to consider only placing the focus on interactive fields. This is more of a defect-4 (minor/consider) ticket though as the experience still works smoothly and may not even be an issue if it tests well.

Focus is lost when more than one fieldset is expanded

When more than one fieldset is expanded and the user clicks "save," focus is lost and is not placed on the edit button as what would be expected.

Screen.Recording.2022-11-15.at.8.50.48.AM.mov

Acceptance criteria

• When more than one fieldset is expanded and the user clicks "Save," focus should be placed on the edit button of that fieldset

Mismatched focus when updating multiple fieldsets

Another interesting issue I caught is when the following conditions are met

• 3 service periods exist
• The first two service periods are open and the third is closed
• The user clicks "update" or "cancel" on the second service period
• Focus is sent to the third service period's edit button, not the second

Screen.Recording.2022-11-15.at.8.55.49.AM.mov

Acceptance criteria

• Focus must be sent to the service period's edit button when updating (and not to different service periods)

Do you have any other results to share?

Smooth scroll

When a new service period is added, the page smooth scrolls down to follow the focus which may cause physical discomfort for some Veterans with TBI or vestibular disorders.

Screen.Recording.2022-11-15.at.8.38.02.AM.mov

Acceptance criteria:

• Page does not smooth scroll when adding a new service period (a quick jump to is preferred)

Persistent errors

When a user...

1. Adds a new service period
2. Attempts to submit without filling out anything
3. Receives an error
4. Deletes the new service period (without filling anything in)
5. Adds a new service period again

The errors are still active. For a screen reader user, they'll hear a loud bleep alert calling out an error.

Screen.Recording.2022-11-15.at.8.45.11.AM.mov

Acceptance criteria

• When adding a new service period, errors should not persist from prior efforts

Test

[Accessibility Testing]: [Insert Product Name] TEST

Who completed the use of color and color contrast test?

No response

Use of color and color contrast checks

• 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 resizing test?

No response

Content zoom and resizing checks

• All page elements are readable and usable without any horizontal scrolling at 200% zoom
• All page elements are readable and usable without any horizontal scrolling at 300% zoom
• All page elements are readable and usable without any horizontal scrolling at 400% zoom

How did content zoom and resizing 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
• 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